This is a migrated thread and some comments may be shown as answers.

remove padding

5 Answers 99 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Bort
Top achievements
Rank 1
Bort asked on 10 Mar 2011, 10:24 PM
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.

5 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 12 Mar 2011, 12:35 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Bort
Top achievements
Rank 1
answered on 14 Mar 2011, 06:58 PM
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.
0
Bort
Top achievements
Rank 1
answered on 16 Mar 2011, 10:39 AM

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.

0
Kate
Telerik team
answered on 16 Mar 2011, 01:07 PM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Bort
Top achievements
Rank 1
answered on 16 Mar 2011, 07:46 PM
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.
Tags
ComboBox
Asked by
Bort
Top achievements
Rank 1
Answers by
Kate
Telerik team
Bort
Top achievements
Rank 1
Share this question
or