search

angular-ui / ui-leaflet

AngularJS directive to embed an interact with maps managed by Leaflet library
http://angular-ui.github.io/ui-leaflet
Other
314 stars 134 forks source link

Doesn't work with CSS percentages or Javascript styles #224

Open davidrhoderick opened 8 years ago

davidrhoderick commented 8 years ago

I am building an app where I want the map full width and full height of its parent element. Width is achieved through CSS using width: 100% and height is achieved through an angular directive that watches for changes in window height and applies a calculated 100% height of the parent. These are applied to the <leaflet> directive.

When I render in browser, these full width and height measures throw off the coordinates for center and for bounds. Is there any work around? Do I just have to set a fixed width using media queries? What is going wrong?

P.S. Removing my CSS width setting makes the map full width but I have the same problem.

MattSidor commented 8 years ago

height is achieved through an angular directive that watches for changes in window height and applies a calculated 100% height of the parent.

Why are you using JavaScript to calculate the height? Can't you use pure CSS for this instead? (e.g. position: relative; height: 100%;) This may alleviate your center coordinates issue.

davidrhoderick commented 8 years ago

Tried that, didn't work; I need to use my directive. I don't know if it is because at the highest level, my app has to be full-screen and I use a directive to do that to adjust for screen/browser window size changes. I tried to remove all directives and use CSS and it didn't even show the map. I apparently need to use a pixel-based height for it to show up correctly.

nmccready commented 8 years ago

This is what I use in stylus

.angular-leaflet-map
  height 100%
  width 100%
  position absolute
  background #e3e1de
hefler commented 8 years ago

Might be an old thread, but could be worth to others. I assume the reason your CSS only solution didn't work was because you didn't have a parent height for the percentage to be base upon. It's a typical mistake people do, I think mostly because the width of an (block) element is by default 100% (expressed as auto), so it works most of the time. However the height is a different beast. It's always 0, so you're setting 100% of nothing When setting the height of an element you have to put a value other than 0 to its parents tags.

Example: https://gist.github.com/hefler/f6d6c6ad87d2b7702d5122fb274c9f81