:orphan:

.. _form.py:

form.py
=======

.. raw:: html

    <a target='new' href='../../ui/examples/form.html' style='font-size:small; float:right;'>open in new tab</a><div style='width: 500px; height: 300px; align: center; resize:both; overflow: hidden; box-shadow: 5px 5px 5px #777;'><iframe src='../../ui/examples/form.html' style='width: 100%; height: 100%; border: 2px solid #094;'>iframe not supported</iframe></div>

.. code-block:: py
    :linenos:


    """
    Simple example that shows two forms, one which is stretched, and one
    in which we use a dummy Widget to fill up space so that the form is
    more compact.
    """
    
    from flexx import app, ui
    
    
    class Form(ui.Widget):
        
        def init(self):
            
            with ui.BoxPanel():
                with ui.FormLayout() as self.form:
                    self.b1 = ui.Button(title='Name:', text='Hola')
                    self.b2 = ui.Button(title='Age:', text='Hello world')
                    self.b3 = ui.Button(title='Favorite color:', text='Foo bar')
                with ui.FormLayout() as self.form:
                    self.b4 = ui.Button(title='Name:', text='Hola')
                    self.b5 = ui.Button(title='Age:', text='Hello world')
                    self.b6 = ui.Button(title='Favorite color:', text='Foo bar')
                    ui.Widget(flex=1)  # Add a flexer
    
    
    if __name__ == '__main__':
        m = app.launch(Form, 'browser')
        app.run()