fill height of div with records?

Hi rez,

Interesting question.

I don't have a specific answer for you but I came across this that might give you some ideas.

http://bytes.com/topic/html-css/answers/857822-match-height-greater-column

Good luck, I look forward to seeing the solution.

Best,

Jerry Kornbluth

Thanks for the related links.

Yeah, I can already get columns to match in height. As you understand, it's filling the sidebar with a certain number of records (ul of links in this case) depending on it's height that's my challenge. I didn't want a scroll bar either.

The sidebar in this case is a list of links. The main content is a number of post boxes like a blog. I don't think height can be directly detected but maybe the number of records or line height calculation based on the number of main content posts could be figured out. Unfortunately, the main content boxes height expand and change.

Maybe the answer is a JS / AJAX widget but I dont see anything. Or an iFrame situation?

I was hoping I was over complicating things and interactivetools has a magical block of CMSB code.

Hi,

If you want to set the height of a <div> based on the number of records you have, you could try something like this. You can use CSS to set the height a an <li> tag, so that you know how tall a single link would be.

Next, when you are selecting your records, you get 2 variables, Records and MetaData. Example:

list($linkRecords,$linkMetaData)=getRecords(array(
'tableName'='links',
));

You can use the MetaData variable to tell you exactly how many records have been returned. In this example, $linkMetaData['totalRecords'];

You can then figure out exactly how tall your <div> would need to be (number_of_records * height_of_one_link). Could look something like this:
<?php $sideBarHeight=$linkMetaData['totalRecords'] * 20;

Where 20 is the height of one <li> (20px). This could be whatever you set it to.

Finally, you can set the height of the div like this:
<div id="sideBar' style="height:<?php echo $sideBarHeight; ?>px;">
</div>

Hope this helps get you started.

Nice. Yes, this will come in handy for me in other ways as well.

I didn't realize you could put the code in the CSS like that... man that can change everything. So that has to go on the page and not in the style sheet then? Powerful, but could get messy if it's more on many pages. i'd have to put css like that on every page in the header? Is that what an include is for and what you would use or do you make the style sheet a css.php file?

Question. Now I can control the div height of the sidebar and build it with the number of links. Ok, but what if i the sidebar height is already based on the main content height? I dont know the main content height, it's dynamic because it also contains CMSB records with various heights. So I need to fill the sidebar with an amount of links but dont know it's length.

lol, am I clear? I'ts easy to confuse myself. [blush]

Just had to say...

Jason, you're amazing!!!

Jerry Kornbluth

Hi,

Yes, you can put CSS inline in a tag. So the code I was showing you has to go directly on the page, not in an external CSS file. However, this doesn't mean that ALL of your CSS has to go on the page. You can have some in an external file, some in the head tag, some in the tags,..you can place this anywhere you want. It's a matter of precedence.
If you have a CSS style in a tag, in the head (embedded), and in an external all manipulating the same element, the inline style is used instead of the other two.

So you have two <div>'s looking something like this:
<div id="main">
<div id="sideBar">
</div>
</div>

Is that right?
How is the height of the sideBar dependent on the height of the main div? How are you defining the height of the main div?

Interestingly, for the sidebar, if you don't define any type of height at all (even in external css files) it should default it's height automatically to the height of the content that's put inside it.

I hope this helps some. Try playing around with your CSS settings a bit and let me know if you run into any issues.