jQWidgets Forums

jQuery UI Widgets › Forums › Editors › NumberInput › jqxnumberinput spinbuttons issue

Tagged: , , , , , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 10 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    jqxnumberinput spinbuttons issue Posts
  • October 31, 2014 at 3:04 pm jqxnumberinput spinbuttons issue #61972

    mohamedazher
    Participant

    Hi,

    There is an issue with the jqxnumberinput where the spinbuttons disappear occasionally on window resize. They pop in and out while the window resizes. This happens clearly when used with twitter bootstrap.

    This issue also persists with http://www.jqwidgets.com/jquery-widgets-demo/demos/twitter/bootstrap-grid-layout.htm?arctic when you change the input elements into number input setting width: ‘100%’,spinButtons: true,inputMode: ‘simple’ and try to resize the window.

    I could not put up a fiddle for this but you could just copy paste the below code, map the imports and run it. The code is not perfect but clearly shows the issue.

    <!DOCTYPE html>
    <html>
    <head>
    <title id=”Description”>Responsive Grid layout built with Bootstrap and jQWidgets</title>
    <!– Bootstrap core CSS –>
    <link href=”../bootstrap.min.css” rel=”stylesheet”>
    <!– <link href=”../../styles/bootstrap-theme.min.css” rel=”stylesheet” /> –>
    <!– jQWidgets CSS –>
    <link href=”jqwidgets/styles/jqx.base.css” rel=”stylesheet”>
    <link href=”jqwidgets/styles/jqx.bootstrap.css” rel=”stylesheet”>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <meta name=”description” content=””>
    <meta name=”author” content=””>
    <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
    <script src=”bootstrap/bootstrap.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxexpander.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxvalidator.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/globalization/globalize.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcalendar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdatetimeinput.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxmaskedinput.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxnumberinput.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxchart.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>

    <style type=”text/css”>
    body, html {
    height: 100%;
    padding: 0px;
    margin: 0px;
    width: 100%;
    border: none;
    overflow: hidden;
    }

    .required {
    vertical-align: baseline;
    color: red;
    font-size: 10px;
    }

    .control-label {
    white-space: nowrap;
    }
    .input1{

    }

    </style>
    </head>
    <body>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // set jQWidgets Theme to “Bootstrap”
    $.jqx.theme = “bootstrap”;

    // $(‘#sendButton’).jqxButton({ height: 25 });
    // create jqxInput widget.
    $(‘.input1’).jqxNumberInput({ height: 22, width: ‘100%’,spinButtons: true,inputMode: ‘simple’, });
    $(‘.input1’).css(‘margin-top’, ‘5px’);
    // create countries array for the Countries ComboBox.
    var countries = [
    { value: “AF”, label: “Afghanistan” },
    { value: “AL”, label: “Albania” },
    { value: “DZ”, label: “Algeria” },
    { value: “AS”, label: “American Samoa” },
    { value: “AD”, label: “Andorra” },
    { value: “AO”, label: “Angola” },
    { value: “AI”, label: “Anguilla” },
    { value: “AQ”, label: “Antarctica” },
    { value: “AG”, label: “Antigua and Barbuda” },
    { value: “AR”, label: “Argentina” },
    { value: “AM”, label: “Armenia” },
    { value: “AW”, label: “Aruba” },
    { value: “AU”, label: “Australia” },
    { value: “AT”, label: “Austria” },
    { value: “AZ”, label: “Azerbaijan” },
    { value: “BS”, label: “Bahamas” },
    { value: “BH”, label: “Bahrain” },
    { value: “BD”, label: “Bangladesh” },
    { value: “BB”, label: “Barbados” },
    { value: “BY”, label: “Belarus” },
    { value: “BE”, label: “Belgium” },
    { value: “BZ”, label: “Belize” },
    { value: “BJ”, label: “Benin” },
    { value: “BM”, label: “Bermuda” },
    { value: “BT”, label: “Bhutan” },
    { value: “BO”, label: “Bolivia” },
    { value: “BA”, label: “Bosnia and Herzegovina” },
    { value: “BW”, label: “Botswana” },
    { value: “BV”, label: “Bouvet Island” },
    { value: “BR”, label: “Brazil” },
    { value: “BN”, label: “Brunei” },
    { value: “BG”, label: “Bulgaria” },
    { value: “BF”, label: “Burkina Faso” },
    { value: “BI”, label: “Burundi” },
    { value: “KH”, label: “Cambodia” },
    { value: “CM”, label: “Cameroon” },
    { value: “CA”, label: “Canada” },
    { value: “CV”, label: “Cape Verde” },
    { value: “KY”, label: “Cayman Islands” },
    { value: “CF”, label: “Central African Republic” },
    { value: “TD”, label: “Chad” },
    { value: “CL”, label: “Chile” },
    { value: “CN”, label: “China” },
    { value: “CX”, label: “Christmas Island” },
    { value: “CC”, label: “Cocos (Keeling) Islands” },
    { value: “CO”, label: “Columbia” },
    { value: “KM”, label: “Comoros” },
    { value: “CG”, label: “Congo” },
    { value: “CK”, label: “Cook Islands” },
    { value: “CR”, label: “Costa Rica” },
    { value: “CI”, label: “Cote D’Ivorie” },
    { value: “HR”, label: “Croatia (Hrvatska)” },
    { value: “CU”, label: “Cuba” },
    { value: “CY”, label: “Cyprus” },
    { value: “CZ”, label: “Czech Republic” },
    { value: “DK”, label: “Denmark” },
    { value: “DJ”, label: “Djibouti” },
    { value: “DM”, label: “Dominica” },
    { value: “DO”, label: “Dominican Republic” },
    { value: “TP”, label: “East Timor” },
    { value: “EC”, label: “Ecuador” },
    { value: “EG”, label: “Egypt” },
    { value: “SV”, label: “El Salvador” },
    { value: “GQ”, label: “Equatorial Guinea” },
    { value: “ER”, label: “Eritrea” },
    { value: “EE”, label: “Estonia” },
    { value: “ET”, label: “Ethiopia” },
    { value: “FO”, label: “Faroe Islands” },
    { value: “FJ”, label: “Fiji” },
    { value: “FI”, label: “Finland” },
    { value: “FR”, label: “France” },
    { value: “GF”, label: “French Guinea” },
    { value: “PF”, label: “French Polynesia” },
    { value: “GA”, label: “Gabon” },
    { value: “GM”, label: “Gambia” },
    { value: “GE”, label: “Georgia” },
    { value: “DE”, label: “Germany” },
    { value: “GH”, label: “Ghana” },
    { value: “GI”, label: “Gibraltar” },
    { value: “GR”, label: “Greece” },
    { value: “GL”, label: “Greenland” },
    { value: “GD”, label: “Grenada” },
    { value: “GP”, label: “Guadeloupe” },
    { value: “GU”, label: “Guam” },
    { value: “GT”, label: “Guatemala” },
    { value: “GN”, label: “Guinea” },
    { value: “GW”, label: “Guinea-Bissau” },
    { value: “GY”, label: “Guyana” },
    { value: “HT”, label: “Haiti” },
    { value: “HN”, label: “Honduras” },
    { value: “HK”, label: “Hong Kong” },
    { value: “HU”, label: “Hungary” },
    { value: “IS”, label: “Iceland” },
    { value: “IN”, label: “India” },
    { value: “ID”, label: “Indonesia” },
    { value: “IR”, label: “Iran” },
    { value: “IQ”, label: “Iraq” },
    { value: “IE”, label: “Ireland” },
    { value: “IL”, label: “Israel” },
    { value: “IT”, label: “Italy” },
    { value: “JM”, label: “Jamaica” },
    { value: “JP”, label: “Japan” },
    { value: “JO”, label: “Jordan” },
    { value: “KZ”, label: “Kazakhstan” },
    { value: “KE”, label: “Kenya” },
    { value: “KI”, label: “Kiribati” },
    { value: “KW”, label: “Kuwait” },
    { value: “KG”, label: “Kyrgyzstan” },
    { value: “LA”, label: “Laos” },
    { value: “LV”, label: “Latvia” },
    { value: “LB”, label: “Lebanon” },
    { value: “LS”, label: “Lesotho” },
    { value: “LR”, label: “Liberia” },
    { value: “LY”, label: “Libya” },
    { value: “LI”, label: “Liechtenstein” },
    { value: “LT”, label: “Lithuania” },
    { value: “LU”, label: “Luxembourg” },
    { value: “MO”, label: “Macau” },
    { value: “MK”, label: “Macedonia” },
    { value: “MG”, label: “Madagascar” },
    { value: “MW”, label: “Malawi” },
    { value: “MY”, label: “Malaysia” },
    { value: “MV”, label: “Maldives” },
    { value: “ML”, label: “Mali” },
    { value: “MT”, label: “Malta” },
    { value: “MH”, label: “Marshall Islands” },
    { value: “MQ”, label: “Martinique” },
    { value: “MR”, label: “Mauritania” },
    { value: “MU”, label: “Mauritius” },
    { value: “YT”, label: “Mayotte” },
    { value: “MX”, label: “Mexico” },
    { value: “FM”, label: “Micronesia” },
    { value: “MD”, label: “Moldova” },
    { value: “MC”, label: “Monaco” },
    { value: “MN”, label: “Mongolia” },
    { value: “MS”, label: “Montserrat” },
    { value: “MA”, label: “Morocco” },
    { value: “MZ”, label: “Mozambique” },
    { value: “MM”, label: “Myanmar (Burma)” },
    { value: “NA”, label: “Namibia” },
    { value: “NR”, label: “Nauru” },
    { value: “NP”, label: “Nepal” },
    { value: “NL”, label: “Netherlands” },
    { value: “AN”, label: “Netherlands Antilles” },
    { value: “NC”, label: “New Caledonia” },
    { value: “NZ”, label: “New Zealand” },
    { value: “NI”, label: “Nicaragua” },
    { value: “NE”, label: “Niger” },
    { value: “NG”, label: “Nigeria” },
    { value: “NU”, label: “Niue” },
    { value: “NF”, label: “Norfolk Island” },
    { value: “KP”, label: “North Korea” },
    { value: “NO”, label: “Norway” },
    { value: “OM”, label: “Oman” },
    { value: “PK”, label: “Pakistan” },
    { value: “PW”, label: “Palau” },
    { value: “PA”, label: “Panama” },
    { value: “PG”, label: “Papua New Guinea” },
    { value: “PY”, label: “Paraguay” },
    { value: “PE”, label: “Peru” },
    { value: “PH”, label: “Philippines” },
    { value: “PN”, label: “Pitcairn” },
    { value: “PL”, label: “Poland” },
    { value: “PT”, label: “Portugal” },
    { value: “PR”, label: “Puerto Rico” },
    { value: “QA”, label: “Qatar” },
    { value: “RE”, label: “Reunion” },
    { value: “RO”, label: “Romania” },
    { value: “RU”, label: “Russia” },
    { value: “RW”, label: “Rwanda” },
    { value: “SH”, label: “Saint Helena” },
    { value: “KN”, label: “Saint Kitts and Nevis” },
    { value: “LC”, label: “Saint Lucia” },
    { value: “SM”, label: “San Marino” },
    { value: “SA”, label: “Saudi Arabia” },
    { value: “SN”, label: “Senegal” },
    { value: “SC”, label: “Seychelles” },
    { value: “SL”, label: “Sierra Leone” },
    { value: “SG”, label: “Singapore” },
    { value: “SK”, label: “Slovak Republic” },
    { value: “SI”, label: “Slovenia” },
    { value: “SB”, label: “Solomon Islands” },
    { value: “SO”, label: “Somalia” },
    { value: “ZA”, label: “South Africa” },
    { value: “GS”, label: “South Georgia” },
    { value: “KR”, label: “South Korea” },
    { value: “ES”, label: “Spain” },
    { value: “LK”, label: “Sri Lanka” },
    { value: “SD”, label: “Sudan” },
    { value: “SR”, label: “Suriname” },
    { value: “SZ”, label: “Swaziland” },
    { value: “SE”, label: “Sweden” },
    { value: “CH”, label: “Switzerland” },
    { value: “SY”, label: “Syria” },
    { value: “TW”, label: “Taiwan” },
    { value: “TJ”, label: “Tajikistan” },
    { value: “TZ”, label: “Tanzania” },
    { value: “TH”, label: “Thailand” },
    { value: “TG”, label: “Togo” },
    { value: “TK”, label: “Tokelau” },
    { value: “TO”, label: “Tonga” },
    { value: “TT”, label: “Trinidad and Tobago” },
    { value: “TN”, label: “Tunisia” },
    { value: “TR”, label: “Turkey” },
    { value: “TM”, label: “Turkmenistan” },
    { value: “TC”, label: “Turks and Caicos Islands” },
    { value: “TV”, label: “Tuvalu” },
    { value: “UG”, label: “Uganda” },
    { value: “UA”, label: “Ukraine” },
    { value: “AE”, label: “United Arab Emirates” },
    { value: “UK”, label: “United Kingdom” },
    { value: “US”, label: “United States” },
    { value: “UY”, label: “Uruguay” },
    { value: “UZ”, label: “Uzbekistan” },
    { value: “VU”, label: “Vanuatu” },
    { value: “VA”, label: “Vatican City (Holy See)” },
    { value: “VE”, label: “Venezuela” },
    { value: “VN”, label: “Vietnam” },
    { value: “VG”, label: “Virgin Islands (British)” },
    { value: “VI”, label: “Virgin Islands (US)” },
    { value: “WF”, label: “Wallis and Futuna Islands” },
    { value: “EH”, label: “Western Sahara” },
    { value: “WS”, label: “Western Samoa” },
    { value: “YE”, label: “Yemen” },
    { value: “YU”, label: “Yugoslavia” },
    { value: “ZM”, label: “Zambia” },
    { value: “ZW”, label: “Zimbabwe” }
    ];
    // create Countries ComboBox.
    $(“#billingCountries”).jqxComboBox({ enableBrowserBoundsDetection: true, promptText: “Select a Country:”, source: countries, height: 22, width: ‘100%’ });
    // create Accept Terms Checkbox.
    $(“#acceptTerms”).jqxCheckBox({ width: ‘100%’ });
    // create the Birth Date Calendar.
    $(“#birthDate”).jqxDateTimeInput({ enableBrowserBoundsDetection: true, width: ‘100%’, height: 24 });
    // create the Cart Type ComboBox.
    var cardTypes = [{ value: “visa”, label: “Visa” }, { value: “masterCard”, label: “MasterCard” }, { value: “americanExpress”, label: “American Express” }, { value: “discover”, label: “Discover” }];
    $(“#cardType”).jqxComboBox({ enableBrowserBoundsDetection: true, selectedIndex: 0, autoDropDownHeight: true, promptText: “Card Type:”, source: cardTypes, width: ‘100%’, height: 22 });

    var months = [
    { value: “01”, label: “01 – January” },
    { value: “02”, label: “02 – February” },
    { value: “03”, label: “03 – March” },
    { value: “04”, label: “04 – April” },
    { value: “05”, label: “05 – May” },
    { value: “06”, label: “06 – June” },
    { value: “07”, label: “07 – July” },
    { value: “08”, label: “08 – August” },
    { value: “09”, label: “09 – September” },
    { value: “10”, label: “10 – October” },
    { value: “11”, label: “11 – November” },
    { value: “12”, label: “12 – December” }
    ];
    var years = [
    { value: “2014”, label: “2014” },
    { value: “2015”, label: “2015” },
    { value: “2016”, label: “2016” },
    { value: “2017”, label: “2017” },
    { value: “2018”, label: “2018” },
    { value: “2019”, label: “2019” },
    { value: “2020”, label: “2020” }
    ];
    // Create Expiration Date & Year ComboBoxes.
    $(“#expirationDate”).jqxComboBox({ enableBrowserBoundsDetection: true, source: months, selectedIndex: 0, height: 22, width: ‘100%’ });
    $(“#expirationYear”).jqxComboBox({ enableBrowserBoundsDetection: true, source: years, autoDropDownHeight: true, selectedIndex: 0, height: 22, width: ‘100%’ });

    // Create the Form Validator.
    $(‘#form’).jqxValidator({
    hintType: ‘label’,
    rules: [
    { input: ‘#firstName’, message: ‘First Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#lastName’, message: ‘Last Name is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#billingAddress’, message: ‘Billing Address is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#billingCity’, message: ‘Billing City is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#billingZipCode’, message: ‘Zip Code is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#cardNumber’, message: ‘Card Number is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#securityCode’, message: ‘Security Code is required!’, action: ‘keyup, blur’, rule: ‘required’ },
    { input: ‘#acceptTerms’, message: ‘You need to accept the terms!’, action: ‘keyup, blur’, rule: ‘required’ }
    ]
    });

    // Validate form.
    $(“#sendButton”).click(function () {
    var validationResult = function (isValid) {
    if (isValid) {
    $(“#form”).submit();
    }
    }
    $(‘#form’).jqxValidator(‘validate’, validationResult);
    });
    // prepare chart data as an array
    var sampleData = [
    { Day: ‘Monday’, Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
    { Day: ‘Wednesday’, Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
    { Day: ‘Friday’, Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
    { Day: ‘Sunday’, Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
    ];

    // prepare jqxChart settings
    var settings = {
    borderLineWidth: 0,
    title: “Fitness & exercise weekly scorecard”,
    description: “Time spent in vigorous exercise by activity”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
    source: sampleData,
    categoryAxis:
    {
    text: ‘Category Axis’,
    textRotationAngle: 0,
    dataField: ‘Day’,
    showTickMarks: true,
    tickMarksInterval: 1,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    showGridLines: false,
    gridLinesInterval: 1,
    gridLinesColor: ‘#888888’,
    axisSize: ‘auto’
    },
    colorScheme: ‘scheme05’,
    seriesGroups:
    [
    {
    type: ‘splinearea’,
    valueAxis:
    {
    unitInterval: 20,
    minValue: 0,
    maxValue: 100,
    displayValueAxis: false,
    description: ‘Goal in minutes’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [
    { dataField: ‘Goal’, displayText: ‘Personal Goal’, opacity: 0.7 }
    ]
    },
    {
    type: ‘stackedcolumn’,
    columnsGapPercent: 100,
    seriesGapPercent: 5,
    valueAxis:
    {
    unitInterval: 20,
    minValue: 0,
    maxValue: 100,
    displayValueAxis: true,
    description: ‘Time in minutes’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’,
    gridLinesColor: ‘#777777’
    },
    series: [
    { dataField: ‘Running’, displayText: ‘Running’ },
    { dataField: ‘Swimming’, displayText: ‘Swimming’ },
    { dataField: ‘Cycling’, displayText: ‘Cycling’ }
    ]
    }
    ]
    };

    // setup the chart
    $(‘#chart’).jqxChart(settings);
    // prepare DataTable data.
    var data = new Array();

    var firstNames = [“Nancy”, “Andrew”, “Janet”, “Margaret”, “Steven”, “Michael”, “Robert”, “Laura”, “Anne”];
    var lastNames = [“Davolio”, “Fuller”, “Leverling”, “Peacock”, “Buchanan”, “Suyama”, “King”, “Callahan”, “Dodsworth”];
    var titles = [“Sales Representative”, “Vice President, Sales”, “Sales Representative”, “Sales Representative”, “Sales Manager”, “Sales Representative”, “Sales Representative”, “Inside Sales Coordinator”, “Sales Representative”];

    var k = 0;
    for (var i = 0; i < firstNames.length; i++) {
    var row = {};
    row[“firstname”] = firstNames[k];
    row[“lastname”] = lastNames[k];
    row[“title”] = titles[k];
    data[i] = row;
    k++;
    }

    var source =
    {
    localData: data,
    dataType: “array”
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    // create DataTable.
    $(“#dataTable”).jqxDataTable(
    {
    width: ‘100%’,
    height: ‘100%’,
    source: dataAdapter,
    sortable: true,
    columns: [
    { text: ‘First Name’, dataField: ‘firstname’, width: ‘30%’ },
    { text: ‘Last Name’, dataField: ‘lastname’, width: ‘30%’ },
    { text: ‘Title’, dataField: ‘title’ }
    ]
    });
    $(“#myTab”).tab();
    $(‘.pane:nth-child(2)’).hide();
    $(‘.pane:nth-child(3)’).hide();

    $(‘#myTab a’).click(function (e) {
    e.preventDefault();
    $(‘.pane’).hide();
    $(‘#myTab li’).removeClass(‘active’);
    var id = $(this).attr(‘data-tab’);
    $(“#” + id).show();
    // notifies the widgets that a resize is required and forces a redraw. $.jqx.resize is called for better UX when navigating through tabs.
    $.jqx.resize();
    $(this).parent().addClass(‘active’);
    })
    });
    </script>
    <div style=”min-height: 40px; box-shadow: none; -webkit-box-shadow: none;” class=”navbar navbar-default navbar-fixed-top” role=”navigation”>
    <ul id=”myTab” style=”min-width: 480px; box-shadow: none; -webkit-box-shadow: none; border: none;” class=”nav nav-tabs”>
    <li style=”margin-left: 20px;” class=”active”>Billing Information

    </div>
    <div style=”padding-top: 40px; width: 100%; height: 100%;”>
    <div id=”billing” class=”pane” style=”width: 100%; height: 100%; overflow-x: hidden; border: none;”>
    <form class=”navbar-form” id=”form”>
    <div class=”form-horizontal”>
    <h2>Enter your Billing Information</h2>
    </div>
    <div class=”form-horizontal col-sm-6″>
    <div>
    <label class=”col-sm-4 control-label” for=”firstname”>First Name</label>
    <div class=”col-sm-8″>
    <div class=”input1″ placeholder=”First Name” id=”firstName” name=”firstName” value=”” />
    </div>
    </div>
    <div>
    <label class=”col-sm-4 control-label” for=”middleInitial”>Middle Name</label>
    <div class=”col-sm-8″>
    <div class=”input1″ placeholder=”MI” name=”middleInitial” value=”” />
    </div>
    </div>
    <div>
    <label class=”col-sm-4 control-label” for=”lastName”>Last Name</label>
    <div class=”col-sm-8″>
    <div class=”input1″ placeholder=”Last Name” id=”lastName” name=”lastName” value=”” />
    </div>
    </div>
    <div>
    <label class=”col-sm-4 control-label” for=”birthDate”>Birth Date</label>
    <div class=”col-sm-8″>
    <div style=”margin-top: 5px;” id=”birthDate” name=”birthDate”></div>
    </div>
    </div>
    </div>
    <div class=”form-horizontal col-sm-6″>
    <div>
    <label class=”col-sm-4 control-label” for=”billingAddress”>Address</label>
    <div class=”col-sm-8″>
    <div class=”input1″ name=”billingAddress” id=”billingAddress” placeholder=”Street Address” />
    </div>
    </div>
    <div>
    <label class=”col-sm-4 control-label” for=”billingCity”>City</label>
    <div class=”col-sm-8″>
    <div class=”input1″ name=”billingCity” id=”billingCity” placeholder=”City” maxlength=”15″ />
    </div>
    </div>
    <div>
    <label class=”col-sm-4 control-label” for=”billingZipCode”>Postal Code</label>
    <div class=”col-sm-8″>
    <div class=”input1″ name=”billingZipCode” id=”billingZipCode” placeholder=”Postal / Zip Code” maxlength=”5″ />
    </div>
    </div>
    <div>
    <label class=”col-sm-4 control-label” for=”billingCountries”>Country</label>
    <div class=”col-sm-8″>
    <div style=”margin-top: 5px;” id=”billingCountries”></div>
    </div>
    </div>
    </div>

    </form>
    </div>

    </div>
    </body>
    </html>

    You can also test this with http://www.jqwidgets.com/jquery-widgets-demo/demos/twitter/bootstrap-grid-layout.htm?arctic by changing the input tags to divs and rendering jqxNumberInput with width: ‘100%’, spinButtons: true, inputMode: ‘simple’.

    I have been struggling with this issue for long and finally decided to turn off spin buttons for now. It would be really helpful if this issue has some workaround.

    Looking forward for a solution.
    Regards,
    Mohamed Azher

    November 3, 2014 at 9:08 am jqxnumberinput spinbuttons issue #62044

    Dimitar
    Participant

    Hello Mohamed Azher,

    This is a normal behaviour, so long as the buttons do not disappear after the resize has ended.

    Best Regards,
    Dimitar

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

    November 3, 2014 at 10:32 am jqxnumberinput spinbuttons issue #62050

    mohamedazher
    Participant

    Hi Dimitar,

    Thank you for your reply.

    They actually do disappear often after the resize has ended.

    If you could just run the code i posted above, and try resizing a few times, you would notice that it happens very frequently.

    This is a big issue as our whole application is responsive, and all widgets work 100% ok, except this one.

    As i said it even happens in the http://www.jqwidgets.com/jquery-widgets-demo/demos/twitter/bootstrap-grid-layout.htm?arctic when you change the input elements into number input setting width: ’100%’,spinButtons: true,inputMode: ‘simple’ and try to resize the window.

    it works 20% of the time, 80% of the times the buttons just disappear.

    Regards,
    Mohamed Azher

    November 3, 2014 at 12:08 pm jqxnumberinput spinbuttons issue #62055

    Dimitar
    Participant

    Hi Mohamed Azher,

    We tested the code with the specified changes applied but at our side the spin buttons are always present after the window resize ends. Please specify what browser you test on (and its version). Please also make sure you are using the latest version of jQWidgets (3.5.0).

    Best Regards,
    Dimitar

    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.