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

Question

Question

Reposition field label and Smaller font/fields

asked on December 13, 2017

This may be an easy answer, but how do you move the field label/title from the top of the field to the side of the field. Right now I have most of them above the field, as shown. 

 

Also, I'd like to make the font and field sizes smaller on one particular page in the form. Essentially I'd like to fit as many fields as I can within one page. Is there anyway Laserfiche allows for that? Or by CSS?

0 0

Answer

SELECTED ANSWER
replied on December 13, 2017

Hi Jermain

When you are in the form, click on the setting button in the top right

In the Forms Setting Popup select the Label Alignment you want. This is a Global setting for the form

In regards to changing the font sizing on one particular section of the form, you will have to use CSS such as. If the labels are on the left of the field, you likely want to adjust width, etc. You'll probably want to set a class for those fields so that you can assign the size to the class as opposed to each individually.

In the CSS pane, click learn more and this will help you get started

example:

#q53 label {font-size: 10px;}

 

1 0
replied on December 13, 2017

I see. Thank you for your answer. That helps. 

Do you know if there is any way to change the label alignment on specific fields? Not just the entire form?

0 0
replied on December 13, 2017

CSS can be used to format any part of the form once you understand how to target the fields, headers, etc. You may find where other people have posted code snippets here on answers, unfortunately there isn't a specific forum for all snippets. Others resources such as W3Schools are helpful.

1 0
replied on December 13, 2017

Understood. 

Thank you Steve.

0 0
replied on August 2, 2023

I would like the answer to this question too - with an example. 

0 0
replied on August 3, 2023

Hi Steve, which designer would you be looking for the example in?

Can you include a screen shot of something for reference?

0 0
replied on August 7, 2023 Show version history

Hi Steve, I'm using the Modern Forms designer. I want to be able to put "Week 1 Video" BESIDE the field (The entire rest of the form needs to keep the field labels ABOVE the fields)
- I'm also trying to figure out how to get the CSS to touch that field label so I can also make the label itself disappear for other reasons/in other cases:

0 0
replied on August 8, 2023

To Hide the Label on a field, i added a CSS Class to the field "HideLBL", and then used the following CSS to hide the Label.

.HideLBL label {display:none;}

0 0
replied on August 8, 2023

As far as putting the fields next to the labels. That is beyond me at this point as fields use flex in the modern designer of which I am not familiar. 
@████████, any ideas in this?

0 0
replied on August 8, 2023

I'm going to grumble here that this really should be a new post.
Gumble, grumble, grumble...

 

The high-level part of the fields are flex display, but when you get deeper into the components of the field, it uses different display types as needed.  At the level of the div element that includes the form-q class, it's actually using block display instead.  That form-q div is one level above the label element and the div with the cf-field class, and that block display keeps the label above the field.  If we change that .form-q div to use flex display instead, it automatically changes the layout to side-by-side for the label and field - that's just a natural part of how flex works.  They are weird widths at that point, so we need to tweak those as well, but it's a start. 

So here's three lines of CSS for the Modern Designer (tested on Version 11.0.2212.30987) that in my testing made a single-line field that had the label above it, instead show the label to the left of it, and resized the widths of the label and field so that it didn't look really odd.  It just requireds the field to include the class name of: sideBySideLabel.

.sideBySideLabel .form-q {display: flex; margin-top: 25px;}
.sideBySideLabel .form-q label {width: 25%;}
.sideBySideLabel .form-q .cf-field {width: 75%;}

 

You can see it here on the field in the middle:

 

It took a bit of trial and error to get the field aligned with the fields on the left and right instead of aligned with the labels.  That's what the   margin-top: 25px;   value is doing.  And the sizing of 25% versus 75% is really dependant upon how that field is laid out on your form, you might have to tweak those to make it look how you need in your situation.

2 0
replied on August 8, 2023

You are the best Matt, even when you grumble !! wink

1 0
replied on August 8, 2023

Thanks both of you for chiming in! That did work for me ... it's hard to see how to reach elements that are buried 4-5 divs/classes deep.

1 0
replied on August 8, 2023

Yeah, it really can be frustrating at times.

I'm glad it worked for you.

0 0

Replies

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

Sign in to reply to this post.