Using Nested Layouts in MXHX
- adrian8147
- 5 days ago
- 3 min read
Introduction
Welcome to Part 4 of the Moonshine.dev series! In the previous articles, we have covered the basics of the WYSIWYG editor, explored the Code tab, and mastered styling techniques. Today, we'll be building an advanced Event Registration form using nested layouts in the Designer. This matters because real forms require fields to be placed side-by-side, organized into logical sections, and have professional spacing that simple layouts cannot provide.
Design hierarchy is crucial in visual communication for organizing elements to capture attention and convey information clearly. It establishes a clear order of importance, aiding users in navigating content. Nested layouts are essential, allowing designers to construct complex yet clear structures. By grouping related elements in organized containers, they create a logical flow, enhancing usability and design aesthetics. This ensures important messages stand out while maintaining visual cohesion.
We will create a professional Event Registration form featuring side-by-side name fields, a full-width email input, and organized sections.
Building the Form Structure
Just by looking at the form, you can tell it's set up like a card with about six rows:
Header
First Name | Last Name
Email Address
Event Date | Attendees
Event type + checkbox below
Action buttons
To make this happen, we'll use a vertical layout with six horizontal layouts inside. Plus, the form elements seem to have a label with a control underneath, so a vertical layout will work for those parts too.
Drag a Form container onto the canvas and size it to about 500px by 500px.
Switch its layout to VerticalLayout.
Set the gap to 15 and make all padding 25.
Add a LayoutGroup inside the Form container.
Make its width 100% and height 50px.
Change its layout to HorizontalLayout.
Set the gap to 15 and don't set any paddings on it
One Row Now copy and paste the the Header inside the form five more times.
All Rows Change the IDs of the rows to something meaningful for better organization (Header, Details1, Details2, Details3, Details3, Actions)
Outline Now drag a new LayoutGroup onto Details1 row. It's going to look weird at first
Nesting layout Give it a width of 50%, height of 100% and set layout to VerticalLayout
Copy this, paste into Details1 and you will see that the gap property on Details1 works correctly
Also paste it twice onto Details3 and you should get something like this:
Complete Layout
Adding the Components
Since the main form layout is complete we can start adding components.
First just add Label component to every place that needs a text
Adding Labels Then let's add Text Inputs. Make all of them 100% width. Make sure to set Details2 layout to VerticalLayout so the Label is displayed above Email.
Adding Text Inputs In the same way add the PopUpDatePicker for Event Date
Then NumericStepper for Attendees
Then change the layout of Details4 to VerticalLayout
And add both ComboBox and Check to Details4
You may have to manually adjust the heights of the rows to make it look good
All Controls in Place Select your ComboBox, in the properties panel find Data Provider and click on Edit
Fill in the event types, one by one
Adding an Option to Data Provider 
Data Provider with All Data Set the ComboBox width to 100%, and the Check paddings to 5px left and 2px top
In the last row, Actions, add two buttons: Register Now and Cancel
Styling
Now, when our form is mostly ready we can adjust some styling.
Select Header layout and align content both horizontally and vertically
Centered Header and Buttons Do the same for Actions layout
Try styling the labels, the button, the borders yourself using techiniques showed in part 4. Here is our result:
Finished Form Together with the complete code:
Comments