Two fields miss aligned

Hello @hheyhey568

In this case, you can apply a min-height to the labels to ensure the entry boxes are aligned even if their labels are empty.

Please, enter the style definition below in the “Customize Form Design” attribute in the “Form Settings” tab:

@media (min-width:710px)
{
    #fbuilder .fields>label{min-height:10px;display:inline-block;margin:0 !important;padding:0 !important;}
}

Best regards.

Hello Team,
Thanks for the reply but it did not solve the problem.

I have two fields with following CSS code.

fieldname1 – > col-xs-8 col-ms-8 col-md-8 col-lg-8
fieldname2 – > col-xs-2 col-ms-2 col-md-2 col-lg-2

Fieldname2 is not having label and it is misaligned with fieldname1 when we open the page in mobile device.

With following code , it misaligned in all the devices even in desktop.

@media (min-width:710px)
{
#fbuilder .fields>label{min-height:10px;display:inline-block;margin:0 !important;padding:0 !important;}
}

Please help.

regards,

Hello @hheyhey568

I’m sorry, but without checking the form I don’t know the styles that affect the fields.

Best regards.

Hello,
Please check the following page.

regards,

Hello @hheyhey568

I visited your form and the labels are aligned. Please, look a the screenshot below:

Best regards.

Hello Team,
It looks ok in desktop mode but in mobile devices , it looks misaligned. Can you please check in mobile device?

regards,

Hello @hheyhey568

In this case, insert the style definition without @media:

#fbuilder .fields>label{min-height:10px;display:inline-block;margin:0 !important;padding:0 !important;}

Best regards.

Thanks a lot. It is working perfectly.

regards,

Hello Team,
One more issue coming. When fieldname1 is having 2 lines ( long label with two rows) of label then again the second fieldname2 (with no label) is misaligned. Is there a way for that also?

regards,

• This reply was modified 2 years, 10 months ago by hheyhey568.

Hello @hheyhey568

You have multiple alternatives. However, I recommend you to use @media blocks to define the labels’ heights based on the screen sizes.

For example, you configured the form to align the labels at the left. In this case, the labels’ heights should be defined only for small screens. So, the style definition would be similar to:

@media (max-width:710px)
{
#fbuilder .fields>label{
overflow: hidden;
text-overflow: ellipsis;	
display:inline-block;
height:22px;
}
}

To apply the styles only to specific fields, you can enter a class name through the “Add CSS Layout Keywords” attribute of the field ‘s settings and define the new class through the “Customize Form Design” attribute in the “Form Settings” tab:

https://cff.dwbooster.com/blog/2020/01/12/form-design

Best regards.

Hello Team,
It does align the two field but in case of longer first field ( fieldname1) label , it does not show the full long label, instead it cuts down the label in mobile device.

See the foll0wing page:
https://www.processfunda.com/thermal-relief-valve-expansion-rate/

Fields are aligned in mobile device but in PC version , it is misaligned. Also in mobile mode , the label of fieldname1 is not shown fully.

Is there a solution for it?

regards,

• This reply was modified 2 years, 10 months ago by hheyhey568.
• This reply was modified 2 years, 10 months ago by hheyhey568.

Hello @hheyhey568

As I said in the previous email, you have two alternatives:

1. You can hide the extra text.

2. Or you can assign specific class names to the fields and modify the label height based on the screen size.

For example, assuming the issue happens with a field where the beside field has a long label.

Assign a custom class name to the field with no label, for example, my-specific-field

And then, in the “Customize Form Field” you can enter a style definition similar to:

#fbuilder .my-specific-field>label{min-height:30px;display:inline-block;margin:0 !important;padding:0 !important;}

No solution satisfies every scenery.

Best regards.

Thanks, I have top aligned all the fields in form setting and problem has been solved. it is not working with left aligned properly.

Hello @hheyhey568

As I said previously, the solution is individualized. If you change the labels’ position, you would not need to use additional styles to align the entry boxes.

Best regards.