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

Unable to override base stylesheet...

2 Answers 58 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Allen Smothers
Top achievements
Rank 2
Allen Smothers asked on 15 Jul 2010, 04:23 PM
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 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 16 Jul 2010, 08:34 AM

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.

0
Allen Smothers
Top achievements
Rank 2
answered on 16 Jul 2010, 03:36 PM
It worked like a charm!

Thanks Princy!

-Allen
Tags
ComboBox
Asked by
Allen Smothers
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Allen Smothers
Top achievements
Rank 2
Share this question
or