Jump to content
  • 0

Vertical Column Headers


pmcfarlain
 Share

Question

9 answers to this question

Recommended Posts

  • 1

<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) 
image.png.eb6badbb8d2c640207d5593928a30b0c.png
Just separate with comma

Link to comment
Share on other sites

  • 0
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) 
image.png.eb6badbb8d2c640207d5593928a30b0c.png
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. 

Link to comment
Share on other sites

  • 1
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
image.png.0a951427a4df1cc8f183eb65b78ef081.png

Inspect Element - 

image.png.a0af802a69c0ea0e0e3b68a61732342f.png

Link to comment
Share on other sites

  • 0

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")

844264468_ScreenShot2021-07-19at3_23_13PM.png.3327efa5065da0a2fe68b92051775563.png

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?

 

Link to comment
Share on other sites

  • 0
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
image.png.0a951427a4df1cc8f183eb65b78ef081.png

Inspect Element - 

image.png.a0af802a69c0ea0e0e3b68a61732342f.png

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:

264890880_ScreenShot2021-07-27at9_06_13AM.thumb.png.878025fb0455b6fcd51423f989e97ee7.png

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

Link to comment
Share on other sites

  • 0
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:

264890880_ScreenShot2021-07-27at9_06_13AM.thumb.png.878025fb0455b6fcd51423f989e97ee7.png

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 1
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.

image.png.34b604a6085c3698a0c53ce352b360bb.png

Link to comment
Share on other sites

  • 0
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.

image.png.34b604a6085c3698a0c53ce352b360bb.png

That works great, thanks!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...