I have a custom info window over a google map, sometimes these info windows contain an image. When they do, the info window scales down over the marker it is positioned over as soon as the image has finished loading.
So the images take longer to load and the div's position has already been calculated by the time the image is finished loading.
I do believe there is a way of checking if an image has finished loaded, but that seems a long route - is there not a simple way with JS or CSS to get the div to scale upwards instead of down.
Anyone have any clues?
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
scale() The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
Use absolute positioning and instead of setting the offset with top
use bottom
. With this property you can ensure the position of the bottom edge of your div - any change in size will force the div to expand upwards.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With