Separator Line Height

10 posts, 0 answers
  1. snissim
    snissim avatar
    12 posts
    Member since:
    Dec 2006

    Posted 01 Oct 2008 Link to this post

    Hi,

    Is it possible to set the line height for rows that are marked as separators?
    Separator rows have the same height as other rows, but I would like to reduce them if possible.

    I have tried altering the css file by adding a height to rcbseparator - but this had no effect.  The combobox is being used for both Template and Non-Template dropdowns.

    Thanks
    Shimon
  3. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 01 Oct 2008 Link to this post

    Hello snissim,

    Please try this:

    .rcbSeparator
    {
    height:4px !important;
    line-height:4px !important;
    }

    Regards,
    Albert
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. snissim
    snissim avatar
    12 posts
    Member since:
    Dec 2006

    Posted 01 Oct 2008 Link to this post

    Albert,

    Thanks for the quick response, but unfortunately the line height still remains the same.

    .RadComboBoxDropDown_WebBlue .rcbSeparator  
    {  
        color: #222;  
        background: #F4F4F4;  
        height:4px !important;  
        line-height:4px !important;  
    } 

    I changed the background colour as a test and this was picked up OK - just not any height changes.

    Thanks
    Shimon
  7. Yana
    Admin
    Yana avatar
    5013 posts

    Posted 02 Oct 2008 Link to this post

    Hello Shimon,

    Please try the following css styles and tell us how it goes:

    <style type="text/css">  
        .RadComboBoxDropDown_WebBlue .rcbSeparator     
        {        
            background-color: red !important;    
            padding: 0 !important;  
            height:4px !important;     
            line-height:4px !important;     
            font-size: 0px !important;  
        }    
    </style> 

    Kind regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8.
  9. snissim
    snissim avatar
    12 posts
    Member since:
    Dec 2006

    Posted 02 Oct 2008 Link to this post

    Yana,

    Many thanks.  That worked brilliantly.

    We had just found a workaround:  height/line-height were being ignored only when the item had no text e.g. a separator line, so we just added text to the item and set the font colour to match the background colour and removed all padding.

    Your solution is a lot more elegant and is now implemented.

    Thanks again
    Shimon
  11. Yana
    Admin
    Yana avatar
    5013 posts

    Posted 02 Oct 2008 Link to this post

    Hello Shimon,

    I am glad I could help.

    All the best,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  13. Albert Shenker
    Albert Shenker avatar
    588 posts
    Member since:
    Mar 2004

    Posted 18 Oct 2011 Link to this post

    This solution appears to only work in firefox (I use version 7)... and not in IE8. I have the following style declaration:

    .rcbSeparator
            {
                background: black !important;
                height:1px !important;
                min-height: 1px !important;
                padding:0px !important;
                margin:0px !important;            
            }

    I have attached what the result looks like in firefox 7 (ff.jpg) and IE8 (ie8.jpg)
  14.
  15. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Oct 2011 Link to this post

    Hello Albert,

    To set the height of an item that is a separator in IE7 you could use the following css class selector:
    * + html div.RadComboBoxDropDown .rcbSeparator     {     height:  1px; }

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  17. Albert Shenker
    Albert Shenker avatar
    588 posts
    Member since:
    Mar 2004

    Posted 24 Oct 2011 Link to this post

    I tried adding the class selector.. still no help in my scenario in ie8. I took a look at a stripped out example and it seemd to be fine in ie8 even without your added class selector. Any idea why the .rcbSeparator Selector wouldn't work in my case in IE8? I would think the !important declarations would make sure the style is not being overridden anywhere else.
  19. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 28 Oct 2011 Link to this post

    Hello Albert,

    Indeed, using !important means that the style gets the highest specificity and not other could overwrite it. The code snippet that I previously sent you should work in IE7. However, you can try to use the following css class to achieve the desired appearance. I also attached a runnable page that demonstrated how they work.
    <style type="text/css">
            /*Works in IE7  */
            * + html div.RadComboBoxDropDown li.rcbSeparator
            {
                height: 1px !important;
                min-height: 1px !important;
            }
             
            /*Works for  IE8    */
            html div.RadComboBoxDropDown li.rcbSeparator
            {
                min-height: 1px !important;
            }
        </style>
     

    Best wishes,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top