Question

Blank Pages Appended to Form by CSS

Forms

Updated April 7, 2020

asked on April 5, 2020

I needed to find some CSS that would allow me to turn my table header text vertical, since "writing-mode: sideways-lr" only works in Firefox. After searching this Forum and trying different things, I found a piece of CSS that did exactly what I needed (I wish I could credit the author of this code, but I closed that browser window hours ago - if you wrote this code and posted it here - THANK YOU!).

The only problem is, with this code in place, several blank pages are appended to the end of my form. I see this in preview mode, after the form submits, and in the final PDF format (a 2-page form now results in a 6-page PDF with 4 blank pages at the end). I know this code is the culprit because if I take it out, that whitespace disappears immediately. Can anyone help identify and resolve the issue here?

/*Format table headers*/
#q376 .cf-col-label
{
   text-align: center;
   vertical-align: middle;
   width: 20px;
   margin: 0px;
   padding: 0px;
   padding-left: 3px;
   padding-right: 3px;
   padding-top: 10px;
   white-space: nowrap;
   -webkit-transform: rotate(-45deg); -- I decided slanty headers look best
   -moz-transform: rotate(-45deg);
  -ms-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
}

Thank you!

0 0

Answer

SELECTED ANSWER

replied on April 7, 2020

Solved!

I had to add the overflow attribute to the table header (.cf-table th) and then play with the height and angles to make everything fit correctly. Thank you so much to everyone who looked at this!!! I deeply appreciate every suggestion.

/*Format table headers*/
#q376 .cf-col-label
{
   text-align: center;
   width: 20px;
  vertical-align: bottom;
   margin: 0px;
   padding: 0px;
   padding-left: 3px;
   padding-right: 3px;
   padding-top: 10px;
   white-space: nowrap;
   -webkit-transform: rotate(-50deg);
   -moz-transform: rotate(-50deg);
  -ms-transform:rotate(-50deg);
   -o-transform:rotate(-50deg);
}

#q376 .cf-table th {height: 110px;overflow: hidden;vertical-align: bottom !important;}

0 0

Replies

replied on April 6, 2020

Hi Jennifer,

Try adding thead to the CSS selector. When I queried ".cf-col-label" it looks like there is a hidden label on every row in the table, which when Forms converts it to a PDF, must be adding a lot of whitespace from the padding attributes.

`1`	`#q376` `thead .cf-col-label`

1 0

View 1 previous reply

replied on April 6, 2020

Wait! It does work! It just needs to be in a slightly different format.

Instead of:

#q376 thead .cf-col-label

It needs to be:

#q376 .cf-col-label thead

This solved my problem! THANK YOU!!

0 0

replied on April 6, 2020

I don't know why that change worked, but great!

1 0

replied on April 6, 2020

Actually, I spoke too soon.

It did take away the white space, but it also took away the formatting of the header - it was back to horizontal text.

I'm removing the thead notation now...

0 0

replied on April 6, 2020

This post shows a method of rotating column headers in a table using JavaScript combined with CSS.

Hope it helps,

1 0

View 2 previous replies

replied on April 6, 2020

I did find this thread and tried it before I landed on the CSS solution above. I don't remember now why it didn't work for me, but I may give it another try. Thank you for your response!

0 0

replied on April 6, 2020

I just tried the code from your link again and it does the exact same thing - it rotates the headers like it should, but it adds a ton of blank space to the bottom of the form. ???

0 0

replied on April 7, 2020

I just tried it in a basic form I was working on and I did not experience extra space at the bottom of the form. Is it possible that other CSS is playing a part? try commenting out everything else out except the rotate CSS and javascript and see if it works. If so then other aspects of your CSS must be conflicting.

0 0

replied on April 7, 2020

I just removed all other CSS and Javascript. This is now the ONLY code included, and the extra white space is there:

/*Format table headers*/
#q376 .cf-col-label
{
   text-align: center;
   vertical-align: middle;
   width: 20px;
   margin: 0px;
   padding: 0px;
   padding-left: 3px;
   padding-right: 3px;
   padding-top: 10px;
   white-space: nowrap;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
}

Any ideas?

0 0

replied on April 7, 2020

I also tried taking out each line of the above code individually, one at a time, to see if I could narrow down what's causing the problem, but no luck. With each line removed, the white space beneath the form was still there.

0 0

replied on April 7, 2020

Here's a possible clue:

If I add an "overflow" attribute to the code block and set it to anything except "visible," it removes the whitespace beneath the form, but also messes up the column headers (it cuts them off so only the bottom of them are shown). Setting it to "visible" makes the form look exactly the same as it looks without that attribute - white space and all.

/*Format table headers*/
#q376 .cf-col-label
{
   text-align: center;
   vertical-align: middle;
   width: 20px;
   margin: 0px;
   padding: 0px;
   padding-left: 3px;
   padding-right: 3px;
   padding-top: 10px;
   white-space: nowrap;
/* overflow: hidden;*/ -- the overflow attribute was not in this block originally
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
}

0 0

You are not allowed to follow up in this post.

Question

Question

Blank Pages Appended to Form by CSS

Answer

Replies

Sign in to reply to this post.