Wich is the correct way to format a form for both desktop, tablet and mobile?
I’ve some doubt about mixing ion-grid with ion-label + ion-input it does not looks so great,
maybe i’m missing some nice example?
Since your screen size radically change, you are correct to think about adjusting your form’s layout to properly adapt to them. I would take the approach of designing custom layouts for each size and use an *ngIf approach to control their display. You will have think about how the UI adapts dynamically on the desktop, since the user can alter the window width.
1 Like
Yes, that’s ok, but it seems that the form components looks good only when in “mobile” mode and inside an ion-list. When you use it on a screen above 700px width then those does not looks so great.
For ‘wide’ screens, you will need to restrict their widths. Form design is harder that it looks (hence why so many suck).
You might look into how things might group in a large viewport.
1 Like
What I have done in the past is break the form into fixed with columns. If you have a mobile form that is long it makes it so the whole form can be seen on a larger screen. I also had to make a UI where the screen was split with a list / table on one side and form on the other. it can get kind of tricky. The form was on the right in landscape mode and on the bottom in portrait. Wen the form was on the bottom I split it into two columns to make better use of the space.
1 Like
Ionic supports .col, .col-sm, .col-md, .col-xs under .row. So you can put your form elements inside column divs.
1 Like
but is it safe to wrap the ion-input with an ion-label and a ion-item inside a grid>row>col ?
Yes, it is safe to do so.
My form renders beautifully no matter the device.
1 Like
thanks, i’was a little worried because the ionic 4 actually is not very much big and there are few examples compared to the old version 
I didn’t know you were using 4.x beta.
I am using 4.x beta and 3.x. The forms that I have created using ion-items in an ion-grid are in a 3.x project. I can’t see there be any huge difference in rendering. If you find otherwise, let me know as I am going to slowly migrate my 3.x over to 4.x beta.
It’s not just forms, it affects the whole app. If Ionic is targetting PWA they need to build in automatic adjustment of the app for desktop sized devices. IOW, the grid system should be a default option.
1 Like
I’d suggest diving into the code for Ion Grid. Its very powerful and I use it to build my single codebase UI’s.
Look at automatically hiding cells when the screen size is less than XL. You can then position form elements and have them look nice, no matter the screen size.
As to your other question, yes - grid is very powerful - you can put lists, cards in them; and you can put grids into cards and other elements to build complex components.
1 Like
Ok, i got everything working perfectly
the suggested correct sequence seems to be: ion-form > ion-grid > ion-row > ion-col > ion-item
2 Likes