jQWidgets Forums

This topic contains 3 replies, has 3 voices, and was last updated by Peter Stoev 10 years, 5 months ago.

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

Author

Selection of items in DropDownButton Posts

June 6, 2013 at 3:10 pm Selection of items in DropDownButton #22717

Participant

I have made a few changes to the dropdownbutton.htm file in the demo project (see markup below).
The items in the list have a fixed height of 30px, and at the bottom of the dropdown list I have a fixed element which of course cannot be selected. Currently when I select or hover over a li element only the text is highligted. I would like the entire “row” (i.e. the width of the dropdown list and the height of 30px) to be highlighted when I hover over or select one of the items in the list.
How can this be accomplished?

Thanks in advance

Bests
Peter

<!DOCTYPE html>
<html lang="en">
    <head>
        <title id='Description'>With the jqxDropDownButton, you can display any type of content
            in a popup. </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.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 () {
                // Create jqxTooltip
                var theme = getDemoTheme();
                $("#dropDownButton").jqxDropDownButton({ width: 150, height: 40, theme: theme });
                $('#jqxTree').on('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxTree').jqxTree('getItem', args.element);
                    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 10px;">' + item.label + '</div>';
                    $("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
                });
                $("#jqxTree").jqxTree({ width: 200, theme: theme });
                $("#checkbox").jqxCheckBox({ theme: theme });
                $("#checkbox").on('change', function (event) {
                    $("#dropDownButton").jqxDropDownButton({ autoOpen: event.args.checked });
                });
            });
        </script>
    </head>
    <style>
        li.DropDownItem {
            height: 30px;
        }
    </style>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;' id="dropDownButton">
            <div style="border: none;" id='jqxTree'>
                <ul>
                    <li class="DropDownItem" item-selected='true'>Home</li>
                    <li class="DropDownItem">Solutions</li>
                    <li class="DropDownItem">
                        <a target="_blank" href="http://www.jqwidgets.com">Products</a>
                    </li>
                </ul>
                <div style="background-color: lightblue; width: 100%; margin: 0 auto; line-height: 40px; padding-left: 4px; height: 40px">Peter Sloth</div>
            </div>
        </div>
        <div style='float: left; margin-top: 5px; margin-left: 30px;'>
            <div id='checkbox'>Open on mouse over</div>
        </div>
    </div>
</body>
</html>

June 7, 2013 at 6:36 am Selection of items in DropDownButton #22755

Peter Stoev

Keymaster

Hi,

Full row selection is not possible using jqxTree.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

December 24, 2014 at 3:47 pm Selection of items in DropDownButton #64672

asterinex

Participant

Hello Peter,

I have a problem regarding jqxDropDownButton and jqxTree.
Everything is working fine, but I have no scrollbar.
Wenn I push the button a jqxTree is displayed underneath, but without a scrollbar.
I cannot select items outside the screen.
Is it possible to add a scrollbar in the jqxTree ?

thx,
Gert

December 24, 2014 at 5:34 pm Selection of items in DropDownButton #64678

Peter Stoev

Keymaster

Hi Gert,

Set the “height” property of jqxTree and if its content overflows, it will display scrollbar.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.