Rendering issue when using a touch screen about ol-geocoder HOT 15 CLOSED

Hey @jmgomezpoveda sorry this long delay but with #109 things will adjust soon.

from ol-geocoder.

On further research, it looks as though the issue happens with touch screens, when the .ol-touch event is triggered.

from ol-geocoder.

So, adding the following styles does fix the size of the component when a touch screen is used and detected:

.ol-touch .ol3-geocoder-search {
    height: 39px;
    width: 39px;
}
.ol-touch .ol3-geocoder-search-expanded {
    width: 222px;
}
.ol-touch .ol3-geocoder-input-search {
    top: 5px;
    left: 39px;
}

Now, there is a separate issue in both Chrome and Firefox with the default value of the "top" property:

calc(.5em+65px)

Both Firefox and Chrome say "Invalid property value".

from ol-geocoder.

Another style is needed to fix the results popup in touch screens:

.ol-touch UL.ol3-geocoder-result {
    left: 39px;
}

from ol-geocoder.

@jmgomezpoveda can you confirm that this is solved with v2.4.0?

from ol-geocoder.

All my positioning and styling is broken with 2.4.0. I will need to rework the customisation.
In a quick test, the styles still seem to be broken when using a touch screen (though of course my fix no longer works).

from ol-geocoder.

Sorry for that. v2.4.0 has a big change in CSS selectors.

from ol-geocoder.

Rendering with 2.4.0 with the traditional control has some glitches, which so far I have been unable to fix in my project.

As per the jsfiddle:

from ol-geocoder.

I can't confirm this in my machine, latest version (v3.0.0).

Is this still relevant? @jmgomezpoveda

from ol-geocoder.

Apologies, I am not working on the website these days, so I won't be able to test it anytime soon.

from ol-geocoder.

Will reopen if this persist.

from ol-geocoder.

This still persists. You can open the fiddle on a touch device to replicate it.

from ol-geocoder.

Is there anyone willing to provide a fix?

from ol-geocoder.

The issue comes from an openlayer feature that makes buttons bigger when a touchscreen is detected.
When a touchscreen is detected, it adds the ol-touch class to the map with the consequence of enabling this css rule:

.ol-touch .ol-control button {
    font-size: 1.5em;
}

which makes the control buttons bigger.

The reason this does not work with the ol geocoder control is because it uses absolute positioning for the button, unlike the openlayers controls in which the size of the container is determined by the size of the content (the button).

A quick fix is simply to override this rule for the ol geocoder control:

.ol-touch .ol-control.gcd-gl-control button {
    font-size: 1.14em; 
}

(1.14em is the initial value from ol geocoder stylesheet)

But then this control is smaller than the other controls in touch mode. To solve it, we can make everything bigger by adding a property on the container when in touch mode:

.ol-touch .gcd-gl-container {
    font-size: 1.1em; 
}

Also, I noticed that when not in touch mode, the ol gecoder buton is actually bigger than the other controls.

This does not seems to be on purpose so I fixed it by adding this:

.gcd-gl-container {
    font-size: 0.9em; 
}

tldr: this fixes it:

.ol-touch .ol-control.gcd-gl-control button {
    font-size: 1.14em;
}
.ol-touch .gcd-gl-container {
    font-size: 1.1em; 
}
.gcd-gl-container {
    font-size: 0.9em; 
}

Jsfiddle: http://jsfiddle.net/8rj2upvk/4/

Tested with the latest versions of openlayers(6.4.3) and ol-geocoder(4.0.0), with chrome and firefox desktop and mobile.

from ol-geocoder.

Thanks @Nadeflore

from ol-geocoder.