Need help with a menu issue (read this one – disregard other one)

[ohioguy67Member]

This is a reposting of my previous topic with the same title so that it is clearer since I had a difficult time getting my sample html code to appear in the posting.

I am trying to create a main menu for my application. I want one of the menu options to br ing up a submenu that has checkboxes next to the items. I need to keep the submenu options in the javascript section so I’ve made the submenu a jqxlistbox object. The problem I’m having is that when the submenu is displayed, its size seems to be fixed and I can’t find a way to change it (so any long entries in the jqxlistbox are cut off). Here’s the code so far. The brackets have been removed from the html commands so that it will display here and the indentation I have has been lost. But you should get the idea.

!DOCTYPE html
html lang=”en”
head
title Test title
link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” /
script type=”text/javascript” src=”jquery-1.9.1.min.js” script
script type=”text/javascript” src=”jqwidgets/jqxcore.js” script
script type=”text/javascript” src=”jqwidgets/jqxdata.js” script
script type=”text/javascript” src=”jqwidgets/jqxbuttons.js” script
script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js” script
script type=”text/javascript” src=”jqwidgets/jqxlistbox.js” script
script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js” script
script type=”text/javascript” src=”jqwidgets/jqxmenu.js” script
script type=”text/javascript” src=”jqwidgets/jqxpanel.js” script
script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js” script

script type=”text/javascript”
$(document).ready(function () {
var theme = ‘base’;
$(“#jqxMenu”).jqxMenu({ width: ‘200’, height: ’30px’, theme: theme });

$(‘#jqxMenu’).on(‘itemclick’, function (event)
{
// get the clicked LI element.
var element = event.args;
alert(element.id);
});

var listSource = [{ label: ‘Field 1’, value: ‘name’, checked: false }, { label: ‘Field 123456789012345’, value: ‘type’, checked: true }
];
$(“#jqxlistbox”).jqxListBox({ source: listSource, width: 200, height: 100, theme: theme, checkboxes: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
alert(event.args.value);
});
});
script
head

body
div id=’jqxMenu’
ul
li Home li
li Settings
ul
li id=’opt1′ Option 1 li
li id=’opt2′ Option 2 li
li List
ul
li style=’margin:0px; padding:0px’ div id=’jqxlistbox’ div li
ul
li
ul
li
ul
div

body
html

Can anyone tell me what I’m doing wrong?

[DimitarParticipant]

Hello ohioguy67,

The width issue comes from putting the listbox inside the menu. As a workaround you may set the width CSS property of the submenu to a larger value, i.e.:

<ul style="width: 250px;">
    <li style='margin: 0px; padding: 0px'>
        <div id='jqxlistbox'>
        </div>
    </li>
</ul>

On a side note, to properly display HTML code, please format it by using the { } button from the toolbar.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts