Separator Line Height

[snissim]

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

[Atanas Korchev]

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.

[snissim]

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

[Yana]

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.

[snissim]

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

[Yana]

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.

[Albert Shenker]

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)

[Kate]

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

[Albert Shenker]

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.

[Kate]

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