override embedded skin

[Bort Bort]

Followed the directions in adding a custom skin (EnableEmbeddedSkins="false", directory structure, rename, etc.)
Got the skin to work with base Vista css. Now when I try to modify the "rcbItem" class in my custom CSS it won't take. I am trying to change the padding. I set the padding to 0 but when I inspect the CSS resources loaded with DebugBar I still see the Telerik DLL generating this WebResource.axd and it seems to override my custom style.

/* Rule N°50 from /WebResource.axd?d=E8zhOF-IazAtz5qciqUY9gMwF1Nx6baK0ZAdEkqrjJx-o8HuvngvfAVyz4OcUqi8l9oITMy5IuIHW8RO7_Y93A2&t=633957930320000000 */
.RadComboBoxDropDown .rcbItem {
    PADDING-BOTTOM:2px;  
    MARGIN:0px 1px; 
    PADDING-LEFT:6px;   
    PADDING-RIGHT:6px;   
    PADDING-TOP:2px 
}

 
How can I get rid of these emdedded CSS links. Need the padding-top-bottom to be 0.

[Simon]

Hi Bort Bort,

This WebResource.axd link is emitted because of the base style sheet that RadComboBox uses. You can disable it by setting the EnableEmbeddedBaseStylesheet property to false.

All the best,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Lonnie]

I tried to follow this but for some reason it isn't working for me... 

I am using 2010 Q1 and I am not using skins (yet) but I have disabled the EnableEmbeddedSkins and EnableEmbeddedBaseStylesheets, but it is still generating the embedded rcbItem style attached to the combobox.  Here is a copy of the code:

<telerik:RadComboBox ID="CareerInterests" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" runat="server" EmptyMessage="Career Interest"
  ToolTip="Career Interest" HighlightTemplatedItems="true" AllowCustomText="true"
  Width="24%" OnClientDropDownClosed="onDropDownClosing" OnClientTextChange="onDropDownClosing"
  DataValueField="career_id" DataTextField="label" DropDownCssClass="JobSearchDDLB" CssClass="JobSearchDDLB"
  DropDownWidth="250px" DataSourceID="CareerInterestsObjectDataSource">
  <ItemTemplate>
    <div onclick="StopPropagation(event)" class="JobSearchDDLB">
      <asp:CheckBox runat="server" ID="JobSearchCIChk" onclick="onCheckBoxClick(this)"
        CssClass="JobSearchDDLB" Text='<%#Eval("label")%>' />
    </div>
  </ItemTemplate>
</telerik:RadComboBox>

Thanks!

Lonnie

[Kamen Bundev]

Hi Lonnie,

When the embedded skins and base stylesheet are disabled, the CSS classes used for styling are still rendered - this is not a bug but rather intended behavior in order to support external skins.

Sincerely yours,
Kamen Bundev
the Telerik team

[Lonnie]

If this is by design, how do I get rid of the unnecessary padding for my application? 

Even though I specified EnableEmbeddedBaseStylesheet =false, (which according to Simon in this thread, "This WebResource.axd link is emitted because of the base style sheet that RadComboBox uses. You can disable it by setting the EnableEmbeddedBaseStylesheet property to false."), and I specified the CSS class as:

.JobSearchDDLB
{
    width: 200px;
    padding: 0 important!;
    line-height: 6px;
    font-size:10px;
}

and the RadComboBox as:

<telerik:RadComboBox ID="CareerInterests" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" runat="server" EmptyMessage="Career Interest"
  ToolTip="Career Interest" HighlightTemplatedItems="true" AllowCustomText="true"
  Width="24%" OnClientDropDownClosed="onDropDownClosing" OnClientTextChange="onDropDownClosing"
  DataValueField="career_id" DataTextField="label" DropDownCssClass="JobSearchDDLB" CssClass="JobSearchDDLB"
  DropDownWidth="250px" DataSourceID="CareerInterestsObjectDataSource">
  <ItemTemplate>
    <div onclick="StopPropagation(event)" class="JobSearchDDLB">
      <asp:CheckBox runat="server" ID="JobSearchCIChk" onclick="onCheckBoxClick(this)"
        CssClass="JobSearchDDLB" Text='<%#Eval("label")%>' />
    </div>
  </ItemTemplate>
</telerik:RadComboBox>

and I am still getting the following generated:  (Notice the top line:  this is where the 2px top and 2px bottom padding is that I want to remove...)

<li class="rcbItem  rcbTemplate">
        <div onclick="StopPropagation(event)" class="JobSearchDDLB">
          <span class="JobSearchDDLB"><input id="ctl00_JobSearchToolbar1_CareerInterests_i0_JobSearchCIChk" type="checkbox" name="ctl00$JobSearchToolbar1$CareerInterests$i0$JobSearchCIChk" onclick="onCheckBoxClick(this);" /><label for="ctl00_JobSearchToolbar1_CareerInterests_i0_JobSearchCIChk">Accounting/Financial</label></span>
        </div>
      </li>

.RadComboBoxDropDown .rcbltern                  Telerik.Web.UI.WebResource.axd
      padding-bottom : 2px
      margin : 0px 1px
      padding-left : 6px
      padding-right : 6px
      padding-top : 2px
HTML > BODY .RadComboBoxDropDown .rcbltem
      min-height : 13px

Although I told it not to use the embedded styles, and provided my own, it is still using the embedded styles...  How do I get rid of the 2px top and 2px bottom padding that Simon replied to Bort Bort in this thread?

Thanks!

Lonnie

[Kamen Bundev]

Hello Lonnie,

This may happen if you have more RadComboBoxes on the page but with still enabled base stylesheets - they will trigger the stylesheet download then. Same goes for any control that includes RadComboBox inside itself - like RadGrid with a pager for instance. You can however override the paddings with higher specificity or by specifying !important, though your rule seems wrong, it should be:
.JobSearchDDLB
{
    width: 200px;
    padding: 0 !important;
    line-height: 6px !important;
    font-size: 10px !important;
}

If you want to override all of them. However this rule won't be applied on the .rcbItem/.rcbTemplate itself and its padding will remain. To fix this, modify your rule accordingly:
.JobSearchDDLB,
.JobSearchDDLB .rcbTemplate
{
    width: 200px;
    padding: 0 !important;
    line-height: 6px !important;
    font-size: 10px !important;
}

All the best,
Kamen Bundev
the Telerik team