ListBox CSS for Width/Height

8 posts, 0 answers
  1. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 16 Mar 2011 Link to this post

    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.
  2.
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Mar 2011 Link to this post

    Hello Brain,

    Give a try with the following CSS.
    CSS:
    .RadListBox_Default
           {
               height: 600px !important;
               width: 600px !important;
           }

    Thanks,
    Shinu.
  5. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 17 Mar 2011 Link to this post

    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.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Mar 2011 Link to this post

    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.
  8.
  9. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 18 Mar 2011 Link to this post

    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.
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Mar 2011 Link to this post

    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
    Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
  13. Matthew Graybosch
    Matthew Graybosch avatar
    2 posts
    Member since:
    Oct 2010

    Posted 21 Mar 2011 Link to this post

    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;
    }
  14.
  15. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Mar 2011 Link to this post

    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
    Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
Back to Top