Mobile Browsers Causing Menu to Close, Controls in Template Inaccessible

3 posts, 0 answers
  1. Nick
    Nick avatar
    2 posts
    Member since:
    Jul 2015

    Posted 16 Jul 2015 Link to this post

    Hi, I'm working with a radmenu that has only one root item. The behavior I want is for a user to be able to click on the menu item, get a dropdown with login controls, and use those to log into the site I'm working on. I already set ClickToOpen="true", and I'm using a ContentTemplate for the textboxes, button, and so forth. I've tested my setup in Chrome, IE, and Safari on desktop browsers, and it works exactly the way I want. The problem occurs on mobile browsers (tested on Safari and Chrome for iOS 8, and Chrome for Android). When I go to my site on a smartphone, for example, and tap on a textbox to start entering login credentials, the whole menu closes. When I tested in Chrome on iOS 8, I noticed that the onscreen keys would pop up for a split second, and then go away along with the menu. This makes it impossible to use the login controls on a mobile device.

    The client I'm working with insists that the site be mobile-friendly, so I need to figure this out, and would like to be able to use the radmenu control, though I'm open to other options that will achieve the functionality I need.

    Here's my markup for the controls (sorry the formatting isn't great):

    01.<div class="login-box">
    02.   <telerik:RadMenu ID="rm1" runat="server" CssClass="RadMenu" ClickToOpen="true"  OnClientItemOpened="ExternalitemOpened" RenderMode="Classic">
    03.      <Items>
    04.         <telerik:RadMenuItem runat="server" PostBack="false">
    05.            <ContentTemplate>
    06.               <div id="loginDropDown">
    07.                  <h2>Log In </h2>
    08.                  <span class="failureNotification">
    09.                     <asp:Literal ID="FailureText" runat="server"></asp:Literal>
    10.                  </span>
    11.                  <asp:ValidationSummary ID="vdsumLogin" runat="server"   CssClass="failureNotification" ValidationGroup="vdgrpLogin" />
    12.                  <div>
    13.                     <fieldset>
    14.                        <legend>Account Information</legend>
    15.                        <p>
    16.                           <asp:Label ID="lblUsername" runat="server" AssociatedControlID="txtUserN">Username:</asp:Label>
    17.                           <asp:TextBox ID="txtUserN" runat="server" CssClass="textEntry"></asp:TextBox>
    18.                           <asp:RequiredFieldValidator ID="rfvUserName" runat="server" ControlToValidate="txtUserN" CssClass="failureNotification" ErrorMessage="Please enter a username" ToolTip="Required field" ValidationGroup="vdgrpLogin">* Required</asp:RequiredFieldValidator>
    19.                        </p>
    20.                        <p>
    21.                           <asp:Label ID="lblPassword" runat="server" AssociatedControlID="txtPassword">Password:</asp:Label
    22.                           <asp:TextBox ID="txtPassword" runat="server" CssClass="passwordEntry" TextMode="Password"></asp:TextBox>
    23.                           <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword" CssClass="failureNotification" ErrorMessage="Please enter a password" ToolTip="Required field" ValidationGroup="vdgrpLogin">* Required</asp:RequiredFieldValidator>
    24.                        </p>
    25.                      </fieldset>
    26.                      <p class="submitButton">
    27.                         <asp:Button ID="btnLogin" runat="server" CommandName="Login" Text="Log In" ValidationGroup="vdgrpLogin" CssClass="normalButton" OnClick="btnLogin_Click" />
    28.                      </p>
    29.                   </div>
    30.                   <a href="../Register">register</a><br />
    31.                   <a href="../Account/ForgotPassword.aspx">forgot password?</a><br />
    32.                   <a href="../Account/RetrieveUsername.aspx">forgot username?</a>
    33.                </div>
    34.             </ContentTemplate>
    35.          </telerik:RadMenuItem>
    36.       </Items>
    37.    </telerik:RadMenu>
    38.</div>

    Here's the script I'm using:

    function ExternalitemOpened(s, e) {
        if ($telerik.isIE8) {
            // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
            $telerik.$("li", e.get_item().get_element())
                .each(function () { this.style.cssText = this.style.cssText; });
        }
    }

     

    I'm also setting the text of the root item from code-behind. It tells the user they can click the menu to login or logout, depending on context. If they're currently logged in, then clicking the menu will fire an event handler that will log them out. Selections from that code:

    rm1.Items(0).Text = "(logout)"
    AddHandler rm1.ItemClick, AddressOf rm1_ItemClick1
     
    rm1.Items(0).Text = "(committee login)"
     
    Protected Sub rm1_ItemClick1(sender As Object, e As Telerik.Web.UI.RadMenuEventArgs)
       Response.Redirect("~/Account/Logout.aspx")
    End Sub
     

    Also, the CSS from the markup:

    .login-box{
       width:1024px;
       height:50px;
       margin:0 auto;
       margin-top:8px;
       margin-bottom: 8px;
       padding:0;
       background-color:#E6E6E6;
       text-align:left;
    }
    .login-box h1{
       font-size:1em;
       font-weight:normal;
       letter-spacing:1px;
       margin:0px 0px 0px 20px;
       text-align:left;
       padding-top:15px;
        display:inline-block;
    }
    .login-box a:hover{
        color:#4AB97B;
    }
    .RadMenu .rmRootGroup{
        border:none !important;
    }
    .RadMenu .rmText{
        background-color:#E6E6E6 !important;
        font-size:1em !important;
        font-weight:normal !important;
        letter-spacing:1px !important;
        margin:0px 0px 0px 20px !important;
        text-align:left !important;
        padding-top:12px !important;
    }
    .RadMenu .rmText:hover{
        color:#4AB97B !important;
    }
    .RadMenu a.rmSelected{
        background-color:#E6E6E6 !important;
    }
    .RadMenu .rmLink{
        padding:0 0 0 0px !important;
    }
    .RadMenu .rmPopup.rmContentTemplate{
        background-color:#E6E6E6 !important;
    }
    .RadMenu_Default .rmFirst a.rmLink, .RadMenu_Default .rmFirst a.rmLink:hover, .RadMenu_Default .rmLast .rmText,
    .RadMenu_Default .rmLast a.rmLink:hover .rmText, .RadMenu_Default .rmVertical a.rmLink, .RadMenu_Default .rmVertical .rmText{
        background-color:#E6E6E6 !important;
        font-size:medium !important;
    }
    .failureNotification
    {
        font-size: 1.2em;
        color: Red;
    }
    input.passwordEntry
    {
        border: 1px solid #ccc;
    }
    .submitButton
    {
        text-align: right;
        padding-right: 10px;
    }
    .normalButton
    {
        color: #FFFFFF;
        border-radius: 30px;
        background-color: #579767;
        border: 2px solid #000000;
        width: 150px;
        height: 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: large;
    }
    .normalButton:disabled
    {
        color: #686868;
        border-radius: 30px;
        background-color: #969696;
        border: 2px solid #D1D1D1;
        width: 150px;
        height: 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-style: italic;
        font-size: large;
    }
     

    And the mobile CSS (where applicable):

    @media only screen and (max-width: 768px) {
     
    .login-box{
       width:100%;
       height:50px;
       margin:0 auto;
       margin-top:8px;
       margin-bottom: 8px;
       padding:0;
       background-color:#E6E6E6;
       text-align:left;
    }
    .login-box h1{
       font-size:1em;
       font-weight:normal;
       letter-spacing:1px;
       margin:0px 0px 0px 10px;
       text-align:left;
       padding-top:15px;
    }
     
    .normalButton
    {
       color: #FFFFFF;
       border-radius: 30px;
       background-color: #579767;
       border: 2px solid #000000;
       width: 150px;
       height: 30px;
       font-family: Arial, Helvetica, sans-serif;
       font-size:medium;
    }
    .normalButton:disabled
    {
       color: #686868;
       border-radius: 30px;
       background-color: #969696;
       border: 2px solid #D1D1D1;
       width: 150px;
       height: 30px;
       font-family: Arial, Helvetica, sans-serif;
       font-style: italic;
       font-size:medium;
    }
     
    }
     

    I have spent several hours playing with the markup and searching online for other instances of this issue, with no fix. I looked into using RenderMode="auto" or RenderMode="mobile", but neither worked the way I needed. I am using version 2015.2.623.40 of the web controls.

    Please help me get this working on mobile browsers.

  2. Nick
    Nick avatar
    2 posts
    Member since:
    Jul 2015

    Posted 16 Jul 2015 Link to this post

    Okay, it looks like I jumped the gun on posting. I think mentally parsing through the problem as I typed my post helped me see the issue. I went back and used an ItemTemplate instead of a ContentTemplate. The only added complication was that I had to get the values from my textboxes differently from codebehind. I figured out how to do that here. Really, the whole help document there helped me out. Thanks for that, Telerik Team!

     In case somebody else ever runs into this issue, here's my updated markup:

    01.<div class="login-box">
    02.   <telerik:RadMenu ID="rm1" runat="server" CssClass="RadMenu" ClickToOpen="true" OnClientItemOpened="ExternalitemOpened" RenderMode="Classic">
    03.      <Items>
    04.         <telerik:RadMenuItem runat="server" Text="test">
    05.            <ItemTemplate>
    06.               <div id="loginDropDown">
    07.                  <h2>Log In </h2>
    08.                  <span class="failureNotification">
    09.                     <asp:Literal ID="FailureText" runat="server"></asp:Literal>
    10.                  </span>
    11.                  <asp:ValidationSummary ID="vdsumLogin" runat="server" CssClass="failureNotification"ValidationGroup="vdgrpLogin" />
    12.                  <div>
    13.                     <fieldset>
    14.                        <legend>Account Information</legend>
    15.                        <p>
    16.                           <asp:Label ID="lblUsername" runat="server" AssociatedControlID="txtUserN">Username:</asp:Label>
    17.                           <asp:TextBox ID="txtUserN" runat="server" CssClass="textEntry"></asp:TextBox>
    18.                           <asp:RequiredFieldValidator ID="rfvUserName" runat="server" ControlToValidate="txtUserN" CssClass="failureNotification"ErrorMessage="Please enter a username" ToolTip="Required field" ValidationGroup="vdgrpLogin">* Required</asp:RequiredFieldValidator>
    19.                        </p>
    20.                        <p>
    21.                           <asp:Label ID="lblPassword" runat="server" AssociatedControlID="txtPassword">Password:</asp:Label
    22.                           <asp:TextBox ID="txtPassword" runat="server" CssClass="passwordEntry" TextMode="Password"></asp:TextBox>
    23.                           <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword" CssClass="failureNotification" ErrorMessage="Please enter a password" ToolTip="Required field" ValidationGroup="vdgrpLogin">* Required</asp:RequiredFieldValidator>
    24.                        </p>
    25.                     </fieldset>
    26.                     <p class="submitButton">
    27.                        <asp:Button ID="btnLogin" runat="server" CommandName="Login" Text="Log In"ValidationGroup="vdgrpLogin" CssClass="normalButton" OnClick="btnLogin_Click" />
    28.                     </p>
    29.                  </div>
    30.                  <a href="../Register">register</a><br />
    31.                  <a href="../Account/ForgotPassword.aspx">forgot password?</a><br />
    32.                  <a href="../Account/RetrieveUsername.aspx">forgot username?</a>
    33.               </div>
    34.            </ItemTemplate>
    35.         </telerik:RadMenuItem>
    36.      </Items>
    37.   </telerik:RadMenuItem>
    38.   </Items>
    39.</telerik:RadMenu

     

    To recap, the main thing I did to fix my problem was switch to the other type of template.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 20 Jul 2015 Link to this post

    Hi Nick,

    The issue described is a known one. It has been fixed on our side and the fix is scheduled to go live with the Q2 2015 SP1 release. Thank you for sharing your workaround with the community.

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