javascript - How do I remove the vertical scroll bar that is floating by itself in an html document? -
i attempting use code found @ http://www.jqwidgets.com/display-a-grid-in-a-dropdown/ create multi column select list. list created, on initial load of document there floating vertical scroll bar near top of document seen in image:
once list opened, bar displayed needs be. , when item selected, bar disappears. code follows:
// start multicolume function generatedata(rowscount) { // prepare data var data = new array(); if (rowscount == undefined) rowscount = 100; var firstnames = ["andrew", "nancy", "shelley", "regina", "yoshi", "antoni", "mayumi", "ian", "peter", "lars", "petra", "martin", "sven", "elio", "beate", "cheryl", "michael", "guylene"]; var lastnames = ["fuller", "davolio", "burke", "murphy", "nagase", "saavedra", "ohno", "devling", "wilson", "peterson", "winkler", "bein", "petersen", "rossi", "vileid", "saylor", "bjorn", "nodier"]; var productnames = ["black tea", "green tea", "caffe espresso", "doubleshot espresso", "caffe latte", "white chocolate mocha", "caramel latte", "caffe americano", "cappuccino", "espresso truffle", "espresso con panna", "peppermint mocha twist"]; var pricevalues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"]; (var = 0; < rowscount; i++) { var row = {}; var productindex = math.floor(math.random() * productnames.length); var price = parsefloat(pricevalues[productindex]); var quantity = 1 + math.round(math.random() * 10); row["id"] = i; row["available"] = productindex % 2 == 0; row["firstname"] = firstnames[math.floor(math.random() * firstnames.length)]; row["lastname"] = lastnames[math.floor(math.random() * lastnames.length)]; row["productname"] = productnames[productindex]; row["price"] = price; row["quantity"] = quantity; data[i] = row; } return data; } var data = generatedata(100); var source = { localdata: data, datatype: "array" }; var dataadapter = new $.jqx.dataadapter(source); $("#jqxdropdownbutton").jqxdropdownbutton({ width: 150, height: 25 }); $("#jqxgrid").jqxgrid({ width: 550, source: dataadapter, columns: [{ text: 'first name', columntype: 'textbox', datafield: 'firstname', width: 90 }, { text: 'last name', datafield: 'lastname', columntype: 'textbox', width: 90 }, { text: 'product', columntype: 'dropdownlist', datafield: 'productname', width: 180 }, { text: 'quantity', datafield: 'quantity', width: 70, cellsalign: 'right' }, { text: 'price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }] }); $("#jqxgrid").bind('rowselect', function(event) { var args = event.args; var row = $("#jqxgrid").jqxgrid('getrowdata', args.rowindex); var dropdowncontent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>'; $("#jqxdropdownbutton").jqxdropdownbutton('setcontent', dropdowncontent); }); $("#jqxgrid").jqxgrid('selectrow', 0); // end multicolume<html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="~/jqwidgets/styles/jqx.base.css" rel="stylesheet" /> <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/jqxmenu.js"></script> <script type="text/javascript" src="~/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="~/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="~/jqwidgets/jqxdropdownbutton.js"></script> <div id="jqxdropdownbutton"> <div style="border: none;" id="jqxgrid"> </div> </div> </body> </html>what parameter(s) need enable in order not see scrollbar on load?
i figured out...
i using following code now:
// start multicolume // prepare data var data = new array(); var firstnames = ["andrew", "nancy", "shelley", "regina", "yoshi", "antoni", "mayumi", "ian", "peter", "lars", "petra", "martin", "sven", "elio", "beate", "cheryl", "michael", "guylene"]; var lastnames = ["fuller", "davolio", "burke", "murphy", "nagase", "saavedra", "ohno", "devling", "wilson", "peterson", "winkler", "bein", "petersen", "rossi", "vileid", "saylor", "bjorn", "nodier"]; var productnames = ["black tea", "green tea", "caffe espresso", "doubleshot espresso", "caffe latte", "white chocolate mocha", "cramel latte", "caffe americano", "cappuccino", "espresso truffle", "espresso con panna", "peppermint mocha twist"]; var pricevalues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"]; for (var = 0; < 100; i++) { var row = {}; var productindex = math.floor(math.random() * productnames.length); var price = parsefloat(pricevalues[productindex]); var quantity = 1 + math.round(math.random() * 10); row["firstname"] = firstnames[math.floor(math.random() * firstnames.length)]; row["lastname"] = lastnames[math.floor(math.random() * lastnames.length)]; row["productname"] = productnames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; data[i] = row; } var source = { localdata: data, datatype: "array" }; $("#jqxdropdownbutton").jqxdropdownbutton({ width: 150, height: 25 }); $("#jqxgrid").jqxgrid({ width: 500, source: source, theme: 'energyblue', columns: [{ text: 'first name', datafield: 'firstname', width: 100 }, { text: 'last name', datafield: 'lastname', width: 100 }, { text: 'product', datafield: 'productname', width: 180 }, { text: 'quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'unit price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }] }); $("#jqxgrid").bind('rowselect', function(event) { var args = event.args; var row = $("#jqxgrid").jqxgrid('getrowdata', args.rowindex); var dropdowncontent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['firstname'] + ' ' + row['lastname'] + '</div>'; $("#jqxdropdownbutton").jqxdropdownbutton('setcontent', dropdowncontent); }); $("#jqxgrid").jqxgrid('selectrow', 0); // end multicolume<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="~/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="~/jqwidgets/styles/jqx.energyblue.css" type="text/css" /> <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/jqxmenu.js"></script> <script type="text/javascript" src="~/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="~/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="~/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="~/jqwidgets/jqxdata.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/jqxdropdownbutton.js"></script> <div id="jqxdropdownbutton"> <div id='jqxwidget' style="font-size: 13px; font-family: verdana; float: left;"> <div id="jqxgrid"></div> </div> </div>
Comments
Post a Comment