Question

CSS not printing properly

Forms Version 10

Updated May 21, 2018

asked on May 21, 2018 • Show version history

I have used some CSS to make a training checklist for a varying amount of employees. It looks good in the browser, but when it prints into the repository the CSS doesn't not look the same (see attached images). Can anyone tell me what I did wrong? BTW, I am not an expert on CSS.

My CSS:

#q48 {
   width: 260px;
   height: 400px;
   float:left;
   border: 1px, dotted, #ccc;
}

#q20 {
   clear: right;
   transform: rotate(-90deg);
   width: 400px;
   height: 400px;
   margin-left: 265px;
   margin-bottom: -20px;
}

#q30 {width: 25px;}

body {
counter-reset: h4counter;
}
h4:before {
content: counter(h4counter) ".\0000a0\0000a0";
counter-increment: h4counter;
}

#q24 .cf-label {display: none;}
#q24 .cf-medium {width: 225px;}
#q24 .cf-field {width: 225px;}
#q24 {margin-top: -15px;
margin-right: -5px;}

.lessons .cf-label {display:none;}
.lessons .choice .form-option-label {display:none;}
.lessons {margin-right: -120px;
margin-top: -15px;}

#q49 .cf-label {width: 120px;}
#q49 .cf-field {width: 100px;}
#q49 {margin-top: -15px;}

#q30, #q24, .lessons, #q49 {display: inline-block; vertical-align: middle;}

Browser.PNG (50.97 KB)

| Download

Stored.PNG (106.83 KB)

| Download

CSS.PNG (102.58 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on May 21, 2018

I would probably change your CSS a bit to be more responsive to different resolutions by writing more in % than in pixels. That said, if your immediate issue is that the checkboxes don't rotate upon saving, try appending the code between the { } curly brackets. Please let me know if this fixes it!

#q20 {
    
transform: rotate(-90deg);

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
     }

1 0

Replies

replied on May 21, 2018 • Show version history

CSS in Forms is applied in two places:

The first is when the form is being filled out. In this phase, you would need CSS that customizes the input fields.

The second place is when the fields are in read only mode. The read only fields are what are rendered to the repository. In that case, you no longer have inputs or other HTML fields. Instead, you have mostly plain divs that you need to track down and apply styles to.

I'm not always clear on how much can be shared, so I usually just preview the form using the eyeball icon.

You can then fill out the form, and submit it to see the version that will get sent to the repository. On the preview page, you can right click > inspect element to see the final HTML that was generated. That will help you update your CSS to accommodate both states.

0 0

You are not allowed to follow up in this post.

Question

Question

CSS not printing properly

Answer

Replies

Sign in to reply to this post.