Vertical Column Headers

[pmcfarlain]

I have a very large table with long column names and I'd like to set it so that the column headers are vertical (turned 90 degrees) like pictured. Is there a way to do this in Caspio? 

[TellMeWhy]

<style>

[class*="cbResultSetHeaderCell"]{
text-align:center !important;
vertical-align:center !important;
}

.cbResultSetLabel:nth-child(2) {
writing-mode:vertical-rl;
transform: rotate(180deg);
border:none;
}
</style>

 

You can try this, you'll have to manually set the number of that header, if you want 2 and 3, you'll do .cbResultSetLabel:nth-child(2), .cbResultSetLabel:nth-child(3) 

Just separate with comma

[TellMeWhy]

28 minutes ago, pmcfarlain said:

This works perfectly on Google Chrome for Mac but for some reason it rotates the text upside-down on Safari and Windows. 

Try this one
 

.cbResultSetLabel:nth-child(2)> .cbResultSetLabelLink {
writing-mode:vertical-rl;
 -ms-transform: rotate(270deg); //Internet Explorer
  -webkit-transform: rotate(180deg); //Chromium 
  -moz-transform: rotate(180deg) ; //mozilla
  transform: rotate(180deg);

}

 

same concept if you want another ' .cbResultSetLabel:nth-child(3)> .cbResultSetLabelLink '

 

I'm not sure what safari uses, use inspect element and click on the label, to see what is enabled

For IE, you can see in inspect element that -ms- is enabled, it cant read the others

Inspect Element - 

[TellMeWhy]

55 minutes ago, pmcfarlain said:

Here's the code that I inserted for the vertical headers:

<style>
.cbResultSetLabel:nth-child(10)> .cbResultSetLabelLink {
writing-mode:vertical-rl;
 -ms-transform: rotate(270deg); //Internet Explorer
  -webkit-transform: rotate(180deg); //Chromium 
  -moz-transform: rotate(180deg) ; //mozilla
  transform: rotate(180deg);

}
.cbResultSetLabel:nth-child(11)> .cbResultSetLabelLink {
writing-mode:vertical-rl;
 -ms-transform: rotate(270deg); //Internet Explorer
  -webkit-transform: rotate(180deg); //Chromium 
  -moz-transform: rotate(180deg) ; //mozilla
  transform: rotate(180deg);

}
</style>

And here's a link to the datapage with test data: https://c1dcs476.caspio.com/dp/66ca900009e81648775c46438abb

Remove the comments, the ones with '//' it seems it's interfering with the code.

 

Also, for width, it seems you can do padding 0 is for the top and bottom, 50px is for the left and right, you can even specify it more like (0 50px 0 50px) I believe that's top left bottom right.

[pmcfarlain]

19 hours ago, TellMeWhy said:

<style>

[class*="cbResultSetHeaderCell"]{
text-align:center !important;
vertical-align:center !important;
}

.cbResultSetLabel:nth-child(2) {
writing-mode:vertical-rl;
transform: rotate(180deg);
border:none;
}
</style>

 

You can try this, you'll have to manually set the number of that header, if you want 2 and 3, you'll do .cbResultSetLabel:nth-child(2), .cbResultSetLabel:nth-child(3) 

Just separate with comma

This works perfectly on Google Chrome for Mac but for some reason it rotates the text upside-down on Safari and Windows. 

[pmcfarlain]

I have an even larger table and after some number of columns, it gets off a bit. (The date is supposed to be under "FAT Due" and the blank space under "Assembly Due")

Here is the code I'm using:

<style type="text/css">
[class*="cbResultSetHeaderCell"]{
text-align:center !important;
vertical-align:center !important;
}

.cbResultSetLabel:nth-child(35),.cbResultSetLabel:nth-child(36),.cbResultSetLabel:nth-child(37),.cbResultSetLabel:nth-child(39),.cbResultSetLabel:nth-child(40),.cbResultSetLabel:nth-child(41),.cbResultSetLabel:nth-child(42),.cbResultSetLabel:nth-child(43),.cbResultSetLabel:nth-child(44),.cbResultSetLabel:nth-child(46),.cbResultSetLabel:nth-child(47),.cbResultSetLabel:nth-child(48),.cbResultSetLabel:nth-child(49),.cbResultSetLabel:nth-child(50),.cbResultSetLabel:nth-child(51),.cbResultSetLabel:nth-child(52),.cbResultSetLabel:nth-child(53),.cbResultSetLabel:nth-child(54),.cbResultSetLabel:nth-child(55),.cbResultSetLabel:nth-child(56),.cbResultSetLabel:nth-child(57),.cbResultSetLabel:nth-child(58),.cbResultSetLabel:nth-child(59),.cbResultSetLabel:nth-child(61),.cbResultSetLabel:nth-child(62),.cbResultSetLabel:nth-child(63),.cbResultSetLabel:nth-child(64),.cbResultSetLabel:nth-child(65),.cbResultSetLabel:nth-child(66),.cbResultSetLabel:nth-child(67),.cbResultSetLabel:nth-child(68),.cbResultSetLabel:nth-child(69),.cbResultSetLabel:nth-child(70),.cbResultSetLabel:nth-child(71),.cbResultSetLabel:nth-child(72),.cbResultSetLabel:nth-child(73),.cbResultSetLabel:nth-child(75),.cbResultSetLabel:nth-child(76),.cbResultSetLabel:nth-child(77),.cbResultSetLabel:nth-child(78),.cbResultSetLabel:nth-child(79),.cbResultSetLabel:nth-child(80),.cbResultSetLabel:nth-child(81),.cbResultSetLabel:nth-child(82),.cbResultSetLabel:nth-child(83),.cbResultSetLabel:nth-child(84),.cbResultSetLabel:nth-child(86),.cbResultSetLabel:nth-child(87),.cbResultSetLabel:nth-child(88),.cbResultSetLabel:nth-child(89),.cbResultSetLabel:nth-child(90),.cbResultSetLabel:nth-child(92),.cbResultSetLabel:nth-child(93),.cbResultSetLabel:nth-child(94),.cbResultSetLabel:nth-child(95),.cbResultSetLabel:nth-child(97),.cbResultSetLabel:nth-child(98),.cbResultSetLabel:nth-child(99),.cbResultSetLabel:nth-child(100) {
writing-mode:vertical-rl;
white-space: pre;
transform: rotate(180deg);
border:none;
}
</style>

