CODEWITHSUNDEEP
vue.jsvuetify.js
user2769077
user2769077

Reputation: 75

Vuetify v-checkbox hide-details and text on the same line

I'm trying to obtain a simple v-checkbox and a text just nearby (not the Label) on the same line just near the checkbox. My code is as simple as:

<v-container fluid>
  <v-row>
    <v-col>
      <v-checkbox>
      </v-checkbox>
      Some text
    </v-col>
  </v-row>
</v-container>

and can be found at : https://codepen.io/SomeUserName678905/pen/GRqaVYL

My versions:

I've tried to play with the various Vuetify Flex class helpers witout any success this far.

What am I missing here?

UPDATE After @tony19 answer

<v-container fluid>
  <v-row align="center">
    <v-checkbox hide-details></v-checkbox>
    Some text
  </v-row>
</v-container>

successfully makes text and checkbox on the same line, but as soon as I set the hide-details property on v-checkbox, text and checkbox are no longer aligned.

I've created this new codepen to illustrate the new problem.

Upvotes: 1

Views: 5989

Answers (1)

tony19
tony19

Reputation: 138536

Put the v-checkbox and text in the same v-row, and use align="center" to vertically align them on the line:

<v-row align="center">
  <v-checkbox></v-checkbox>
  Some text
</v-row>

demo 1

If using v-checkbox.hideDetails, the component's margins are adjusted, which offsets the alignment in align="center", but you could workaround that with align="end":

<v-row align="end">
  <v-checkbox hide-details></v-checkbox>
  Some text
</v-row>

demo 2

Alternatively, you could use v-simple-checkbox, which doesn't have the margin adjustment:

<v-row align="center">
  <v-simple-checkbox></v-simple-checkbox>
  Some text
</v-row>

demo 3

Upvotes: 3

Related Questions