View Full Version : Scrolling checkbox area.

10-14-2007, 04:25 AM
Hello folks.

I want to add a scrolling area on the posting body of my forum. Since this isn't really a phpbb support topic but more or less just a coding question in general i figured it would be alright to ask it here.

This may not be very hard. I've seen it before but cannot provide an example right now.

Right now the part that I want to scroll has checkboxes in it so I can't just add a standard textarea to make a little scrolling area.

Here is a screenshot of what I want to change:


This is the code from the posting_body.tpl file on my phpbb forum:

<!-- BEGIN attribution -->
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<td align="left" colspan="{aot.attribution.COLSPAN}"> <span class="gensmall12"><u><b>{aot.attribution.S_ATTRIBUTION_NAME}:</b></u></span><hr></td> <td><script type="text/javascript"><!--
google_ad_client = "pub-7811377366188768";
google_ad_width = 125;
google_ad_height = 125;
google_ad_format = "125x125_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "f4f7fd";
google_color_bg = "f4f7fd";
google_color_link = "072254";
google_color_text = "AECCEB";
google_color_url = "AECCEB";
google_ui_features = "rc:10";
<script type="text/javascript"
</script> </td>
<!-- BEGIN element -->
<td align="left" valign="top" width="65%" bgcolor="#f4f7fd">
<span class="gensmall">
<input type="checkbox" name="{aot.attribution.S_ATTRIBUTION_ORDER}_{aot.attribution.element.S_ELEMENT_ORDER}" value="on" {aot.attribution.element.S_CHECKED} />
<font color="#051657"><span class="gensmall11"> >> </span> {aot.attribution.element.S_ELEMENT_NAME} <span class="gensmall11"> << </SPAN></font>
</td> </tr>
<!-- END element -->

<!-- END attribution -->

So instead of it showing the full list of options plus more after i add them, i want a scrollbar there after 4-5 options, just to save the layout abit, I'd rather not have a long list just displaying like that.

Can anyone offer me any tips? It would be much appreciated. ;)

the game hog
10-14-2007, 06:29 AM
I'm not exactly sure how that works (the coding you provided) but if you want all the inputs to be in a scrollbar content area, you can try applying CSS to a div tag and then placing the inputs inside of it.


<div style="overflow: auto; height: 100px; width: 80%;">

<!--this is where you can stick your inputs and input labels, inside of this checkbox. when they reach over a height of 100px, the box will show a scrollbar. you can change the width and height to what you want-->


That is the proper way to apply a scrollbar to anything.

10-14-2007, 05:25 PM
That works of course, thank you.

I'm not exactly sure how that works

It's just one of those things. If I told you, I'd have to kill you.