Unable to override base stylesheet...

3 posts, 0 answers
  1. Allen Smothers
    Allen Smothers avatar
    40 posts
    Member since:
    Nov 2006

    Posted 15 Jul 2010 Link to this post

    Hello,

    I'm having a problem with padding for one of my RadComboBoxes.  I have a custom skin that is embedded in a .dll.  I have 3 RadComboBoxes in total.  Two don't have an ItemTemplate these are functioning correctly.  The one that does use an ItemTemplate is having a problem with the bottom border (see attachment).  It seems that the problem is created when I set the background color of the ComboBox in my PreRender event.  The problem only occurs in Firefox 3.6.* browsers.  IE (all versions), Chrome and Safari have no problem rendering the ComboBox correctly. 

    We're using RadControls for ASP.NET AJAX Q3 2009 SP1

    My cboProblemCombo_PreRender event (below).

    protected void cboProblemCombo_PreRender(object sender, EventArgs evt)
    {
       cboProblemCombo.BackColor = System.Color.Blue;          
    }


    Using Firebug I was able to find the css that was causing the problem (below).

    .RadComboBox .rcbInputCell .rcbInput {
    background:none repeat scroll 0 0 transparent;
    border:0 none;
    outline:0 none;
    padding:2px 0 1px;
    vertical-align:middle;
    width:100%;
    }

    After adjusting the padding directly in Firebug by setting the padding: 0 the ComboBox rendered correctly with the bottom border showing up.  I've attempted to modify the custom skin css to correct the padding but it gets overridden by the above class.  In Firebug, I can see where my custom css is being scratched/crossed out.

    I've attempted using the EnableEmbeddedBaseStylesheet="false" property on the ComboBox as well as attempting to override the base (default) stylesheet.

    Any ideas?

    Attached are snapshots of the problem and the desired look.

    Thanks for the Help,
    Allen
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2010 Link to this post

    Hello Allen,

    You need to add !important keyword in order to override the default styles for RadControl. Have you tried this?
    For example:
     

    .RadComboBox .rcbInputCell .rcbInput 
    {
      border:1px solid blue !important;
        . . .
    }

    Also the following documentation will be of help.
    Tutorial: Change the appearance of the Input element

    Thanks,
    Princy.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Allen Smothers
    Allen Smothers avatar
    40 posts
    Member since:
    Nov 2006

    Posted 16 Jul 2010 Link to this post

    It worked like a charm!

    Thanks Princy!

    -Allen
Back to Top