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

Question

Question

Why is my alignment off?

Classic Form Designer Forms
Updated February 6, 2024
asked on February 5, 2024

Hello,

I am using Laserfiche Forms Professional Version 11.0.2212.30987 Classic for a document destruction request form. I am cleaning it up and can't figure out why my alignment is off. The Javascript and CSS is the same on each form, yet one looks like this: 

and the other like this: 

0 0

Answer

SELECTED ANSWER
replied on February 5, 2024 • Show version history

Actually - no - I just realized there is a difference in the screenshots.

In the one you are saying is aligned incorrectly, the fields above the two that look incorrect, are actually in a table, not stand-alone fields.  So we're kind of comparing apples to oranges here - with both rows of fields in one form being all stand-alone fields with the TwoPerRow class, but the other form having one row that is a table and a second row that is stand-alone fields with the TwoPerRow class.

Based on that, I wonder if the fields that have the TwoPerRow are not actually formatted differently, but maybe the First Name and Last Name fields that are in the table look different because they are in a table and therefore utilize entirely different formatting...

Take a closer look at that table with the First Name and Last Name fields - both using the Browser Inspect function and on the Layout Page (because a table can set it's field width percents on the Layout Page).

1 0

Replies

replied on February 5, 2024

If you are using the Classic Designer, that means there is CSS that is being applied to those fields to dictate that they are side-by-side and how wide to make them.  There is obviously some difference between the CSS in the two forms.

I recommend checking what CSS Class(es) are being applied to each of the fields and comparing to the CSS code that is on the form for those classes.

I know that answer is kind of vague, if you want to share the full CSS code that is on both forms, along with a screenshot from the CSS and Javascript page that shows which classes those fields have, we can probably help diagnose more accurately.

1 0
View 2 previous replies
replied on February 5, 2024 • Show version history

Here is the one that is off: 

and the one that looks fine: 

I copied and pasted the CSS from the one that looks good, and I'm not seeing where I'm going wrong. Thanks so much for looking at it. I am using the "TwoPerLine" on both fields. 

0 0
replied on February 5, 2024

Looking at all the screenshots - from your original post, this comment, and the comment replying to Blake's comment - I'm not seeing the specific issue.

The issue could be the checkbox field to the left of the date is too wide, or the date field is not wide enough (or both).  That said, I don't see what the issue is based on your screenshots.

You should be able to use the "Inspect" function in your browser to inspect the appearance of the fields to see if you can identify better what is going on.

This screenshot from my system shows the Checkbox field having the TwoPerLine class, and highlights the parts of the field that are the element versus the padding around the element.

You should be able to move through the different parts of the field's structure, seeing how things are highlighted, to hopefully get a feel for what is going wrong.

1 0
SELECTED ANSWER
replied on February 5, 2024 • Show version history

Actually - no - I just realized there is a difference in the screenshots.

In the one you are saying is aligned incorrectly, the fields above the two that look incorrect, are actually in a table, not stand-alone fields.  So we're kind of comparing apples to oranges here - with both rows of fields in one form being all stand-alone fields with the TwoPerRow class, but the other form having one row that is a table and a second row that is stand-alone fields with the TwoPerRow class.

Based on that, I wonder if the fields that have the TwoPerRow are not actually formatted differently, but maybe the First Name and Last Name fields that are in the table look different because they are in a table and therefore utilize entirely different formatting...

Take a closer look at that table with the First Name and Last Name fields - both using the Browser Inspect function and on the Layout Page (because a table can set it's field width percents on the Layout Page).

1 0
replied on February 5, 2024

I see what you mean, I don't know why I had it in the form of a table but it's aligned now that I added Single Line fields instead. Thank you!

1 0
replied on February 6, 2024

I'm so happy you got it figured out.

0 0
replied on February 5, 2024

It's kind of hard to tell what the issue is with the alignment because your two screenshots are not really of the same part of the form. The second one begins about where the first one ends.

1 0
replied on February 5, 2024

They are two different forms, but they have the same CSS and Javascript. The fields are also the same as far as I can tell, same size and same use of "TwoPerLine" as the CSS class. 

Here is the field on the form where it appears normal: 

And now the one where the alignment is off: 

Is there another place where the formatting could be coming from aside from CSS and JavaScript? Thanks for responding and bearing with these screenshots. 

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

Sign in to reply to this post.

Details
Related Posts
Loading ...