Long menu items within a specified width - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

Long menu items within a specified width Posts

September 5, 2012 at 8:30 pm Long menu items within a specified width #7470

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>

September 7, 2012 at 6:27 am 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

Author

Posts

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

You must be logged in to reply to this topic.