Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[help} grid system for forms #201

Open
cervenf opened this issue Dec 29, 2023 · 3 comments
Open

[help} grid system for forms #201

cervenf opened this issue Dec 29, 2023 · 3 comments

Comments

@cervenf
Copy link

cervenf commented Dec 29, 2023

Hi,
I would like to ask how to build simple form like this:
I tried to use https://primeflex.org/formlayout
But I have no idea how to start a new "row".
I would like to have Id input on first row and then continue on second row with other fields.

image

Thank you.

@nguyen-hai-nam
Copy link

Grid system includes a 12 column based layout utility. The width of a column is defined with the col-{number} style class. When the number of columns exceed 12, columns wrap to a new line. For the blank space, you can use a <div class="col-{number}"></div> with no content inside.

@mconner
Copy link

mconner commented Jan 4, 2024

@cervenf, (and @nguyen-hai-nam, please correct me if I'm wrong), but there's no official row class. Because it wraps at 12, you effectively have a row. This is terser than grid > row > col structure, but more importantly (I think), it better supports different responsive breakpoints. On the other hand, if you are mixing col-n and col-fixed, you can't use a co-n to take up the additional space, since you don't necessarily know how much to use, or even have an exact 1/12 to use up. In that case, you could use a separate grid for each "row" to ensure, for example, "Manufacturer" starts a new row.

It would be nice if the documentation included some recipes for dealing with common issues like this.

@cervenf
Copy link
Author

cervenf commented Jan 8, 2024

Thank you for your response. I'm backend developer and worked a bit with Bootstrap before so maybe that is the reason that I would expect a row here. Row looks simpler to me then define spacer. Then I need to hide spacer on smaller devices etc. But maybe I'm not so good at fronted yet and don't see advantages of these approach yet.
Yes, documentation how to handle these cases would be nice.
Thank you for your response :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants