CODEWITHSUNDEEP
cssflexboxvuetify.js
Eerik Sven Puudist
Eerik Sven Puudist

Reputation: 2348

Vuetify.js: Position two <v-flex> elements centrally inside <v-layout>

I have a <v-layout> containing two <v-flex> elements:

<v-layout row wrap align-center>
  <v-flex>
    <v-text-field
      value="search"
      style="float:left">
    </v-text-field>
  </v-flex>
  <v-flex>
    <v-btn><v-icon>search</v-icon></v-btn>
  </v-flex>
</v-layout>

Right now the elements are aligned to the left like this. I wish them to be aligned centrally (as the main image and the two gray buttons in the picture linked above). How to achieve this?

Upvotes: 2

Views: 8217

Answers (2)

mrts
mrts

Reputation: 18925

You can wrap both elements inside another v-layout > v-flex and use the offset- directive to add left and right padding (building on top of @kiarashws example):

  <v-layout>
    <v-flex xs12 sm8 offset-sm2>
      <v-layout>
        <v-flex xs11>
          <v-text-field
          value="search"
          style="float:left">
          </v-text-field>
        </v-flex>
        <v-flex xs1>
          <v-btn color="primary"><v-icon>search</v-icon></v-btn>
        </v-flex>
      </v-layout>
    </v-flex>
  </v-layout>

Upvotes: 4

StackedQ
StackedQ

Reputation: 4139

When you use 2 <v-flex> components, they both gets the 50% width, although it looks like they're aligned to left but the input has a block display and the button has an inline display which results like your screenshot.

An alternative to do this is adding responsive classes like:

<v-layout>
  <v-flex xs11>
    <v-text-field
      value="search"
      style="float:left">
    </v-text-field>
  </v-flex>
  <v-flex xs1>
    <v-btn><v-icon>search</v-icon></v-btn>
  </v-flex>
</v-layout>

Upvotes: 2

Related Questions