Web Developer Tip of the Day
The website that I've been working on for the last 2 months frequently uses a CSS technique for even column heights that uses padding, negative margins, and overflow:hidden on container elements. (http://www.ejeliot.com/blog/61
) I also frequently assign overflow:auto to container elements so that they will more intelligently stretch as needed when the container element includes floated content.
This technique has been working great, until I started running into problems combining it with "Chosen", the fantastic drop-down replacement from Harvest. (http://harvesthq.github.com/chosen/
The problem comes when Chosen creates a relatively positioned div tag which contains the options for the drop-down. If the Chosen drop-down is near the bottom of the container element it triggers scroll bars.
One trick that I figured out which solves this problem involves setting the height of the container element to the scrollable
height of the itself. Which can be done like so:
document.getElementById('MyContainer').style.height = document.getElementById('MyContainer').scrollHeight;
This can be done with jQuery like so:
$('#MyContainer').height( $('#MyContainer').get(0).scrollHeight );
This is a useful trick if you ever find yourself needing to know the height that a scrollable element has become (likely through dynamic changes to the DOM,) and is something that both .innerHeight() and .height() in jQuery won't tell you.
I hope that helps someone out there. Have a great Friday!