different sizing for radcombobox for mobile & desktop

4 posts, 0 answers
  1. Henry
    Henry avatar
    42 posts
    Member since:
    Apr 2012

    Posted 25 May 2015 Link to this post

    I have a radcombobox in my page (using Skin="WebBlue").

    The page has loaded with different css style based on if it is rendered on mobile or desktop(style.css & stylemobile.css)

    Now what I want to do is set different size property for the radcombobox: Height,Width and DropDownWidth etc. How do I overwrite it with css in different file? or is there any better solution?

    I used table in HeaderTemplate and ItemTemplate, is it possible to use different width for cells based on mobile/desktop?

    Thanks.

  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 28 May 2015 Link to this post

    Hi,

    For easier RadComboBox styles customization, I would recommend you to set the RenderMode property of all RadComboBoxes to Lightweight. You can change control's width and dropdown height with the following CSS selectors:

    <style type="text/css">
        html .RadComboBox {
            width: 500px !important;
        }
     
        html .RadComboBoxDropDown {
            height: 100px;                
        }
    </style>


    And as far as RadGrid customization for desktop and mobile browsers is concerned, I would suggest you to take a look at the RadGrid adaptive behavior. Browsing the demo on a mobile device would show you the RadGrid Mobile rendering, tailored for touchscreen mobile devices. For further reference, you may review the Adaptive RadGrid help articles and online demos.

    Regards,
    Dimitar
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henry
    Henry avatar
    42 posts
    Member since:
    Apr 2012

    Posted 29 May 2015 in reply to Dimitar Link to this post

    Thanks for the response. This works, however it applies to all radcombox, is it possible to specify different sizing for different combobox? 

     

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 02 Jun 2015 Link to this post

    Hi Henry,

    You can set a custom CSS class to a RadComboBox and its drop-down by the properties: 
    DropDownCssClass and CssClass
    <telerik:RadComboBox runat="server" CssClass="customClass" DropDownCssClass="customClass" />

    Then the selectors will be
    html .RadComboBox.customClass {
        width: 500px !important;
    }
      
    html .RadComboBoxDropDown.customClass {
        height: 100px;
    }

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

    Regards,
    Magdalena
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top