override embedded skin

6 posts, 0 answers
  1. Bort Bort
    Bort Bort avatar
    1 posts
    Member since:
    Apr 2010

    Posted 18 Apr 2010 Link to this post

    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.
  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 19 Apr 2010 Link to this post

    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.
  3. Lonnie
    Lonnie avatar
    2 posts
    Member since:
    Aug 2012

    Posted 25 Aug 2010 Link to this post

    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
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 26 Aug 2010 Link to this post

    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
  5. Lonnie
    Lonnie avatar
    2 posts
    Member since:
    Aug 2012

    Posted 26 Aug 2010 Link to this post

    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
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 27 Aug 2010 Link to this post

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