Is there a way in HTML using CSS and/or javascript to design web forms like a Windows GUI with the label over the top of the textbox field the full length of the width of the HTML body and using Bootstrap Responsive create a new line for the additional controls?
Label
Textbox
Then next to that with padding and margin
Next Label
Next Textbox to the max width of the viewport on the device?
Hi @michaelbragg7456 welcome to the forums
Can you post an image or mock-up of what you are trying to achieve?
Are you sure you want to use Bootstrap? It requires a greater knowledge of HTML/CSS and a good understanding of all the Bootstrap classes than “vanilla” HTML and CSS.
As mentioned above a mock up of what you want would help but as far as bootstrap goes most of what you seem to be asking is the default. The label is above the input and the input is the full width of the column. In a one column fluid container layout it would be the full width of the body (minus padding and margins etc).
How does that image relate to your initial question?
Your image shows multiple columns rather than the one column that you seemed to be asking for?
Bootstrap handles multiple columns quite nicely so you can do that in bootstrap ok although it would be easier in vanilla html and css.
That form is far too complex for my liking and jumping side to side is a sure way to get information skipped or overlooked. It would be better in a linear format that is easier to scan and maybe done a section at a time so it can be safely saved before the next part. However that is more a UI question than a coding one so ignore it if you must have this design.
.
I am sure it can be done. I am not experienced enough with CSS and HTML to make a useful suggestion. You probably want to use some kind of absolute positioning.
A couple of things to consider are:
You might need to have smaller form for smartphones.
I assume you are attempting to create an online version of an existing printed form. I can understand that management might want them to look the same. So it is up to you and the management to decide whether it is advantageous to maintain the look or make the online version different.
That kind of layout could be made by grouping the labels and inputs in an inline-block container. That way they will be in lines and wrap to new lines when the section runs out of width, so it should be naturally responsive without any need for Bootstrap. It will just wrap to new lines more frequently on smaller screens.
But I agree with Paul on the UI/UX side of things, it’s a but cluttered like that, straight stacking with one input per line would be clearer and eaier to follow IMO.
Again that should be natuarlly responsive without any Bootstrap.
The div tags should give it a responsive feel on any device, am I right?
Most HTML elements are naturally responsive without any CSS, that’s a fact I think a lot of people overlook. It’s often poorly thought out css that breaks that fluidity.
But the more complex the layout, the more work there is to do to maintain it through different sizes. That’s why a straight single column layout should be so easy.
In general absolute positioning should be avoided in responsive design, as it goes directly against the concept of fluidity of content and will cause headaches. It does have its edge case uses in particular scenarios, but this is not one of them.
Then the query is asking for contradictory requirements. It is asking for something like a Windows GUI and I think you are saying that is inconsistent with a responsive design.
I have been programming for nearly half a century. I apologize for not knowing what a responsive design is. I assume it is a new term for an old concept but I do not know the term. Responsive implies it is interactive and I don’t understand how the layout has much relevance to that.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
