Resizeable Container Width in Fluent Forms
Users of Fluent Forms have complete control over how their Column Width is configured. Previously, you could change the column width of your form fields using the global styler or CSS option in Fluent Forms. The good news is, you won’t have to do that separately from now on. We’ve included a specific drag and drop feature to adjust the column range.
- To do this, add the Container field to your form by dragging and dropping the desired container from the Advanced input fields.
- Also, include the necessary fields you want to add to the columns.
- Taking Name, Email, Radio Button, and Custom Submit Button fields in this four-column container.
- You can adjust the width of your container by dragging your column from left to right or right to left to match your preferences.
- You can see which column takes how much width for its desired field while dragging, but the full container will accommodate the complete width.
- Each column will display how much margin-left it took compared to the immediate previous column when a column is adjusted.
- After adjusting your column width, Save the settings & preview. See the below screenshot –
- Whatever column width you choose, your container size will also accommodate every gap. For a clear view, you can follow the below screenshot –
That’s simple! This is how to adjust the width of your container.