{ "id": "F03", "title": "Form in every width", "topic": "forms", "use": "The same form in every width. The divider can be dragged freely, and the rows work out their column count on their own — four short fields side by side become two, and on a narrow screen every field stands on a line of its own.", "decisions": [ "Rows work out their column count from the width the form gets, not from the screen: the form carries no media query, so it behaves the same in a split layout, a drawer, a dialog, a narrower window or a smaller device.", "The steps are measured on the form's own container: from 38rem four short fields stand on one line, from 25rem two, and below that every field has a line of its own.", "Each field names its span per step (ed-span-sm-6, ed-span-md-3), and the grid does the rest.", "On a wide screen the form stops at 64rem, as in F01, F02 and F05: the empty space beside it is intended, not a gap to fill." ], "try": [ { "do": "Drag the divider slowly to the left", "then": "once the form is narrower than 608 pixels, the four numbers stand two to a line, and the street and the house number, the postcode and the city each split their line in halves" }, { "do": "Keep dragging until the form is narrower than 400 pixels", "then": "the form turns into a single column, one field to a line" }, { "do": "Drag the divider to the right again", "then": "the rows take their columns back in the same steps; once the form is 608 pixels wide, the fields only grow wider" } ], "revision": 1, "changes": [], "reviewed": true, "source": "\n\n
\n
\n \n \n Sole proprietorship\n GmbH\n GmbH & Co. KG\n \n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n \n Monthly\n Quarterly\n Annually\n \n
\n\n
\n \n
\n
", "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/forms/f03-form-in-every-width/", "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/forms/" }