BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - How to properly align text and text input fields
  FAQ FAQ  Forum Search   Register Register  Login Login

Topic ClosedHow to properly align text and text input fields

 Post Reply Post Reply
Author
Message
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Direct Link To This Post Topic: How to properly align text and text input fields
    Posted: Jun 30 2021 at 4:54am
Hi,
I am seeking help on how to align text and text input boxes using proper technique in openElement.

On my page, I have one group of elements container (set to relative, width 100%, height auto). In this container, I have many text input fields for users to enter data. For each text input field, I have a single-line text as its label. For now, this label is at the start of the line for each input field.

What I would like to achieve is to have the left side of all the input fields lined up. Because the labels have different lengths and therefore all input fields zigzag. I currently use the label's right outer margin to align these input fields but this is a guess work with pixels. Note that this page is intended to be responsive. 

Because there are many user entries, I also would like to know how to lay them out with two columns with proper alignment. I attempted to use table element to do this but it does not look like table allows me to insert element into its cells except typing in text. Is this true?.

I appreciate any help and tips I can get. Thanks.

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: Jun 30 2021 at 1:00pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: Jun 30 2021 at 1:10pm
Last comment, have you considered using the placeholder instead of labels?
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: Mar 26 2020
Location: Canada
Status: Offline
Points: 61
Direct Link To This Post Posted: Jun 30 2021 at 7:20pm
I watched your responsive video before but I think making the width of all labels the same per your comment was the key to aligning all the input fields. I changed these widths to the same number of pixels from auto and that works.

Yes, I will use placeholders as well in addition to labels. I intend to use them as syntax hints rather than label so users know what to enter in the input field.

Thanks for your help and your time. OpenElement is a great tool for someone like me without coding skills. I am learning php bit by bit along the way as well.


Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 738
Direct Link To This Post Posted: Jun 30 2021 at 9:38pm
Placeholder? Sounds great for me.
But where to find them?

Buddy, could you please give me a short note about them?
Thanks - over the ocean.

Everything is fine with me.
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: Jun 30 2021 at 10:06pm
@digizar

Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.