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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Problem with jqxDropDownButton #5999

    binfch
    Participant

    Hi there

    I have a sample code below that does not work properly (when loading the page the panel content is shown overlapped). Am I doing something wrong?

    <!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" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <style type="text/css">
    #monthYearDropDown {
    float: left;
    margin-right: 15px;
    }
    #monthListBox {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    }
    #yearListBox {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    }
    #monthYearButton {
    clear: both;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.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/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = 'classic';
    var theDate = new Date();
    $("#monthYearDropDown").jqxDropDownButton({
    theme: theme,
    width: 140,
    height: 30
    });
    $("#monthYearPanel").jqxPanel({
    theme: theme,
    width: 195,
    height: 348
    });
    var months = [{month: 1, text: 'January'},
    {month: 2, text: 'February'},
    {month: 3, text: 'March'},
    {month: 4, text: 'April'},
    {month: 5, text: 'May'},
    {month: 6, text: 'June'},
    {month: 7, text: 'July'},
    {month: 8, text: 'August'},
    {month: 9, text: 'September'},
    {month: 10, text: 'October'},
    {month: 11, text: 'November'},
    {month: 12, text: 'December'}];
    $("#monthListBox").jqxListBox({
    theme: theme,
    datatype: "json",
    source: months,
    displayMember: 'text',
    valueMember: 'month',
    width: '100px',
    height: '290px'
    });
    $("#monthListBox").jqxListBox('selectIndex', theDate.getMonth());
    var years = [];
    for (i=0; i<5; i++) {
    years.push({year: theDate.getFullYear() -i, text: theDate.getFullYear() -i});
    }
    $("#yearListBox").jqxListBox({
    theme: theme,
    datatype: "json",
    source: years,
    displayMember: 'text',
    valueMember: 'year',
    width: '60px',
    height: '290px'
    });
    $("#yearListBox").jqxListBox('selectIndex', 0);
    $('#monthYearButton').jqxButton({
    theme: theme,
    width: '80px',
    height: '25px',
    disabled: false
    });
    var itemMonth = $('#monthListBox').jqxListBox('getSelectedItem');
    var itemYear = $('#yearListBox').jqxListBox('getSelectedItem');
    var dropDownContent = '<div style="position: relative; margin-left: 7px; margin-top: 7px;">' + itemMonth.label + ' ' + itemYear.label + '</div>';
    $('#monthYearDropDown').jqxDropDownButton('setContent', dropDownContent);
    });
    </script>
    <div id="monthYearDropDown">
    <div id='monthYearPanel'>
    <div id='monthListBox'></div>
    <div id='yearListBox'></div>
    <input type="button" value="Select" id="monthYearButton" />
    </div>
    </div>
    </div>
    </body>
    </html>

    Thanks & cheers,
    Peter

    • This topic was modified 8 years, 2 months ago by  binfch.
    • This topic was modified 8 years, 2 months ago by  binfch.
    • This topic was modified 8 years, 2 months ago by  binfch.
    Problem with jqxDropDownButton #6029

    Peter Stoev
    Keymaster

    Thanks for the feedback! The issue was reproduced and will be resolved in the upcoming update this week.

    Best Regards,
    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.