locked
Asp.net menu with bootstrap probelm : menuItem not covered text! RRS feed

  • Question

  • User-79977429 posted

    Hi, I'm using this code to implement bootstrap features in my asp.net menu :

    <div class="collapse navbar-collapse" id="navbarNavDropdown" dir="rtl">
                    <asp:Menu ID="mnuMain" runat="server" Orientation="horizontal" IncludeStyleBlock="true" DataSourceID="SiteMapDataSource"
                        StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false"
                        StaticPopOutImageUrl="~/Images/arrow-bottom.png" DynamicPopOutImageUrl="~/Images/arrow-bottom.png"
                        CssClass="navbar-nav" StaticSelectedStyle-CssClass="nav-item"
                        StaticMenuStyle-CssClass="nav-item"  
                        DynamicMenuStyle-CssClass="nav-item dropdown-menu text-right" 
                        RenderingMode="List" role="menu" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
                        <LevelMenuItemStyles>
                            <asp:MenuItemStyle CssClass="dropdown-item" HorizontalPadding="15px" Height="50px" VerticalPadding="15px" />
                        </LevelMenuItemStyles>
                        <LevelSelectedStyles>
                            <asp:MenuItemStyle CssClass="nav-item active" Font-Underline="false" />
                        </LevelSelectedStyles>
                        <StaticHoverStyle Font-Underline="false" />
                        <StaticSelectedStyle Font-Bold="true" />
                        <DynamicMenuItemStyle CssClass="dropdown-item" />                    
                    </asp:Menu>
                    <asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" ShowStartingNode="false" />
                </div>

    This code works, but for menuItems which contains  more textLength, could not cover all text!

    where is the problem and how to solve it?

    Thanks in advance

    Thursday, March 12, 2020 7:27 AM

All replies

  • User-79977429 posted

    I found the problem!

    if i remove dir tag (dir="rtl") from parent div, it works correctly. but i want to implement menu in rtl mode!

    can anybody help me ?

    Thursday, March 12, 2020 7:52 AM
  • User-1330468790 posted

    Hi, hamed_1983,

    Just keep the rtl mode. The next step you should do is to modify the CSS style for the Menu control.

    The menu will be automatically assigned with a CSS style by framework while you can use !important to force the CSS style to be applied.

    There are two solutions that you can choose one from them.

    1.Let the long text to be wrapped so that it won't overflow.

    2.Set the <ul> css style property "width" to be "fit-content".

     

    More details, you can refer to below code:

    HTML markup:

    <div>
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#<%= mnuMain.ClientID %>' aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
    
                    <div class="collapse navbar-collapse" id="navbarNavDropdown" dir="rtl">
                        <asp:Menu ID="mnuMain" runat="server" Orientation="horizontal" IncludeStyleBlock="true" DataSourceID="SiteMapDataSource"
                            StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false"
                            StaticPopOutImageUrl="~/Images/arrow-bottom.png" DynamicPopOutImageUrl="~/Images/arrow-bottom.png"
                            CssClass="navbar-nav" StaticSelectedStyle-CssClass="nav-item"
                            StaticMenuStyle-CssClass="nav-item"
                            DynamicMenuStyle-CssClass="nav-item dropdown-menu text-right"
                            RenderingMode="List" role="menu" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
                            <LevelMenuItemStyles>
                                <asp:MenuItemStyle CssClass="dropdown-item" HorizontalPadding="15px" Height="50px" VerticalPadding="15px" />
                            </LevelMenuItemStyles>
                            <LevelSelectedStyles>
                                <asp:MenuItemStyle CssClass="nav-item active" Font-Underline="false" />
                            </LevelSelectedStyles>
                            <StaticHoverStyle Font-Underline="false" />
                            <StaticSelectedStyle Font-Bold="true" />
                            <DynamicMenuItemStyle CssClass="dropdown-item" />
                        </asp:Menu>
                        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
                    </div>
                    <asp:SiteMapDataSource ID="SiteMapDataSource" runat="server" ShowStartingNode="false" />
    
                </nav>
            </div>

    SiteMap:

    <?xml version="1.0" encoding="utf-8" ?>
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
      <siteMapNode url="Home.aspx" title="Home" description="Home Page" >
        <siteMapNode url="Services.aspx" title="Services" description="Services Page">
          <siteMapNode url ="Consulting.aspx" title="ConsultingLONGLONGLONGLONGLONGLONGLONGLONGLENGTH" description="Consulting Page"></siteMapNode>
          <siteMapNode url ="Outsourcing.aspx" title="OutsourcingTestLONGLONGLONGLONGLONGLONGLONGLONGLENGTH" description="Outsourcing Page"></siteMapNode>
        </siteMapNode>
        <siteMapNode url="About.aspx" title="About" description="About Us Page" />
        <siteMapNode url="Contact.aspx" title="Contact" description="Contact Us Page" />
     </siteMapNode>
    </siteMap>

    Style Sheet:

    1.wrapped the long text

    #mnuMain a {
                white-space: normal !important;
                word-break: break-word;
            } 
    

    Result:

    2. fit-content:

    #mnuMain ul 
    {
    	width: fit-content !important;       
    }

    Result:

    If you have problem when merging the style sheet to your project, please feel free to post it.

    Best regards,

    Sean

    Friday, March 13, 2020 6:16 AM