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

override embedded skin

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

5 Answers, 1 is accepted

Sort by
0
Simon
Telerik team
answered on 19 Apr 2010, 09:43 AM
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.
0
Lonnie
Top achievements
Rank 1
answered on 26 Aug 2010, 12:05 AM
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
0
Kamen Bundev
Telerik team
answered on 26 Aug 2010, 09:00 AM
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
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
0
Lonnie
Top achievements
Rank 1
answered on 26 Aug 2010, 05:34 PM
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
0
Kamen Bundev
Telerik team
answered on 27 Aug 2010, 09:46 AM
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
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
Tags
ComboBox
Asked by
Bort Bort
Top achievements
Rank 1
Answers by
Simon
Telerik team
Lonnie
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or