It transforms 60+ columns. Any ideas on how to fix this?

 

[pmcfarlain]

On 6/23/2021 at 1:02 PM, TellMeWhy said:

Try this one
 

.cbResultSetLabel:nth-child(2)> .cbResultSetLabelLink {
writing-mode:vertical-rl;
 -ms-transform: rotate(270deg); //Internet Explorer
  -webkit-transform: rotate(180deg); //Chromium 
  -moz-transform: rotate(180deg) ; //mozilla
  transform: rotate(180deg);

}

 

same concept if you want another ' .cbResultSetLabel:nth-child(3)> .cbResultSetLabelLink '

 

I'm not sure what safari uses, use inspect element and click on the label, to see what is enabled

For IE, you can see in inspect element that -ms- is enabled, it cant read the others

Inspect Element - 

Testing this on chrome with an ipad, for some reason it crushes the tab. Is there a way I could perhaps set the width so it doesn't do this?

Here's what is looks like on the ipad:

Also I'd like the words to face the opposite direction if possible but I couldn't figure out how to change it.

[TellMeWhy]

54 minutes ago, pmcfarlain said:

Testing this on chrome with an ipad, for some reason it crushes the tab. Is there a way I could perhaps set the width so it doesn't do this?

Here's what is looks like on the ipad:

Also I'd like the words to face the opposite direction if possible but I couldn't figure out how to change it.

What does your CSS code look like now, have you used all the lines for each browser in my previous response (-webkit, -moz, etc.)? It's easier to directly check the page, can you give the link? Perhaps duplicate your DataPage and filter it with a test record so no real data will be public

[pmcfarlain]

Here's the code that I inserted for the vertical headers:

<style>
.cbResultSetLabel:nth-child(10)> .cbResultSetLabelLink {
writing-mode:vertical-rl;
 -ms-transform: rotate(270deg); //Internet Explorer
  -webkit-transform: rotate(180deg); //Chromium 
  -moz-transform: rotate(180deg) ; //mozilla
  transform: rotate(180deg);

}
.cbResultSetLabel:nth-child(11)> .cbResultSetLabelLink {
writing-mode:vertical-rl;
 -ms-transform: rotate(270deg); //Internet Explorer
  -webkit-transform: rotate(180deg); //Chromium 
  -moz-transform: rotate(180deg) ; //mozilla
  transform: rotate(180deg);

}
</style>

And here's a link to the datapage with test data: https://c1dcs476.caspio.com/dp/66ca900009e81648775c46438abb

[pmcfarlain]

3 hours ago, TellMeWhy said:

Remove the comments, the ones with '//' it seems it's interfering with the code.

 

Also, for width, it seems you can do padding 0 is for the top and bottom, 50px is for the left and right, you can even specify it more like (0 50px 0 50px) I believe that's top left bottom right.

That works great, thanks!

[futurist]

On 7/27/2021 at 8:32 AM, pmcfarlain said:

Here's the code that I inserted for the vertical headers:

<style>
.cbResultSetLabel:nth-child(10)> .cbResultSetLabelLink {
writing-mode:vertical-rl;
 -ms-transform: rotate(270deg); //Internet Explorer
  -webkit-transform: rotate(180deg); //Chromium 
  -moz-transform: rotate(180deg) ; //mozilla
  transform: rotate(180deg);

}
.cbResultSetLabel:nth-child(11)> .cbResultSetLabelLink {
writing-mode:vertical-rl;
 -ms-transform: rotate(270deg); //Internet Explorer
  -webkit-transform: rotate(180deg); //Chromium 
  -moz-transform: rotate(180deg) ; //mozilla
  transform: rotate(180deg);

}
</style>

And here's a link to the datapage with test data: https://c1dcs476.caspio.com/dp/66ca900009e81648775c46438abb

 Hi,

You may refer to this link on how to appy stylings to multiple sibling elements all at once: