jQuery UI Widgets Forums Navigation Menu, Context Menu Long menu items within a specified width

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Long menu items within a specified width #7470

    petite_moi
    Member

    I am sorry I am re-posting this. The original posting was posting it strangely.

    If I set the menu width to be 1024px, but I have many menu items. Is there a way to have all the menu items be shown? The long menu name will be wrapped.

          $jquery("#jqxMenu").jqxMenu({ width: '1024px', height: '30px', theme: theme });
    <div style='height: 30px'>
    <div style='margin-left: 0'>
    Home
    Assessment and Authorization
    Schedule and Classes
    Commentaries
    Configuration Management
    Software Management
    Hardware Management
    System Maintenance
    Monitoring Management
    Logout
    </div>
    </div>
    • This topic was modified 11 years, 9 months ago by  Peter Stoev. Reason: Code Formatting
    Long menu items within a specified width #7499

    Peter Stoev
    Keymaster

    Hi petite_moi,

    Setting the ‘width’ to ‘1024px’ is not enough space for these items to be displayed n one row so they will be wrapped to 2. The wrapped items will not be visible because the ‘height’ is set to ’30px’.

    Here’s a sample code which demonstrates how to display all of the items on 1 row. The long items will be wrapped.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxMenu").jqxMenu({ width: '1024px', height: '48px'});
    });
    </script>
    <div id='jqxMenu'>
    <ul>
    <li style="padding-top: 12px; padding-bottom: 12px;"><a>Home</a></li>
    <li style="width: 120px;">Assessment and Authorization
    </li>
    <li style="width: 90px;">Schedule and Classes
    </li>
    <li style="padding-top: 12px; padding-bottom: 12px;">Commentaries
    </li>
    <li style="width: 80px;">Configuration Management
    </li>
    <li style="width: 85px;">Software Management</li>
    <li style="width: 85px;">Hardware Management</li>
    <li style="width: 85px;">System Maintenance</li>
    <li style="width: 85px;">Monitoring Management</li>
    <li style="padding-top: 12px; padding-bottom: 12px;">Logout</li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    Hope this helps you.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.