HTML SELECT Tag in popup content

[Masahiro Kinoshita]

Hi, for some reason HTML SELECT and other Tag does not work in popup content (class="leaflet-popup-content") with Firefox. You can reproduce the same issue with map on this page http://leafletjs.com/.

Change the content to HTML from...

A pretty CSS3 popup.<br>Easily customizable.

To...

<select><option>one</option><option>two</option></select>

When you try to change the value from one to two with a mouse, can't select with Firefox but works with Chrome.

Please let me know if you can reproduce the error and how to fix the issue.

Thank you!

[Masahiro Kinoshita]

Here is the sample code that doesn't work with Firefox. http://jsfiddle.net/f7aPm/3/

I have been playing around with the z-index to see if that is the problem but still can't find the solution.

Thanks, MK

[Paulo Vieira]

On Fri, Feb 22, 2013 at 3:41 PM, Masahiro Kinoshita <wil...@gmail.com> wrote:

Here is the sample code that doesn't work with Firefox. http://jsfiddle.net/f7aPm/3/

I have been playing around with the z-index to see if that is the problem but still can't find the solution.

I also faced this problem sometime ago. After some debugging in the L.Popup class, I concluded that the problem happened because of the call to L.DomUtil.setPosition that is done in the method _updatePosition.

This was a really odd bug. After some more testing I understood that problem was related to the fact that L.DomUtil.setPosition uses the css "transform:translate". It seems firefox can't handle well "transform:translate" and the "select" element.

If you really want to use traditional dropdowns in a popup, define "L.Browser.any3d = false;" at the beggining of your script. That will work. But everything else will suffer, so it's probably not a solution. I'm thinking about simulating the dropdown using pure-css. Hopefully that will work in all the browsers. If you do this or if you can find another solution, please let me know.

Here are some more details about the firefox bug:

Bug 664707 - Unable to use drop-down list (<select>) in a div with transform:translate
https://bugzilla.mozilla.org/show_bug.cgi?id=664707

[Masahiro Kinoshita]

Thanks for your reply.

I had to discover transform:translate issue the hard way by turning off CSS elements one by one to see what was causing it. Two classes were "leaflet-map-pane" and "leaflet-popup". First, I thought it had something to do with the z-index but no. I haven't try the L.Browser.any3d but I found a temporary solution that worked in Firefox only.

Before.. (does not work)

<select><option>one....

Change to this for Firefox only (works)

<select size="6"><option>one....

For now, I can live with slight design change between Firefox and the rest of browsers. The major reason I wanted to use the select html element is because in mobile platform user can scroll and select the values easier.

Thank you,

Masahiro

[Paulo Vieira]

On Mon, Feb 25, 2013 at 5:36 PM, Masahiro Kinoshita <wil...@gmail.com> wrote:

I found a temporary solution that worked in Firefox only.

Change to this for Firefox only (works)

<select size="6"><option>one....

Nice trick! Thanks.

[Barrett Burnworth]

I'm having a similar issue with a custom control on the Android stock browser. Haven't tested on iPhone to know. Using Leaflet 0.8-dev.

Basically the code from the tutorial:

  // control that shows state info on hover
  var info = L.control();

  info.onAdd = function (map) {
   this._div = L.DomUtil.create('div', 'info');
   this.update();
   return this._div;
  };
 
  info.update = function () {
   this._div.innerHTML = '<select name="selB" id="selB" onchange="onSel();"><option>one...
  };
 
  info.addTo(map);

I can use the select option on my desktop in FireFox. When I try using my android stock browser, I can select it in about 1 out of every 40 taps.

I know there are other issues regarding android. Anyone know a fix?

[scott rivas]

I'm having the same issue in Firefox, the thread that was linked to says that it should be corrected on Firefox 20 but it seems to still be happening. Anyone know of any workarounds for this bug?