Above, Below, and Friends

It would be nice to be able to position something relative to another element.

Let's say we want a dropdown menu. Essentially we want to say: put this element below this other element.

Fortunately, we can say just that!

el UserMenu [] empty        
    |> below
        [ column DropDownOptions [ spacing 20 ]
            [ el NavOption [] (text “Profile”)
            , el NavOption [] (text “Settings”)
            , el NavOption [] (text “Account”)
            ]
        ]

We get what you'd expect, a column that is positioned below an element.

Similarly, we also can use above, onLeft, onRight, and within.

Positioning something relative to the screen

If we want something position something on the window, such as a modal menu, we can do it with screen.

This is similar to position:fixed in css.

screen <|
    el MyStyle [ width (percent 100), height (100)] (text "This is positioned")