You are viewing limited content. For full access, please sign in.

Question

Question

Custom CSS not being applied on Save to Laserfiche task

Forms Version 10
Updated April 1, 2019
asked on March 25, 2019

We are trying to move over to importing a custom CSS file for our forms. Forms version is 10.3.1.635.

However using @import url only seems to work when viewing and submitting the form. The Save to Laserfiche task or emailing a submitted form doesn't result in the CSS being applied at all.

 

We are using something like this in the CSS portion of the editor.
@import url("https://forms.domain.com/Forms/css/Custom.css");

 

Any ideas as to why this wouldn't be applied on Save to Laserfiche task?

0 0

Replies

replied on March 25, 2019

That might not actually be the issue. When Forms creates the version that saves to the repository, it actually replaces several field elements with static HTML.

As an example, text inputs would be replaced by div elements, so any CSS targeting an input element would no longer be applied.

It can be difficult to test, but one way is to create a user task that has "Make form read-only" set on the user task, which similarly converts inputs to static HTML.

That could help determine if the CSS isn't being imported at all, or if it just isn't being applied as expected.

0 0
View 2 previous replies
replied on March 25, 2019 • Show version history

CSS that is in the file works fine when manually applied through the editor. The CSS we are using already has some of the changes you are talking about accounted for. The read-only user task also applies the CSS properly. (Including already submitted instances).

It seems during the Save to Laserfiche task the @import url() is not getting applied at all or not being applied until after the page is saved...

I've even got it working ok when using the javascript $('head').append(), but it saves slightly scaled down compared to normal when this approach is used.

0 0
replied on March 25, 2019

Okay, since you've already tested that then it definitely seems like an issue with the import url option. My next suggestion was going to be JavaScript, but it looks like you've already gone that route as well. The "scaled down" issue is a new one for me.

0 0
replied on March 25, 2019 • Show version history

This is what the CSS looks like, pretty standard stuff.

.onepcssgrid-1200 { margin: 0 auto;padding: 0 0 0 1%; max-width: 964px;}
.onerow {clear: both;padding: 0 10px;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {float: left;margin: 0 1% 0 0;}
.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {margin: 0;}
.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }
.lblh>li>label {display: none;}
.lblh label.cf-label{display: none;}
.lnh .cf-section-header {display: none !important;}
.fh {display: none !important;}
select {height:26px !important;}
input {height:26px !important;}
.sp {margin-bottom: 20px;}
#cf-formtitle{ min-height:90px;padding: 9px 0  0 18px; }
#form-title-wrap{ margin-top: 13px; }
/*dark grey border on 2 sides of input fields*/
select {
  border-top: 2px solid darkgray;
  border-left: 2px solid darkgray;
  border-right: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  border-radius:4px;
 	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/*rounded edges on input fields and buttons*/
input {
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

/*rounded edges on multi-line fields */
textarea {
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
}

/*alignment of text for labels, radio buttons, and select fields*/
.form-option-label { line-height: 32px; }
.action-btn { line-height:12px; }

/* Styles the collection 'Add' hyperlink to appear as a button */
a.cf-collection-append {
	display: inline-block;
	padding: 5px 10px 4px 10px;
	border: 1px solid #006699;
	border-radius: 3px;
	background-color: #0097df;
	color:white;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
a.cf-collection-append:hover {
	background-color: #336699;
  	color:white;
}
a.cf-collection-append:visited {
	background-color: #336699;
  	color: white;
}
a.cf-collection-append:active {
	background-color: #336699;
  	color: white;
}

/* styling for our custom user message dialog modals */
.notice {background-color:lightgray; color:black; }
.warn { background-color:orange; color:black; }
.error { background-color:red; color:black; } 
.success { background-color:green; color:black; }

#noticeModal .modal-body { font-weight: bold; }
#noticeModal .modal-title { color:black; }
#noticeModal .modal-header h5 { display: inline-block; }
#noticeModal .modal-header button { line-height: 18px; }

#confirmModal .modal-body { font-weight: bold; }
#confirmModal .modal-title { color:black; }
#confirmModal .modal-header h5 { display: inline-block; }
#confirmModal .modal-header button { line-height: 18px; }

There may be an update for Forms that we might need, I think I remember reading about a patch for 10.3.1, I'll find that and read on the changes.

0 0
replied on March 26, 2019

We decided to go with appending the CSS file through Javascript to the header.

We are working on the scaling issue, but I do appreciate your help.

Thanks

0 0
replied on April 1, 2019

We figured out the scaling issue, it was due to the appended CSS being inside the document.ready() Function. It was moved outside of this and runs properly now.

 

Thanks for your help!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...