Scala: A Laminar/CSS div/elements/settings example

By Alvin Alexander. Last updated: June 22, 2022

As a brief note to self, here’s some Laminar source code that shows how to create a div in Laminar, as well as some settings/elements in that div, as well as one way to handle a reactive button click:

div(

    // --- HEADER INFO ---
    padding := "1em 5em",
    cls := "container col-md-6 col-md-offset-3",  // bootstrap way to center stuff

    // --- INPUT FIELD ---
    p(
        data.intro,
        cls := "intro-text"
    ),
    padding := "40px",
    label(data.inputLabel),
    input(
        onMountFocus,
        placeholder := data.placeholderText,
        inContext { thisNode => onInput.map(_ => thisNode.ref.value) --> someOtherVar }
    ),

    // --- BUTTON AREA ---
    div(
        styleAttr := "padding-top: 1em",
        button(
            "Button Text Here",
            disabled <-- disableBtnVar,
            typ("button"),
            onClick --> (_ => {
                // handle the button click here
            }),
            styleAttr := "margin-right: 2px;",
        ),

Similarly, during a rapid prototyping phase, I also created this code, which shows how to specify CSS parameters in Laminar code:

def websiteWrapper(
    homePageTitle: String,
    content: HtmlElement
): HtmlElement =
    div(
        div(
            homePageTitle,
            textAlign("center"),
            width("100%"),
            height("90px"),
            marginLeft("auto"),
            marginRight("auto"),
            marginBottom("0em"),
            // padding("12px 0 22px 18px"),
            paddingTop("20px"),
            fontSize("36px"),
            backgroundColor("black"),
            color("white"),
        ),
        content
    )

I’m putting this code here for my future self, but if you’re just getting started with Laminar it may also help others understand what you can do inside a div in Laminar.

scala

css

elements

formatting

settings

Scala: A Laminar/CSS div/elements/settings example

books by alvin