CODEWITHSUNDEEP
cssreactjsfrontendvaadinhilla
Vikrant Bhurke
Vikrant Bhurke

Reputation: 31

How to right shift elements in Navbar in Hilla frontend framework

I am building the frontend of my app with HIlla. I have an AppLayout component which has a nested HorizontalLayout component that holds elements. But all of them are left aligned.

I want some of them to be left-align and some to be right-align. I checked the Docs for HorizontalLayout component and implemented the suggestions. I tried <HorizontalLayout style={{ justifyContent: "end }} /> but it didn't work.

Upvotes: 0

Views: 101

Answers (2)

STaefi
STaefi

Reputation: 4377

I want some of them to be left-align and some to be right-align.

There different methods to have a HorizontalLayout with some of its children components stick to left (or start) and some to the right (end).

If I understood your requirement correctly, this is one of the ways you can do it:

<VerticalLayout theme="padding spacing">
    <h3>Hilla View</h3>
    <HorizontalLayout className="w-full">
        <HorizontalLayout theme="spacing">
            <Button>A</Button>
            <Button>B</Button>
        </HorizontalLayout>
        <div className="flex-grow" />
        <HorizontalLayout theme="spacing">
            <Button>C</Button>
            <Button>D</Button>
        </HorizontalLayout>
        <div className="flex-grow" />
        <HorizontalLayout theme="spacing">
            <Button>E</Button>
            <Button>F</Button>
        </HorizontalLayout>
    </HorizontalLayout>
<VerticalLayout />

The output: enter image description here

The spacer <div ... /> is taking the extra space because of className="flex-grow" which is simply the equivalent of setting flex-grow: 1 in styles.

The above is just the workaround, but the cleaner solution is definitely what is suggested in this answer by @Joacim Päivärinne

Upvotes: 1

Joacim P&#228;iv&#228;rinne
Joacim P&#228;iv&#228;rinne

Reputation: 96

You can use either of the me-auto or ms-auto utility classes to push content left and right in a HorizontalLayout.

Using me-auto this is how it's done:

<HorizontalLayout className="w-full">
  <Button className="me-auto">Left</Button>
  <Button className="me-auto">Center</Button>
  <Button>Right</Button>
</HorizontalLayout>

Using ms-auto this is how it's done:

<HorizontalLayout className="w-full">
  <Button>Left</Button>
  <Button className="ms-auto">Center</Button>
  <Button className="ms-auto">Right</Button>
</HorizontalLayout>

Upvotes: 2

Related Questions