jQWidgets Forums
jQuery UI Widgets › Forums › Editors › ScrollBar, Slider, BulletChart, RangeSelector › RangeSelector does not return range properly
Tagged: range selector widget
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 2 months ago.
-
Author
-
Hello,
I have got pretty interesting issue with the rangeSelector which only appears under FireFox and Chrome in Windows under Linux and IE11 the issue does not seems to be visible. Every time when number of objects in the rangeSelector is greater than width of the rangeSelector divided by 2 it starts returning wrong ranges. For instance if the width of the rangeSelector is 800px but number of objects is 400+ every 10th object returned with the value of the every 9th one with one exception – object 1 will be always be returned with value 0.
0 returned as 0
1 returned as 0
2 returned as 2
3 returned as 3
4 returned as 4
5 returned as 5
6 returned as 6
7 returned as 7
8 returned as 8
9 returned as 9
10 returned as 9
11 returned as 11
12 returned as 12
13 returned as 13
14 returned as 14
15 returned as 15
16 returned as 16
17 returned as 17
18 returned as 18
19 returned as 19
20 returned as 19Regards
IgorHi Igor,
Please, provide a sample which demonstrates the reported behavior.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
Here is the quick example the output goes to console so when you slide the range from 0 to 1 it has to be 1 but in console output gives you 0. What I just found as well that if you will wrap the range Selector in to an expander the problem get solved … below are both examples.
—without expander – issue —
<!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="../jqw/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.energyblue.css" type="text/css" /> <script type="text/javascript" src="../jqw/scripts/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxmaskedinput.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxrangeselector.js"></script> <script> $(document).ready(function () { document.body.scroll = "no"; document.body.style.overflow = 'hidden'; document.height = window.innerHeight; $("#jqxTabs").jqxTabs({ height: '95vh' , width: '100%', position: 'top', animationType: 'fade' , selectionTracker: 'checked' ,theme: 'ui-redmond'}); // -------------------- $("#rangeSelector").jqxRangeSelector( { width: 800, height: 90, min: 0, max: 527, range: {from: 0, to: 527}, labelsOnTicks: false, resizable: true, majorTicksInterval: 12, minorTicksInterval: 1, showLabels: false }); $("#rangeSelector").on("change", function (event) { var range = $("#rangeSelector").jqxRangeSelector("getRange"); console.log("From:",range.from); console.log("To:",range.to); }); }); // End of the .ready() function </script> </head> <body class='default'> <div id='jqxTabs'> <ul> <li style="margin-left: 50px;">Tab 1</li> </ul> <div> <div>An Expander</div> <div > <!-- Body of the Expander --> <div id='rangeinner' style="margin-left: 1%; margin-top: 1%; width: 98%" > <div id="rangeSelector" style="margin: 0 auto; position: relative" > <div id="jqxRangeSelectorContent"> </div> </div> </div> </div> </div> </div> </body> </html>
here is the example where it is wrapped in to expander.
<!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="../jqw/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.energyblue.css" type="text/css" /> <script type="text/javascript" src="../jqw/scripts/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxmaskedinput.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxrangeselector.js"></script> <script> $(document).ready(function () { document.body.scroll = "no"; document.body.style.overflow = 'hidden'; document.height = window.innerHeight; $("#jqxTabs").jqxTabs({ height: '95vh' , width: '100%', position: 'top', animationType: 'fade' , selectionTracker: 'checked' ,theme: 'ui-redmond'}); $("#expander").jqxExpander({ toggleMode: 'none', width: '98%' , showArrow: false, theme: 'energyblue' }); // -------------------- $("#rangeSelector").jqxRangeSelector( { width: 800, height: 90, min: 0, max: 527, range: {from: 0, to: 527}, labelsOnTicks: false, resizable: true, majorTicksInterval: 12, minorTicksInterval: 1, showLabels: false }); $("#rangeSelector").on("change", function (event) { var range = $("#rangeSelector").jqxRangeSelector("getRange"); console.log("From:",range.from); console.log("To:",range.to); }); }); // End of the .ready() function </script> </head> <body class='default'> <div id='jqxTabs'> <ul> <li style="margin-left: 50px;">Tab 1</li> </ul> <div> <div id="expander" style="margin-left: 1%; margin-top: 1%; margin-right: 1%"> <div>An Expander</div> <div > <!-- Body of the Expander --> <div id='rangeinner' style="margin-left: 1%; margin-top: 1%; width: 98%" > <div id="rangeSelector" style="margin: 0 auto; position: relative" > <div id="jqxRangeSelectorContent"> </div> </div> </div> </div> </div> </div> </div> </body> </html>
Hi kingaru,
That is due to the reason of the margin which you use. It happens so your range selector’s left position is for example: 70.5px and due to the rounding the result is like that. We will work on that for the future versions.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for clarifying this! Could you please suggest what would be the best workaround for this problem for now?
Regards
IgorHi kingaru,
Don’t set margin and especially in Percentages.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.