You are viewing limited content. For full access, please sign in.

Question

Question

Apply CSS to Column Headings

Forms Version 10
Updated July 19, 2016
asked on July 18, 2016

I'd like to selectively apply CSS to only certain column headings in a Forms table.  When I add a CSS class to a specific column the class only show up for in the table body (tbody) of the output.  The actual column heading exists in the table header (thead) section and therefore won't apply the CSS.

I found a work around as below, but it requires that I know the unique field number which obviously isn't ideal.

label[for="Field19(1)"] {
  -ms-transform:rotate(-45deg); /* IE 9 */
  -moz-transform:rotate(-45deg); /* Firefox */
  -webkit-transform:rotate(-45deg); /* Safari and Chrome */
  -o-transform:rotate(-45deg); /* Opera */
}

Is there any other way I can selectively apply CSS to specific column headings in a Forms table?

Thanks.

0 0

Answer

SELECTED ANSWER
replied on July 18, 2016 • Show version history

I can't think of anything that's purely a CSS solution. You could use a little JavaScript to do it however. Basically, you would loop over all <td> tags in one row of your <tbody> that have the class you created, get their indexes (relative to the <tr> that they belong to), and find the matching <th> tag and add a class to them to cause them to rotate. Suppose you have the "lbrotate" CSS class on your columns, and you create some CSS rules for a "rotated" class. You could do something like this:

CSS

.rotated label{
  -ms-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
}

JavaScript

$(document).ready(function(){
  $('tbody tr:first-child td.lbrotate').each(function(){
    var ind = $(this).index();
    $('thead th:nth-child('+(ind+1).toString()+')').addClass('rotated');
  });
});

Note that the index() function returns a zero-based value, and the nth-child indexing is one-based, hence the (ind+1) value.

1 0
replied on July 19, 2016

Thanks for taking the time to figure this out and type up the reply Scott.  This is a relatively easy workaround.  I've tried it and it works.

Thanks again.

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...