ListBox CSS for Width/Height

[Brian Mains]

Hello,


I'd like to use CSS to standardize the width and height of  the ListBox.  Using the standard CSS class doesn't seem to get the job done; we've been having to establish an explicit width and height.  Is there a workaround to getting the CSS to set width/height?


Thanks.

[Shinu]

Hello Brain,

Give a try with the following CSS.
CSS:

.RadListBox_Default
       {
           height: 600px !important;
           width: 600px !important;
       }

Thanks,
Shinu.

[Brian Mains]

Hello,

OK, let's say I want to create 3 styles, one for a small listbox, one for a medium one, and one for a large one.

So can I assume that I can use a combination of the .RadListBox_Default and the CssClass property on the RadListBox to get this done?

Thanks.

[Shinu]

Hello Brain,

You can easily achieve this by defining CSS class for each LIstBox like below.
CSS:

.Large      // CSS for large ListBox
        {
           height: 600px !important;
            width: 600px !important;
        }
.Medium    // CSS for medium ListBox
        {
            height: 300px !important;
            width: 300px !important;
        }
 .Small       // CSS for small ListBox
        {
            height: 100px !important;
            width: 100px !important;
        }

aspx:

<telerik:RadListBox ID="RadListBox1" CssClass="Large" runat="server" >
 . . . . . . . . .
</telerik:RadListBox>
<telerik:RadListBox ID="RadListBox1" CssClass="Medium" runat="server" >
 . . . . . . . . .
</telerik:RadListBox>
<telerik:RadListBox ID="RadListBox1" CssClass="Small" runat="server" >
 . . . . . . . . .
</telerik:RadListBox>

Thanks,
Shinu.

[Brian Mains]

Hello,

I have this:

<tel:RadListBox runat="server" CssClass="Small">
<Items>
<tel:RadListBoxItem Text="First" />
</Items>
</tel:RadListBox>

The CSS is in this page (verified with FireFox).  It renders this:

<div class="RadListBox RadListBox_Office2007 Small" id="ctl00_ctl00_PagePlaceholder_Body_ctl00">
<div class="rlbGroup rlbGroupRight">
<ul class="rlbList">
<li class="rlbItem" id="ctl00_ctl00_PagePlaceholder_Body_ctl00_i0"><span class="rlbText">First</span></li>
</ul>
</div><input type="hidden" name="ctl00_ctl00_PagePlaceholder_Body_ctl00_ClientState" id="ctl00_ctl00_PagePlaceholder_Body_ctl00_ClientState" autocomplete="off" value="{&quot;logEntries&quot;:[],&quot;selectedIndices&quot;:[],&quot;checkedIndices&quot;:[],&quot;scrollPosition&quot;:0}">
</div>

And it does not work as expected....

Any other ideas why?

Thanks.

[Kate]

Hello Brian Mains,

Try to use the following styles and apply them to the different RadListBoxes as follows:

<style type="text/css">
        div.small, .small > .rlbGroup, .small .rlbList
        {
            height: 100px;
            width: 100px;
        }

        div.large, .large > .rlbGroup, .large .rlbList
        {
            height: 600px;
            width: 600px;
        }
        div.medium, .medium > .rlbGroup, .medium .rlbList
        {
            height: 300px;
            width: 300px;
        }
    </style>

<telerik:RadListBox ID="RadListBox1" runat="server" CssClass="small"> ...    </telerik:RadListBox>
<telerik:RadListBox ID="RadListBox2" runat="server" CssClass="medium"> ...  </telerik:RadListBox>
<telerik:RadListBox ID="RadListBox3" runat="server" CssClass="large">...  </telerik:RadListBox>

All the best,
Kate
the Telerik team

[Matthew Graybosch]

Hello. I work with Brian Mains, and he asked me to test the CSS that Kate had suggested. When I use the following CSS, I get the results shown in this screenshot. The listbox no longer automatically provides a vertical scroll bar when there are more elements than the listbox can display within the specified dimensions, and using "overflow: auto;" or "overflow: scroll;" results in the creation of both vertical and horizontal scroll bars.

div.SmallListBox, .SmallListBox > .rlbGroup, .SmallListBox .rlbList
{
    height: 150px !important;
    max-height: 150px !important;
    width: 200px !important;
}

div.NormalListBox, .NormalListBox > .rlbGroup, .NormalListBox .rlbList
{
    height: 200px !important;
    max-height: 200px !important;
    width: 300px !important;
    overflow: auto;
}

div.LargeListBox, .LargeListBox > .rlbGroup, .LargeListBox .rlbList
{
    height: 300px !important;
    max-height: 300px !important;
    width: 400px !important;
    overflow: scroll;
}

[Kate]

Hi Matthew Graybosch,

I am glad my last answer could help in a way. Let me know if you need any further assistance.

Kind regards,
Kate
the Telerik team