remove padding

[Bort]

I am trying to style the Header, Footer and Items in the dropdown list. I have created a custom style sheet which works fine for most things but I can't seem to able to control the padding in these sections. I don't see any padding syles defined in the style sheet I based my custom style from (Vista). I am able to style through code but I rather do it through the style sheet. This is what I am doing now:

Me.RadComboBox.Header.Style.Add("padding", "3px")
Me.RadComboBox.Footer.Style.Add("padding", "3px")

and in the RadComboBox_ItemsRequested():

Dim objItem As New RadComboBoxItem()
objItem.Style.Add("padding", "0px")
objItem.Style.Add("padding-left", "2px")
objItem.Style.Add("padding-bottom", "1px")

Why does this no work in my custom CSS:

.RadComboBoxDropDown_Vista .rcbHeader,
.RadComboBoxDropDown_Vista .rcbFooter
{
     background-color: #f1f2f4;
     background-position: 0 -110px;
     padding: 3px;      /*added this*/   
}

The other issue that I haven't found a solution for even through code is to eliminate the spacing that is automaticaly added between elements placed in the Head and Footer. Even after removing the padding and margins in these sections there are still spaces of about 4px placed between them.

[Kate]

Hi Bort,

You can not apply your customized style because you need to increase the css class specificity, for example:

div.RadComboBoxDropDown_Vista .rcbHeader,
div.RadComboBoxDropDown_Vista .rcbFooter
{
     background-color: #f1f2f4;
     background-position: 0 -110px;
     padding: 3px;      /*added this*/
}

You can take a look at the following help article: CSS Skin File Selectors. It can help you locate the other element that you need to remove the padding/margin from.

Best wishes,
Kate
the Telerik team

[Bort]

I understand CSS specificity but where is the style definition that trumps ".RadComboBoxDropDown_Vista .rcbHeader" that would require me to add an element type? I thought class definition wins over element type.

[Bort]

I want to change the padding of the dropdown items and hovered items:

.RadComboBoxDropDown_Vista .rcbItem em
{
     background: #e5e5e5;
    padding: 0 0 1px 2px;
}

.RadComboBoxDropDown_Vista .rcbHovered
{
    background: #3399FF;
    color: white;
    padding: 0 0 1px 2px;
}

I tried adding the "div" and "li" in front of  ".RadComboBoxDropDown_Vista" and still doesn't take.

[Kate]

Hello Bort,

Try using the following code to set the padding of the RadComboBox items:

div.RadComboBoxDropDown .rcbItem,
 div.RadComboBoxDropDown .rcbHovered,
 div.RadComboBoxDropDown .rcbDisabled,
 div.RadComboBoxDropDown .rcbLoading {

    padding: 0 0 1px 2px; !important
}

If it does not help I will need a live url to help you solve the problem that you encounter.

Best wishes,
Kate
the Telerik team

[Bort]

This worked:

div.RadComboBoxDropDown_Vista .rcbItem,
div.RadComboBoxDropDown_Vista .rcbHovered,
div.RadComboBoxDropDown_Vista .rcbDisabled {  
    padding: 0 0 1px 2px;
}

Some notes:

"!important" is ignored by IE so it can not be relied on

I found out that the reason this did not work by modifying the existing definition was because of the "em" at the end:

div.RadComboBoxDropDown_Vista .rcbItem em {
     background: #e5e5e5;    
     padding: 0 0 1px 2px;
}

However removing the "em" has other side effects on background color application. So the better solution was to define the padding separately as shown on top.