Using RadComboBox In Responsive Menu

2 posts, 0 answers
  1. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 10 Jan 2013 Link to this post

    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
  2. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 10 Jan 2013 Link to this post

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