remove padding

6 posts, 0 answers
  1. Bort
    Bort avatar
    10 posts
    Member since:
    Nov 2006

    Posted 10 Mar 2011 Link to this post

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

    Posted 12 Mar 2011 Link to this post

    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!
  3. Bort
    Bort avatar
    10 posts
    Member since:
    Nov 2006

    Posted 14 Mar 2011 Link to this post

    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.
  4. Bort
    Bort avatar
    10 posts
    Member since:
    Nov 2006

    Posted 16 Mar 2011 Link to this post

    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.

  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Mar 2011 Link to this post

    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!
  6. Bort
    Bort avatar
    10 posts
    Member since:
    Nov 2006

    Posted 16 Mar 2011 Link to this post

    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.
Back to Top