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

Question

Question

CSS on Modern Forms Designer: Left Lable Alignment and Background Color

asked on May 23

I'm using Modern Forms Designer, and I'd like to incorporate CSS into it.  I'm brand new to using CSS, and I want to get started on learning it.  So, I have 3 questions:

1.  The default label alignment is set to Top.  How do I set the label to the left of the input box for a few fields?

2.  How do I set the background color of a section?

3.  Are there any resources or tutorials for CSS Beginners that could teach me more in Modern Forms?

 

0 0

Replies

replied on May 23

1.  The default label alignment is set to Top.  How do I set the label to the left of the input box for a few fields?

 

If you want the whole form to have labels on the left, use the setting to change it for the whole form.  But if you are wanting most of the form to have labels on the top and only a few select fields to have labels on the left, some CSS like this will get you started (tested on Version 11.0.2311.50556).  Note that this is only addressing the label and the field, I can't promise it won't do weird things with other components like the text above/below the field. Give the fields you want to have labels on the left the leftLabel class.

/*Fields with the leftLabel class will put their 
labels to the left of the field, instead of the
top as with most of the rest of the form.*/
.leftLabel .form-q {
  display: flex;
  flex-direction: row;
}
.leftLabel .field-label {
  display: flex;
  flex-basis: 20%;
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 10px;
}
.leftLabel .cf-field {
  display: block;
  flex-basis: 0%;
  flex-grow: 1;
  flex-shrink: 1;
}

Example - two fields without the class and two fields with it:

 

 

2.  How do I set the background color of a section?

You can add CSS classes to a section just like you can a field.  Here's some CSS that controls the background color of whatever element the class names are added to (greenBackground, yellowBackground, and orangeBackground on this example): 

/*Color Backgrounds for fields or sections.*/
.greenBackground {
  background-color: #008000;
}
.yellowBackground {
  background-color: #FFFF00;
}
.orangeBackground {
  background-color: #FFA500;
}

Example:

 

 

3.  Are there any resources or tutorials for CSS Beginners that could teach me more in Modern Forms?

There are a ton of examples here on Laserfiche Answers - and those are going to be the most helpful as they directly relate to Forms.  You just need to be careful when comparing Classic Designer versus Layout Designer as the examples for one don't usually work in the other without modification.  For more general guidance, I usually Google what I'm trying to do.  There are a ton of good resources out there like w3schools.

2 0
replied on May 27

Thank-you!  The code for the background color worked for me, but the left label didn't.  I'm using version 11.0.2307.40547

 

I'll do some more research.

0 0
replied on May 27

Hi @████████, I've tested the @████████ code on my end with different elements, and it works. Could you share with us how you do it, or which specific LF Form object you need to align the labels on? Always remember to set the CSS property leftLabel to the field so the custom code can apply it. You can see it in the following image.​​​​​​​

 

0 0
replied on May 27

I really appreciate the follow-up!  I must have mistyped something.  After retyping the code, it's now working.

 

Thank-you again!

2 0
replied on May 27

FYI - You can copy/paste the code, no need to re-type it.  On the code blocks posted here in LFAnswers, you can hit the icon that looks like a paper with < and > symbols to open in format that lets you copy without the line numbers.

1 0
replied on May 27

Ironically, I like to type the code so that I can learn it.  lol

1 0
replied on May 27

That’s a good reason!

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

Sign in to reply to this post.