Question

I have a menu control in my web application, and I cannot get the menu items to word wrap. Here is what I have:

<asp:Menu ID="PageNav"
                            runat="server" 
                            DataSourceID="PageMapDS" 
                            Orientation="Vertical" 
                            MaximumDynamicDisplayLevels="0" ItemWrap="true"
                            OnMenuItemDataBound="ToolNav_MenuItemDataBound">
                            <StaticMenuItemStyle 
                                BackColor="#7795bd"            
                                BorderColor="#6d8bb2"
                                BorderStyle="Solid"
                                BorderWidth="1px"
                                Height="25px"
                                width="102px" ForeColor="#000" HorizontalPadding="10px"/>
                            <StaticHoverStyle BackColor="#5d7b9d" ForeColor="#FFFFFF" />
                            </asp:Menu>

If I put in an item with more text than the width of the boxes, it overflows out into the rest of the page, it does not word wrap within the constraints of the box.

Answer 1

To add to Mario’s answer above, instead of using these inline styles on the control consider setting IncludeStyleBlock="False" along with CssClass="myCustomClass" and styling it correctly.

You can then control the wrapping using CSS:

(off the top of my head I don’t know what HTML the menu outputs so i’ll assume it’s just anchors)

    .myCustomClass 
    // assuming this class is added to each anchor <a class="myCustomClass...
    {
      display:block;
      float:left;
      width:102px;
    }