Layout and styling

Widgets are styled to look neat using Bootstrap in their implementation.

Use various different Layout objects to customise what Widgets look like or to create good-looking Forms. Create more complex page layouts without having to be a CSS wizard!

Try it out

  • Make your browser narrower and observe how the layout adapts to smaller device sizes.

This form has two columns. Inputs go into the left one and this text into the right one.

Some inputs are stacked and others are inlined.

Arbitrarily complicated layouts can be created like this.

class CommentForm(Form):
    def __init__(self, view):
        super(CommentForm, self).__init__(view, 'myform')
        comment = Comment()

        layout = ColumnLayout(ColumnOptions('left', size=ResponsiveSize(lg=6)),
                              ColumnOptions('right', size=ResponsiveSize(lg=6)))
        
        # .add_child() returns the added child here:
        row = self.add_child(Div(view).use_layout(layout))
        left_column = row.layout.columns['left']

        # ... and .use_layout() returns the Widget it is called on
        section = Div(view).use_layout(FormLayout())
        left_column.add_child(section)

        email_input = TextInput(self, comment.fields.email_address)
        section.layout.add_input(email_input)

        inline_section = Div(view).use_layout(InlineFormLayout())
        left_column.add_child(inline_section)

        text_input = TextInput(self, comment.fields.text)
        inline_section.layout.add_input(text_input)

        right_column = row.layout.columns['right']
        right_column.add_child(LiteralHTML.from_restructured_text(view,
        '''
           This form has two columns. Inputs go 
           into the left one and this text into the right one.

           Some inputs are stacked and others are inlined.

           Arbitrarily complicated layouts can be created like this.'''))