Row#

class alfred3.element.core.Row(*elements: alfred3.element.core.Element, valign_cols: Optional[List[str]] = None, elements_full_width: bool = True, height: str = 'auto', name: Optional[str] = None, showif: Optional[dict] = None, layout: Optional[Union[alfred3.element.core.RowLayout, Tuple[int]]] = None, **kwargs)[source]#

Bases: alfred3.element.core.Element

Allows you to arrange up to 12 elements in a row.

The row will arrange your elements using Bootstrap 4’s grid system and breakpoints, making the arrangement responsive to different screen sizes. You can customize the behavior of the row for five different screen sizes (Bootstrap 4’s default break points) with the width attributes of its layout attribute.

If you don’t specify breakpoints manually via the layout attribute, the columns will default to equal width and wrap on breakpoints automatically.

Parameters

elements – The elements that you want to arrange in a row.
valign_cols – List of vertical column alignments. Valid values are ‘auto’ (default), ‘top’, ‘center’, and ‘bottom’. The elements of the list correspond to the row’s columns. See RowLayout.valign_cols. This argument is overridden if you use a custom RowLayout instance for the layout argument.
elements_full_width – A switch, telling the row whether you wish it to resize all elements in it to full-width (default: True). This switch exists, because some elements might default to a smaller width, but when using them in a Row, you usually want them to span the full width of their column.
layout –
Can be one of the following: 1) An instance of RowLayout, or 2) a tuple of integers, specifying the allocation of horizontal space between the columns on small screens upwards (using bootstraps 12-column grid).

Option 1) offers fine-tuned flexibility, 2) uses a default RowLayout and changes the RowLayout.width_sm attribute.

By default, the layout is set automatically.

**kwargs –

Inherited keyword arguments

align	Horizontal alignment of text in the element. Does not usually apply to labels. Think of it as an alignment that applies to the innermost layer of an element (while labels are generally located at outer layers). See `LabelledElement` for more on labelled elements. Can be left (default), center, right, or justify.
font_size	Font size for text in the element. You can use a keyword or an exact specification. The available keywords are tiny, small, normal, big, and huge. The exact specification shoul ideally include a unit, such as 1rem, or 12pt. If you supply an integer without a unit, a unit of pt will be assumed. Defaults to normal.
height	Vertical height of the elements display area. Supply a string with a unit, e.g. 80px. Usually, the default is fine. For adding vertical space to a page, you should prefer the `VerticalSpace` element, as it is sematically more clear.
instance_log	If True, the element will use an instance-specific logger, thereby allowing detailed fine- tuning of its logging behavior.
name	Name of the element. This should be a unique identifier. It will be used to identify the corresponding data in the final data set.
position	Horizontal position of the full element on the page. Values can be left, center (default), end, or any valid value for the justify-content flexbox utility. Takes effect only, when the element is not full-width.
showif	A dictionary, defining conditions that must be met for the element to be shown. The conditions take the form of key-value pairs, where each key is an element name and the value is the required input. See `showif` for details.
width	Defines the horizontal width of the element from small screens upwards. It is always full-width on extra small screens. Possible values are narrow, medium, wide, and full. For more detailed control, you can define the `element_width` attribute.

Notes

In Bootstrap’s grid, the horizontal space is divided into 12 equally wide units. You can define the horizontal width of a column by assigning it a number of those units. A column of width 12 will take up all available horizontal space, other columns will be placed below such a full-width column.

You can define the column width for each of five breakpoints separately. The definition will be valid for screens of the respective size up to the next breakpoint.

See https://getbootstrap.com/docs/4.5/layout/grid/#grid-options for detailed documentation of how Bootstrap’s breakpoints work.

Examples

A minimal experiment with a row:

import alfred3 as al
exp = al.Experiment()

@exp.member
class HelloWorld(al.Page):
    name = "hello_world"

    def on_exp_access(self):
        el1 = al.Text("text")
        el2 = al.TextEntry(toplab="lab", name="example")

        self += al.Row(el1, el2)

The arrangement will look like this:

|======================|=====================|
|   el1                |  el2                |
|======================|=====================|

An example with customized widths, where we redefine the “sm” breakpoint:

import alfred3 as al
exp = al.Experiment()

@exp.member
class HelloWorld(al.Page):
    name = "hello_world"

    def on_exp_access(self):
        el1 = al.Text("text")
        el2 = al.TextEntry(toplab="lab", name="example")

        row = al.Row(el1, el2)
        row.layout.width_sm = [2, 10]

        self += row

The arrangement will look like this:

|===========|===============================|
|   el1     |  el2                          |
|===========|===============================|

Methods

`add_css`	Adds CSS to the element.
`add_js`	Adds Javascript to the element.
`added_to_experiment`	Tells the element that it was added to an experiment.
`added_to_page`	Tells the element that it was added to a page.
`prepare_web_widget`	Hook for computations for preparing an element's web widget.
`render_inner_html`	Renders the element template `element_template`.

Attributes

`base_template`	Base template for the element, which will be used to hold the rendered element template.
`converted_width`	List of bootstrap column widths at different screen sizes.
`css_class_container`	Returns the name the element container's CSS class.
`css_class_element`	Returns the name of the element's CSS class.
`css_code`	A list of tuples, which contain a priority and CSS code.
`css_urls`	A list of tuples, which contain a priority and an url pointing to CSS code.
`display_standalone`	If True (default), the element will be displayed as usual on its own.
`element_template`	The element's specific, inner template.
`element_width`	Returns a string of column width definitions.
`elements`	List of the elements in this row.
`elements_full_width`	If True, all elements will take up the full horizontal space of their column, regardless of the element's `Element.element_width` and `Element.width` attributes.
`exp`	The experiment session to which this element belongs.
`experiment`	Alias for `exp`
`font_size`	Font size
`js_code`	A list of tuples, which contain a priority and Javascript.
`js_urls`	A list of tuples, which contain a priority and an url pointing to JavaScript.
`layout`	The layout of this row, can be used to finetune column widths via its attributes.
`name`	Unique identifier for the element.
`page`	The page to which this element belongs.
`position`	Position of the whole element on the page.
`section`	The direct parent section of this element's page.
`short_tree`	String, giving the exact position in the experiment.
`should_be_shown`	Boolean, indicating whether the element is meant to be shown.
`showif`	Conditions that have to be met for the element to be shown.
`template_data`	Dictionary of data to be passed on to jinja templates.
`tree`	String, giving the exact position in the experiment.
`web_widget`	The element's rendered html code for display on a page.
`width`	Element width