Develop Reference

Google Maps Javascript API - Legend Max Height

I'm displaying a map using Google Maps Javascript API and have created a custom legend to toggle certain map paths/markers on and off. The data in the legend is loaded by PHP using entries in a database, so I don't have control over how many checkboxes will be present. At the moment, the legend div expands as required to accommodate however many checkboxes are required, but I'm looking to stop it from expanding beyond the confines of the map.
At the moment, my legend displays as below:
And when I move the bottom of the browser up to reduce the screen height, it draws the div beyond the bottom of the screen:
Does anyone know of a way to tell the div not to expand vertically beyond the edge of the map? I could obviously set a max-height value based on the height of the map, minus the top position of the legend div, but I'm looking for something a little more native, possibly along the lines of map.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('mapLegend')); but for setting the bottom most value? That way, the map can adjust as required even on mobile or small screens (like in the second screenshot where the Google logo displays over the legend).
I know this is a very open ended question but I would appreciate any help or pointers anyone can give.
Thanks in advance.

I ended up using the CSS calc function to manually set the max height of the legend depending on the size of the screen.
.mapLegend {
height: auto;
max-height: calc(100vh - 175px); /* Top bar, plus height of Google logo at bottom, plus absolute top position of Legend div, plus buffer */
}
#media (max-height: 269px) {
.mapLegend {
height: auto;
max-height: calc(100vh - 120px); /* When screen <270px tall, some Google Maps controls are hidden, so legend moves up, so can expand further down the bottom */
}
}
By setting the height to auto, it will only be as big as it needs to be to accommodate as many checkboxes as are necessary, and the max-height stops the overflow from extending beyond the bottom of the screen. Note that on small screens (or when a tall screen is dragged up to reduce it's height), the Google Maps UI changes to hide some non-essential controls, so I added the screen height breakpoint to cater for this.
Hope this helps someone.

Creating a nesting layout with a fixed column that's scroll able

I'll try my best to explain this as clearly as I can. I'm also using the Bulma CSS framework if it matters. So the layout I'm trying to create is this.
I created a working version that can be seen in action here
However, in the working example the vh/px of the scrollable box is fixed to a certain amount and I'm using tiles from the Bulma CSS framework. I tried using columns and the same outcome occurred. If I was to not make it a fixed amount, it'll just extend past the screen, but I want it to fit the entire screen regardless of the size and the only scrollable part should be the green box I've showed above. Also, the box may not even have enough content to become scrollable in some cases, and in that case I would still like it to fill up the rest of the height with the box even if it's going to be empty.
As you can see here, if the height isn't explicitly set, it'll keep going past the screen, but if it's properly set it will work as intended. I'm wondering how I can make this height fill the space properly no matter how it's resized and etc.
Any help would be appreciated!

It sounds like you should set the height property on the wrapper of the content and set the overflow: scroll; Then all of the contents will be the height you set and have scrollable content.

Stretch content div to fill screen when content is less than whole page | Enjin

I'm working on an enjin site for a friend and cannot for the life of me understand how to make the page here stretch to fill the whole screen vertically if the content does not have enough in it to do it on it's own. I've tried scripts and CSS of a dozen or more solutions and cannot understand how to make it do this because it's not my code, its Enjin's, and I have to work around it.
There are 2 pages in question, one is a standard format page so anything done to it can be done to all pages except the custom one and there will be no problems, and the other is a custom coded page using their HTML module. The key is the same solution is necessary for both but they have different code.
Custom Page: X |
Standard Page: X
Simply put I'm asking for a solution here. I tried the flex solution, height 100% with block display, javascript to find the distance between the bottom of the bottom div and the bottom of the monitor and adjust height accordingly, and more. Nothing seems to work. Any help is very gratefully appreciated.
I can provide any more details necessary, just ask.

What you are trying to accomplish is 2 things. First you want to make the div #memberContainer always be at least as tall as the users screen minus the height of your footer.
This can be acomplished with css using the "vh" unit. The vh unit is defined like this:
Relative to 1% of the height of the viewport*
And the calc function, as you will need to subtract 100vh (the screen height) from the height of your footer (180px).
So you need to add this code to your #memberContainer.
#memberContainer{min-height: calc(100vh - 180px)}
The second thing you need to do is make sure the background image of #memberBlock always covers the entire visible portion of the screen.
The image itself is 1920*1080, which is a standard 16:9 resolution. Assuming you only wanted to target 16:9 screens this would work fine. However to cover mobile phones and all other screens I would recommend you use:
#memberBlock{background-size:cover}
This makes sure the image will always cover the screen.

You can't have no gap and no content to fill it. There will have to be a gap somewhere.. Your gap is appearing in the middle because the footer is absolutely positioned. If you stop positioning your footer absolutely, the footer will cling to the body-wrap, however, you will still have a gap at the bottom, it just won't look as bad.
.myfooter {
display: none;
width: 100%;
position: relative;
background-color: RGB(20, 20, 20);
height: 180px;
bottom: 0;
}
If you really wanted to make it fit the screen, you could give a min-height with a calc of 100vh-FooterHeight

position: absolute;
height: 100%;
There may be other issues with this as i have no idea how mobile or responsive stuff would work for your site specifically but this is one way. You are coupling the BG div to the content div - that is why you are seeing that behavior - you need to make the BG a sibling div of content instead of a parent child relationship then you can have more flexibility on how it works - but for now my option seems to work

jQuery Masonry—Constrain to a Maximum Width on Window Resize Event?

I am using jQuery Masonry to display a grid of boxes (all the same size).
Here is my testing site.
Works great when the browser width is 1100px or below.
When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.
I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.
On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.
How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."
Thanks
UPDATE
Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.

Setting a max-width on the parent element of the masonry'ed container works for me. Is this not the result you're looking for?
#wrapper { max-width: 990px; }

Strange javascript scroll bar issue

I am using the jScrollPane to add scroll bars to pages that exceed a certain height.
I can't figure out why the following page gets scroll bars even though the content is not overflowing my boundary.
Can anyone help please?
http://souk.gumpshen.com/test/contact.htm

In style.css there is a class applied to the html tag
html{
overflow-y: scroll;
}
If I remove this style and zoom out then the scroll bars go away. I think it depends on the zoom level of the browser. If the user is set at a low resolution or zoomed in the contents do overflow.