Search code examples
twitter-bootstrapresponsive-designtapestry

Tapestry removing grid columns based on screen resolution


I'm using Tapestry 5.4, which already comes with Twitter Bootstrap. Now, I want to optimize my pages for mobile devices. My grids hold too much information to be shown on small screens, so I want to simply hide some columns in this case. Bootstrap has CSS-selectors for exactly that: http://getbootstrap.com/css/#responsive-utilities

However they have to be put on the th and td-elements of the columns. Tapestry provides the rowClass-parameter to add additional CSS for a row, but there's no such way for columns.

What is the best practice approach for my scenario?


Solution

  • Two solutions immediately come to mind: 1) make the table yourself with t:loop and ordinary html, tr, th and td tags, or 2) use Tapestry's DOM Rewriting

    I'd go with #1 personally, but for #2 see this example: http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/Snippet-T5-A-mixin-to-rewrite-the-markup-of-element-td4479439.html#a4481772