css-position


Relative positioning of custom controls with OpenLayers 3


A map that I am building with OpenLayers 3 has some buttons, which may or may not be available depending on some other things. So I want to keep the unavailable buttons hidden, and others will use their space. The available options can change, so sometimes a button may become (in)visible.
There are some tutorials for creating custom controls with OpenLayers 3. The problem is that all samples I have seen use absolute positioning for the controls. One needs to know how many controls will be visible, and hard-code the coordinates in CSS. Or change the coordinates using Javascript. I.e., from the above link:
.rotate-north {
top: 65px;
left: .5em;
}
I have tried just setting the element with position:relative, but then they appear below the map, as the controls are added to the page after the map. So, one could use relative positioning with negative coordinates, but then if the map changes size you have to rewrite the coordinates in Javascript.
.ol-control.left-top {
position: relative;
top: -400px; /*map height*/
}
Is there a way to elegantly implement relative-positioned custom controls with OpenLayers 3, ideally with only CSS?
I guess I am trying to get a similar functionality as in the Google Maps API:
map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlDiv);
Though it is not a good solution for my use case, since it is not supported by Android 4.3 and earlier, one could use CSS calc as suggested by #Jonatas:
html:
<div class="parent">
<div class="map"></div>
<div class="control"><button>CONTROL</button></div>
</div>
css:
.map {
width: 100%;
height: calc(100vh - 2em);
background-color: green;
}
.control {
position: relative;
left: .5em;
top: calc(-100vh + 2em + .5em);
}
This would probably have to use viewport units (also not supported by Android 4.3 and earlier), as calc can only calculate values based on the parent element.
jsfiddle: https://jsfiddle.net/adlerhn/zjt53nmf/

Related Links

Parallax element on screen scroll
How to absolutly center an overlaid Font Awesome icon?
Sticky slick slider element hidden when position fixed
Why “POSITION:RELATIVE” messes up things?
div containing absolute img has zero height
Need static menu when overflow-x:scroll
How can I put a section under cross-fade background section
Content div nex to fluid fixed div
Where does this distance difference come from
Absolute position relative to some arbitrary element
Relative positioning of custom controls with OpenLayers 3
How to set div height with relative position as child div with absolute position using css?
I'm trying to put a fixed divsion at the top of the page but when I scroll with FF, lines are lost
fixed position z-index not working
how to create adjustable gap between elements (div)
How to properly apply a css hack for IE11 transition misbehaviour

Categories

HOME
azure-stream-analytics
oracle12c
adal
c99
google-spreadsheet
toolbox
sitecore
r-googlesheets
alarm
javacc
carousel
emscripten
hpc
jetty
recordrtc
little-proxy
mel
project-intu
mautic
tput
symbol
altera
alpacajs
bourbon
symbols
user-experience
visual-glitch
r-mice
postscript
angular-routing
easeljs
direct3d11
syntax-highlighting
outliers
entity-relationship-model
8051
tpm
sinch
iis-express
cart
card.io
slacktextviewcontroller
getlasterror
roblox
video-capture
watchman
graphhopper
trigonometry
berkeley-db-je
openrasta
tf
ngmaterial
avx
dt
trigger.io
mathcad
branch-prediction
sandcastle
cudd
omxplayer
builtins
ng-grid
delta
jclouds
respondcms
cda
redis-cluster
ikiwiki
lz77
np-spring
kendo-upload
exim4
pypiserver
rate-limiting
rpart
skspritenode
pyobjc
telepat
mraid
android-broadcast
umlgraph
mmwormhole
android-vibration
crowd
contrast
formview
raygun
xml-namespaces
file-not-found
git-repo
light
gd-graph
hidapi
pclzip
appjs
update-statement
rmdir
mtu
squishit
uideviceorientation
office-2007
feasibility
localizable.strings

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App