Comments (15)
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.
Related Issues (20)
- TypeScript Typings, Exports
- Warning when using ol-geocoder from the CDN HOT 2
- Search Button - search does not work from smartphone if there is another text field HOT 6
- Remove search layer from legend HOT 3
- "countrycodes" option broken with array HOT 2
- Broken on Openlayers 7.1.0 HOT 23
- Limit search result to city HOT 2
- Allow custom URL for osm provider HOT 10
- URL for OSM provider is wrong HOT 1
- Init error on 4.2.0 HOT 3
- src/nominating.js better import on 4.2.0 HOT 1
- Error on bbox returned by nominatim.js 4.2.0 on Openlayers 7.4.0+ HOT 1
- Announcement: Transfer of Repository Ownership HOT 1
- How to customize original css style for geocoder text-input? HOT 5
- Tile layer is hidden by the marker layer in Openlayers 9.0.0 HOT 1
- SASS : Using / for division outside of calc() is deprecated
- keepOpen flag not working for Submit Button HOT 1
- The marker is an external dependency HOT 1
- mapquest API change HOT 1
- ol-geocoder 4.3.3 dosn't work in qgis2web preview HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ol-geocoder.