jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Bug in grid status bar width
This topic contains 3 replies, has 2 voices, and was last updated by reblutus 11 years, 7 months ago.
-
Author
-
The width of the status bar is calculated according to the total of the widths of the columns. If the grid is too narrow the “grid” portion of the grid will show an horizontal scroll bar making it possible to see the hidden columns. The status bar is not part of the scrollable area. So if you have some buttons adjusted to the right of the status bar they will hide and there will be no way you can scroll to view them.
Instead of using the total width of the columns, the status bar should calculate his width according to the grid container. Or better the status bar could have a width:auto or 100% which will make the div the width it can take.
Trying to force the width:auto (or 100%) to the status bar in the renderstatusbar attribute does not work.
Hi reblutus,
That is not a bug. That is the behavior by design. The Status Bar is not scrollable. The Toolbar is not scrollbable, too.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comI don’t want to status bar to be scrollable, you misunderstood me.
I want it to fit the width of the grid container. Now, sometimes, it’s wider and portions of it are hidden. This happens when the columns are larger than the grid container, in other words when a horizontal scrollbar appears.
You can experiment this if you put something in the status bar that is floating right.
here you can find an example showing the problem mentionned above:
<script>// prepare the datavar 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 i = 0; i < 1000; 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"};var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (data) { }, loadError: function (xhr, status, error) { } });$(function(){ $("#jqxGrid").jqxGrid( { source: dataAdapter, width:600, height:"100%", 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' } ], showstatusbar:true, statusbarheight:28, renderstatusbar: function($statusbar){ var $button = $('<button type="button" style="float:right;">My right button</button>'); $button.jqxButton(); $statusbar.append($button); } });});</script><style>html, body{ margin:0; padding:0;}html, body, #jqxGrid{ height:100%;}</style></head><body><div id="jqxGrid"></div></body>
As you can see the status bar is larger than the grid’s width, thus making right adjusted elements to be partly or fully hidden.
-
AuthorPosts
You must be logged in to reply to this topic.