jQuery UI Widgets › Forums › DataTable › cellClassName for font size
Tagged: Cell, cellclassname, data table, datatable, Font, font size, jqxdatatable, size
This topic contains 4 replies, has 2 voices, and was last updated by ekisoft 10 years, 2 months ago.
-
Author
-
Hello.
First i am sorry for my bad english.I tried a little bit this jqwidget components and I need your help.
Can you tell me how can I on jqxDataTable change the font size of the cell. Ok, I can do that, but the problem is , that when I move mouse on (hover) or select the row, fontsize changed back to small font. when I release the row then fonsize is set back to big fonts.Thank you in advance for your help.
Hello ekisoft,
We do not experience such issue. Here is an example, based on the demo Default Functionality:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <style type="text/css"> .largeFont { font-size: large; } </style> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <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/jqxdatatable.js"></script> <script type="text/javascript" src="../sampledata/generatedata.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#table").jqxDataTable( { altrows: true, sortable: true, editable: true, selectionMode: 'singleRow', columns: [ { text: 'First Name', dataField: 'First Name', width: 200, cellclassname: "largeFont" }, { text: 'Last Name', dataField: 'Last Name', width: 200 }, { text: 'Product', dataField: 'Product', width: 250 }, { text: 'Unit Price', dataField: 'Price', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' }, { text: 'Quantity', dataField: 'Quantity', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'n' } ] }); }); </script> </head> <body class='default'> <table id="table" border="1"> <thead> <tr> <th align="left"> First Name </th> <th align="left"> Last Name </th> <th align="left"> Product </th> <th align="right"> Price </th> <th align="right"> Quantity </th> </tr> </thead> <tbody> <tr> <td> Ian </td> <td> Devling </td> <td> Espresso Truffle </td> <td> $1.75 </td> <td> 8 </td> </tr> <tr> <td> Nancy </td> <td> Wilson </td> <td> Cappuccino </td> <td> $5.00 </td> <td> 3 </td> </tr> <tr> <td> Cheryl </td> <td> Nodier </td> <td> Caffe Americano </td> <td> $2.50 </td> <td> 4 </td> </tr> <tr> <td> Martin </td> <td> Saavedra </td> <td> Caramel Latte </td> <td> $3.80 </td> <td> 11 </td> </tr> <tr> <td> Guylene </td> <td> Bjorn </td> <td> Green Tea </td> <td> $1.50 </td> <td> 8 </td> </tr> <tr> <td> Andrew </td> <td> Burke </td> <td> Caffe Espresso </td> <td> $3.00 </td> <td> 2 </td> </tr> <tr> <td> Regina </td> <td> Murphy </td> <td> White Chocolate Mocha </td> <td> $3.60 </td> <td> 6 </td> </tr> <tr> <td> Michael </td> <td> Murphy </td> <td> Caramel Latte </td> <td> $3.80 </td> <td> 2 </td> </tr> <tr> <td> Petra </td> <td> Bein </td> <td> Caffe Americano </td> <td> $2.50 </td> <td> 7 </td> </tr> <tr> <td> Nancy </td> <td> Nodier </td> <td> Caffe Latte </td> <td> $4.50 </td> <td> 10 </td> </tr> <tr> <td> Peter </td> <td> Devling </td> <td> Green Tea </td> <td> $1.50 </td> <td> 1 </td> </tr> <tr> <td> Beate </td> <td> Saylor </td> <td> Espresso con Panna </td> <td> $3.25 </td> <td> 3 </td> </tr> <tr> <td> Shelley </td> <td> Nodier </td> <td> Peppermint Mocha Twist </td> <td> $4.00 </td> <td> 7 </td> </tr> <tr> <td> Nancy </td> <td> Murphy </td> <td> Peppermint Mocha Twist </td> <td> $4.00 </td> <td> 1 </td> </tr> <tr> <td> Lars </td> <td> Wilson </td> <td> Caffe Espresso </td> <td> $3.00 </td> <td> 11 </td> </tr> </tbody> </table> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I have defined this class in my css file:
.debelo { font-size:18px; font-weight:bold; } .debelo:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected):not(.jqx-fill-state-pressed-fresh):not(.jqx-grid-cell-selected-fresh), .jqx-widget .debelo:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected):not(.jqx-fill-state-pressed-fresh):not(.jqx-grid-cell-selected-fresh) { font-size:18px; font-weight:bold; }and jqxDataTable coloumn:
{ text: 'Prostor', dataField: 'Opis_prostora',cellClassName:"debelo"},If I remove .debelo:not….. then nothing happens, with that kind of css i get this result:
…but I want to be bold and large a hovered cell, too.
Hi ekisoft,
Did you test our example? In it, normal, hovered, and selected cells are with large font. There is no need for any additional settings (e.g.
:not(...)).Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/I found out what am I doing wrong…
I defined my custom css file before predefined css. I just put after that and it works fine, without any additional settings, just like you wrote.Thank you very much.
Regards.
-
AuthorPosts
You must be logged in to reply to this topic.