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

Using RadComboBox In Responsive Menu

1 Answer 145 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Lynn
Top achievements
Rank 2
Lynn asked on 10 Jan 2013, 01:35 PM
I have a .aspx/web form that uses the Rad Decorator.  I am using one of the Responsive frameworks on the page and have constructed a menu using ul/li that will morph into a combo box when the page width decreases past a certain point.  This is all working fine.

I would like to use the RadComboBox for the mobile-sized menu container but I cannot seem to control visibility of the RadComboBox during page size changes using the normal method of doing so from media queries -- see below.

nav select {
    display: none;
}
nav RadComboBox { display: none; }
 
@media (max-width: 800px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
  nav RadComboBox { display: inline-block; }
}

When I try to use the styles, they appear to have no effect whatsoever on the RadComboBox.  I have tried telling the Rad Decorator to ignore SELECT controls to no avail.

Is there a way through the CSS that I can control the visibility of the RadComboBox when the RadDecorator is being used?

Thanks in advance!

Lynn

1 Answer, 1 is accepted

Sort by
0
Lynn
Top achievements
Rank 2
answered on 11 Jan 2013, 04:21 AM
I apologize for submitting this issue early this morning and then resolving it on my own tonight.  But the resolution to this issue is really quite simple.

First, I defined the RadComboBox with a CssClass -- even though it is being handled by a Rad Decorator.

<nav>
        <telerik:RadComboBox ID="RadComboBox1"
            CssClass="combomenu" runat="server"
            Enabled="true" Visible="true"
            Width="90%" AutoPostBack="true"
            OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
        >
        </telerik:RadComboBox>
</nav>
Then I added the following style information:

<style type="text/css">
    .combomenu { }
    nav .combomenu { display: none; }
 
    @media (max-width: 800px) {
      nav ul     { display: none; }
      nav .combomenu { display: inline-block; }
    }
</style>

The initially empty class works as a type of place holder for the style information as the screen is resized..  So when the screen is wider than 800 pixels, the combo box disappears (and the more standard menus work just fine).  When the screen is resized for a tablet or smart phone, then the standard menus disappear and the RadComboBox becomes visible (and has already been loaded with properly indented menu picks.

Using this same technique, one could also use the RadMenus in the reverse manner so that you can use Telerik controls for responsive desktop and mobile menus on the same page/site.

Lynn
Tags
ComboBox
Asked by
Lynn
Top achievements
Rank 2
Answers by
Lynn
Top achievements
Rank 2
Share this question
or