Custom CSS getting applied to all comboxes in the page.

7 posts, 1 answers
  1. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 11 Jun 2014 Link to this post

    Hi

    There are two radcomboboxes in the ASPX with MetroTouch skin and I want to add some different custom styles to the radcomboboxes as shown below.

    <telerik:RadComboBox ID="rcbModelName" runat="server" Skin="MetroTouch" Width="100%"
    EmptyMessage="Select Model" Height="120px">
    </telerik:RadComboBox>
    <telerik:RadComboBox ID="rcbColor" runat="server" Skin="MetroTouch" Width="100%"
    EmptyMessage="Select Color" Height="120px">
    </telerik:RadComboBox>
     
    .RadComboBox_MetroTouch .rcbInputCell
    {
          border: 1px solid Gray !important;
          background: #FFFFFF url("../Images/Icon1.png") no-repeat 3% 55% !important;
          text-indent: 12%;
    }

    When I apply the above style, its getting applied to all the radcomboboxes in the page with MetroTouch skin.

    So how can I apply the above CSS using the ID so that it will be applied to the corresponding radcombobox only and similarly I can provide some other custom styles to the other combobox as well.

    Thanks,
    Vishnu.
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 11 Jun 2014 Link to this post

    Hello Vishnu,

    You can use a selector #rcbModelName .rcbInputCell. So the rule will be
    #rcbModelName .rcbInputCell {
        border: 1px solid Gray !important;
        background: #FFFFFF url("../Images/Icon1.png") no-repeat 3% 55% !important;
        text-indent: 12%;
    }

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 11 Jun 2014 Link to this post

    Hello Vishnu,

    You can use a selector #rcbModelName .rcbInputCell. So the rule will be
    #rcbModelName .rcbInputCell {
        border: 1px solid Gray !important;
        background: #FFFFFF url("../Images/Icon1.png") no-repeat 3% 55% !important;
        text-indent: 12%;
    }

    Do not hesitate to contact us if you have other questions.


    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 11 Jun 2014 in reply to Magdalena Link to this post

    Hi Magdalena, Boyan,

    Thanks for your reply.

    The above CSS works for a radcombobox if it is inside a normal aspx page. But I am having a Master Page - Content Page setup and all those comboboxes are inside the content page where the above solution you provided didnt work.

    Please provide a solution for the controls in content page.

    Thanks,
    Vishnu.
     
  6. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 12 Jun 2014 in reply to Boyan Dimitrov Link to this post

    Hi Admin,

    Please provide a solution for the above mentioned scenario.

    Thanks.
  7. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 13 Jun 2014 Link to this post

    Hi Vishnu,

    The "ID" property in aspx is not applied as an "id" property to HTML by using master pages because of avoiding a possible conflict comes form duplicate id-s on one page. For that reason you can use the "CssClass" property. Please, find a sample project with master page in the attachment.

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Vishnu
    Vishnu avatar
    21 posts
    Member since:
    Jun 2014

    Posted 13 Jun 2014 in reply to Magdalena Link to this post

    Hi Magdalena,

    Thanks for the complete solution.

    Vishnu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017