06 April, 2016

Bang Important

When using a framework that in some cases does weirdly nested stuff that overrides your CSS (I'm looking at you, ICEFaces), the CSS directive !important can be your friend. But maybe it's the sort of friend you need to keep a close eye on.

This is something it took me days to find documentation for, and certainly could cause a maintenance headache, but it falls into the the good-to-know category.

Case in point: with an ICEFaces ace:dataTable, displaying multiple rows from a database query, the table would not display the full number of rows, even though it was sufficiently large to do so, because the <div> that contains all the rows, class name ui-datatable-scrollable-body, was getting its max-height set to 100px, no matter what I did. This was enough to show three of four rows. I was finally able to get it to work with this CSS entry:

.ui-datatable-scrollable-body { max-height:250px!important; }

I may have to do some further tweaking so as not to torch any other datatables I may use elsewhere in the application, but at least now I can move forward. And I'll keep glancing over my shoulder, making sure this helper doesn't try to stab me in the back.