Hi Guys,
I have a form using gf_first_quarter and so on. Due to different label text lengths, some labels are causing a new line. As a result, the input fields are not aligned in a row (see image).
Is there a way to make them vertically bottom aligned?
Any help would be appreciated. Thank you,
Michael
Can you send a link to the page on your site where we can see the form and see if there is any CSS which can help with this?
Hi Michael. I have your login details. This is a public forum so I removed the post.
Can you tell me which field ID this
And also on which page of the form the field appears? I’m having a bit of difficulty with the form 
Good Morning Chris,
my allignment problem appears on all forms, so just login and try this form:
https://test.machtsauber.eu/index.php/arbeitsschein-erstellen/
Then you will see my problem on the first two fields called left and right (see pic attached)
In this example, its form id 20 field id 288 and 289 (rather on the beginning of the form)
Thank you.
Mit freundlichen GrĂĽĂźen
Dipl.-Kfm. Michael Eppers
Geschäftsführer
Gebäudereinigermeister
Staatl.gepr. Desinfektor
I see what you’re talking about now. Using top labels and top descriptions, with gf_left_half and gf_right_half classes (the misalignment.) I am going to have someone take a look at this today and see what we can do.
Hi Michael. It’s not going to be possible to account for the varying length content of the field descriptions when they are above the inputs. If you switch to top label, but description below the input, the inputs would be aligned.
If you wanted to align each field manually, you can target the individual inputs and add some top margin (to the input with the shorter description.) For example, on this form, you could add this CSS to align those two inputs:
body .gform_wrapper input#input_20_288 {
margin-top: 40px;
}
Screenshot of that being applied to the form:
I’m sorry there’s not a more automatic way of doing this.
Hi Chris,
for testing purposes, I erased the descriptions and I use (long) field labels only. (Same form ID 20 as before)
The resulting frontend-view can be seen in attached file “field labels only without custom css.jpg”
As you can see, the fields are still misaligned.
Of course, a solution would be to use short field labels only and place the descrpiptions below.
Custom Css would work, too but then I would have to redesign the form for different resultions because the margins would make the form too long in desktop mode for example.
If you have any other idea, please let me know.
If not, I will deal with it, I dont want to bother you any further.
Thank you very much, I wish you a nice day!
Mit freundlichen GrĂĽĂźen
Dipl.-Kfm. Michael Eppers
Geschäftsführer
Gebäudereinigermeister
Staatl.gepr. Desinfektor
Hi Michael,
Is there any way to abbreviate those labels at all in a way that they would be shorter but still perfectly understandable to the person filling in the form? If so, and if you need the full label for back-office purposes, you could always use the full label in the Admin Field Label under Advanced.
Like so:
Best,
Phil
Hi Phil,
I want the fields to be arranged always the same using your ready made css classes, independently of the resolution or device.
On desktop or mobile landscape mode, my labels are short enough and still understandable.
But when it comes to tablet or, even worse, phone portrait mode, it comes to that misalignment I showed to your collegue Chris.
I know about the admin labels but my site is frontend user only designed.
I cannot make the labels any shorter.
But as I told Chris,
I understand, that this is a design issue and I dont want to overstretch your patience.
So, if there isnt an easy solution I will arrange the form differently or so.
Phil, thanks again, incredible fast and goooood support!
Mit freundlichen GrĂĽĂźen
Dipl.-Kfm. Michael Eppers
Geschäftsführer
Gebäudereinigermeister
Staatl.gepr. Desinfektor
proper Gebäudereinigung GmbH, Sitz der Gesellschaft:
Theresienstr. 5, D-66128 SaarbrĂĽcken
Tel: 0681- 70949-0 Fax: 0681 - 70949-21
Handelsregister SaarbrĂĽcken HRB Nr. 7385
Geschäftsführer: Michael Eppers
Hi Michael,
This Wordpress plugin will make your life with GF much easier:
You can adjust almost every aspect of the form and even down to the field level. Whether it is background color, field color, placeholder, or whatever, you can easily customize it via the plugin rather than dealing with css code.
I’ve had the same problem as you, mostly with some of their pre-filled fields (i.e. States) and use the top padding setting for the field to line them up.
I’ve only recently discovered this plugin and it has made life working with GF so much easier than dealing with css.
Hope this helps.
