different sizing for radcombobox for mobile & desktop

[Henry]

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.

[Dimitar]

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

[Henry]

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

 

[Magdalena]

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