Jqwidgets: Issues with text positioning in jqxgrid

0
votes

Jqxgrid Header

In the above picture some of the text in the header is hidden. I tried the padding-bottom property but that didnt help. I use the jqxgrid widget from jqwidgets

The concerned div is .jqx-grid-header How should I go about to position the text upper? Any feedback would be helpful

2
htmlcssjqxgridjqwidget
Try margin-bottom instead, and perhaps set a max row height. Post a fiddle or sample code to help you more in any case. - Manu

2 Answers

1
votes

Well, you added BR tags in your Column Header's Texts. Adding HTML Tags there will require you to implement the column's renderer callback function, too. The result of this function should be the HTML String to be displayed in the column's header.

Hope this helps.

0
votes

You can do this by setting it in the column definition as follows:

     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', minwidth: 100, resizable: false, width: 'auto', cellsalign: 'right', cellsformat: 'c2' }
     ]

For more information, I recommend you to read here:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/columnsresizing.htm

I hope that helps.