New Designer v11 Rotate labels in a table

SELECTED ANSWER

replied on March 24

Heya Chris,

Try '.table-header-cell' instead, like so:

#q26 div.ng-untouched {
  padding:100px 0 0 10px !important;
}
#q26 .table-header-cell { 
            transform: rotate(315deg) !important;
              //width: 80px !important;
			  text-align: center !important;
              vertical-align: middle !important;
              width: 20px !important;
              margin: 0px !important;
              padding: 0px !important;
              padding-top: 10px !important;
              white-space: nowrap !important;         
}

0 0

View 3 previous replies

replied on March 26

This sort of works for what I am looking for. I'm looking for a way for the first column to be longer (like a full word or 2) and the rest of the columns just wide enough for an X.

Like a row label then selection of options that are associated with that label.

1 0

replied on March 26 • Show version history

Were you after something similar to this? I just adjusted the width of the column in the dev tools to test it out

In version 11.0.2311.50564 at least it looks like you can target columns with the '.table-col-x' class. Something like:

#q1 .table-col-3
{
      width: 25%; /* adjust as needed */
}

1 0

replied on March 27

Yes, but as soon as I put in the white-space: nowrap !important; it negates whatever I have done with the width of the columns.

0 0

replied on March 27

I have been working on this the past day or so and have it looking really good. I actually wanted the text to wrap and overlap the elements behind it. Load this up and then tweak the various elements in your browser. The 'bottom' and 'left' control the label's (pseudo-element) position.

I plan on using javaScript to dynamically rename these columns thus the line for 'content', but you could load that up here in CSS if you wanted to.

/* 1) The 4th <th> is our container for the angled label */
#q353 thead th:nth-child(4) {
  position: relative !important;  /* anchor for absolutely positioned pseudo-element */
  overflow: visible !important;   /* let the label overflow if needed */
  color: transparent !important;  /* hide the default text if you want your own text only */
}

/* 2) The angled label as a pseudo-element on the 4th <th> */
#q353 thead th:nth-child(4)::before {
  content: "CSG Castle Rock SD Mechanical Sys Imp & Capital Plan";
  
  /* Let it wrap if it exceeds 80px width */
  white-space: normal !important;
  word-wrap: break-word !important; /* or overflow-wrap: break-word; */
  /* Decrease line spacing */
  line-height: 0.9 !important;   /* or 1, or any value below normal */
  width: 220px !important;
  display: inline-block !important;

  position: absolute !important;
  /* Anchor at the bottom-left corner of the <th>, but shift it up/down or left/right */
  bottom: -9px !important; 
  left: 35px !important;

  /* Rotate around bottom-left corner */
  transform-origin: bottom left !important;
  transform: rotate(315deg) !important;
  
  z-index: 9999 !important;
  color: black !important;
  overflow: visible !important;
}

Hope this helps!

1 0

replied on March 28

Is this in the new forms designer or in classic?

0 0

replied on March 31 • Show version history

new designer v11 as shown in the title of the post ;)

on prem, not cloud.

0 0

Question

Question

New Designer v11 Rotate labels in a table

Answer

Replies

Sign in to reply to this post.