Line Issue

4 posts, 0 answers
  1. Kenny
    Kenny avatar
    2 posts
    Member since:
    Dec 2015

    Posted 31 Dec 2015 Link to this post

    I'm running into a line after closing the mobile menu before it's clicked you can find the arrow in random places on the page. One image shows after the menu being opened the other is before the menu is clicked on. This only happens on mobile
  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 01 Jan Link to this post

    Hello,

    The issue is not reproducible on my side. In order to be able to assist you further, we would need some details about the respective scenario for replication. Could you provide a snippet which could be used for issue reproduction? In addition, could you specify the OS type and version of the mobile device as well as the browser used and its version?

    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. Kenny
    Kenny avatar
    2 posts
    Member since:
    Dec 2015

    Posted 04 Jan in reply to Dimitar Link to this post

    <div class="OneThirdMenu">
        <asp:HyperLink ID="TAGWBGLogo_Header_HyperLink" runat="server" NavigateUrl="~/Default.aspx">
            <asp:Image ID="TAGWBGLogo_Header_Image" runat="server" ImageUrl="~/images/GI-Logo.png" CssClass="NavLogo" />
        </asp:HyperLink>
    </div>
    <nav class="TwoThirdsMenu">
        <telerik:RadMenu ID="HeaderControl_RadMenu" runat="server" ShowToggleHandle="true" EnableTextHTMLEncoding="true" RenderMode="Mobile"
     
    CssClass="MobileMenu" DefaultGroupSettings-Flow="Horizontal">
            <Items>
     
                <telerik:RadMenuItem NavigateUrl="~/Default.aspx" Text="Business solutions"></telerik:RadMenuItem>
                <telerik:RadMenuItem NavigateUrl="~/landing/wbg/HistoricTriangle/Default.aspx" Text="Incentives and
     
    products"></telerik:RadMenuItem>
                <telerik:RadMenuItem NavigateUrl="../PopularThingsToDo/Default.aspx" Text="Contact us"></telerik:RadMenuItem>
                <telerik:RadMenuItem NavigateUrl="../Reviews.aspx" Text="About us"></telerik:RadMenuItem>
                <telerik:RadMenuItem NavigateUrl="../Reviews.aspx" Text="Career opportunities"></telerik:RadMenuItem>
                <telerik:RadMenuItem NavigateUrl="../Reviews.aspx" Text="Activate your certificate"></telerik:RadMenuItem>
     
            </Items>
        </telerik:RadMenu>
        <div class="DesktopMenu">
            <a onclick="return ewt.trackLink({name:'gi_topmenu_businesssolutions',type:'click',link:this  });" title="Business solutions">
                <asp:LinkButton ID="Business_Solutions_LinkButton" runat="server" PostBackUrl="~/Default.aspx">
                    <div class="OneSixthMenu">
                        BUSINESS<br /><span>solutions</span>
                    </div>
                </asp:LinkButton>
            </a>
            <a onclick="return ewt.trackLink({name:'gi_topmenu_incentivesandproducts',type:'click',link:this  });" title="Incentives and
     
    products">
                <asp:LinkButton ID="IncentivesAndProducts_LinkButton" runat="server"
     
    PostBackUrl="~/landing/wbg/HistoricTriangle/Default.aspx">
                    <div class="OneSixthMenu">
                        INCENTIVES<br /><span>and products</span>
                    </div>
                </asp:LinkButton>
            </a>
            <a onclick="return ewt.trackLink({name:'gi_topmenu_contactus',type:'click',link:this  });" title="Contact us">
                <asp:LinkButton ID="ContactUs_LinkButton" runat="server" PostBackUrl="~/landing/wbg/PopularThingsToDo/Default.aspx">
                    <div class="OneSixthMenu">
                        CONTACT<br /><span>us</span>
                    </div>
                </asp:LinkButton>
            </a>
            <a onclick="return ewt.trackLink({name:'gi_topmenu_aboutus',type:'click',link:this  });" title="About us">
                <asp:LinkButton ID="AboutUs_LinkButton" runat="server" PostBackUrl="~/landing/wbg/Reviews.aspx">
                    <div class="OneSixthMenu">
                        ABOUT <br /><span>us</span>
                    </div>
                </asp:LinkButton>
            </a>
            <a onclick="return ewt.trackLink({name:'gi_topmenu_careeropportunities',type:'click',link:this  });" title="Career
     
    opportunities">
                <asp:LinkButton ID="CareerOpportunities_LinkButton" runat="server" PostBackUrl="#">
                    <div class="OneSixthMenu">
                        CAREER <br /><span>opportunities</span>
                    </div>
                </asp:LinkButton>
            </a>
            <a onclick="return ewt.trackLink({name:'gi_topmenu_activateyourcertificate',type:'click',link:this  });" title="Activate your
     
    certificate">
                <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="#">
                    <div class="OneSixthMenu Green Last">
                        <span class="Green"> activate your </span><br /> CERTIFICATE <i class="fa fa-external-link"></i>
                    </div>
                </asp:LinkButton>
            </a>
        </div>
    </nav>
     
     
    CSS -
     
    .OneThirdMenu
    {
        width: 25%;
        float: left;
        text-align: left;
    }
     
    .TwoThirdsMenu
    {
        width: 75%;
        float: left;
        position: relative;
    }
     
    .MobileMenu
    {
        display: none !important;
    }
     
    @media only screen and (max-width: 1024px)
    {
        .ContentWrapper
        {
            width: 95%;
            margin: 0px auto;
        }
        .TwoThirds
        {
            width: 62%;
        }
        h1
        {
            font-size: 1.5625em !important; /* 25px */
        }
        h3
        {
            font-size: 1.125em !important; /* 18px */
        }
     
        .PageHeading
        {
            font-size: 2.5em !important; /* 40px */
        }
     
        .OneFourth
        {
            float: left;
            width: 40%;
            margin-right: 1%;
            text-align: center;
        }
        .GetawayBoxes
        {
            width: 26%;
            margin-right: 2%;
            min-height: 240px !important;
            max-height: 240px !important;
        }
        .MediaBoxes
        {
            width: 27%;
            min-height: 320px !important;
            max-height: 320px !important;
        }
     
        .MobileMenu
        {
            display: block !important;
            text-align: right !important;
            float: right;
            font-family: 'Source Sans Pro', sans-serif;
            margin: 5px;
        }
     
        .MobileMenu ul li
        {
            color: #000000 !important;
        }
        .MobileMenu ul li:hover
        {
            color: #f95d15 !important;
        }
         
        .DesktopMenu
        {
            display: none !important;
        }
        .OneSixthMenu
        {
            width: 80%;
            float: left;
        }
        .KeyPointsBoxes
        {
            min-height: 320px;
            max-height: 320px;
        }
        .HeaderVideo
        {
            width: 50%;
        }
     
    }
  5. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 07 Jan Link to this post

    Hi,

    The issue comes from the custom styles applied by the MobileMenu class directly on the mobile RadMenu. You change the display property in a way that makes the respective line and arrow elements visible. To test this, just remove the MobileMenu class from the RadMenu.

    The easiest way to show/hide the mobile menu depending on the screen size would be to wrap the mobile RadMenu in a div and toggle the display property for that div, instead.

    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