CODEWITHSUNDEEP
twitter-bootstrapresponsive-designtapestry
martin
martin

Reputation: 2194

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?

Upvotes: 0

Views: 281

Answers (2)

lance-java
lance-java

Reputation: 27994

Take a look at the grid decorator mixin from tapestry-stitch. It will allow you to tweak the tr and td elements.

If you also need to tweak the th elements it would be simple to add support for a GridHeaderDecorator.

Upvotes: 1

Bob Harner
Bob Harner

Reputation: 754

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

Upvotes: 1

Related Questions