I am using Vuetify in a Vue app, and I am attempting to create a checkbox/textfield combo (as shown here in the Vuetify docs). However, when I attempt to implement it in my app, the size of the checkbox element is large, and so it creates a large space between the checkbox and the textfield:

And this is the markup that I am using::

<v-container grid-list-lg>
  <v-layout row>
    <v-flex xs1>
      <v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
    </v-flex>
    <v-flex xs4>
      <v-text-field
        v-bind="fields.alertBackgroundColor"
        v-model="templateModel.alertBackgroundColor"
        placeholder="#4A4A4A"
        :disabled="true"
      />
      </v-flex>
      <v-flex xs1>
        <ColorPickerButton
          v-bind:field-name="'alertBackgroundColor'"
          v-bind:init-color="templateModel.alertBackgroundColor"
          v-on:update-color="getUpdatedColor">
        </ColorPickerButton>
      </v-flex>
      <!-- Alert Text Color -->
      <v-flex xs1>
        <v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
      </v-flex>
      <v-flex xs4>
        <v-text-field
          v-bind="fields.alertTextColor"
          v-model="templateModel.alertTextColor"
          placeholder="#4A4A4A"
          :disabled="true"
        />
      </v-flex>
      <v-flex xs1>
        <ColorPickerButton
          v-bind:field-name="'alertTextColor'"
          v-bind:init-color="templateModel.alertTextColor"
          v-on:update-color="getUpdatedColor"
        ></ColorPickerButton>
      </v-flex>
    </v-layout>
  </v-container>

If I modify my markup to mimic the docs example, like so:

<v-container grid-list-lg>
  <v-layout row>
    <v-flex xs5>
      <v-checkbox @change="disableText($event, 'alertBackgroundColor')""></v-checkbox>
      <v-text-field
        v-bind="fields.alertBackgroundColor"
        v-model="templateModel.alertBackgroundColor"
        placeholder="#4A4A4A"
        :disabled="true"
      />
    </v-flex>
    <v-flex xs1>
      <ColorPickerButton
        v-bind:field-name="'alertBackgroundColor'"
        v-bind:init-color="templateModel.alertBackgroundColor"
        v-on:update-color="getUpdatedColor">
      </ColorPickerButton>
    </v-flex>
  </v-layout>
</v-container>

They don't even fit on one line:

How do I get these two elements to fit together side-by-side as they do in the docs example? The issue is the calculated size of the element itself, not the padding or margin, so playing with the spacing helpers doesn't make a difference.

I am using Vuetify in a Vue app, and I am attempting to create a checkbox/textfield combo (as shown here in the Vuetify docs). However, when I attempt to implement it in my app, the size of the checkbox element is large, and so it creates a large space between the checkbox and the textfield:

And this is the markup that I am using::

<v-container grid-list-lg>
  <v-layout row>
    <v-flex xs1>
      <v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
    </v-flex>
    <v-flex xs4>
      <v-text-field
        v-bind="fields.alertBackgroundColor"
        v-model="templateModel.alertBackgroundColor"
        placeholder="#4A4A4A"
        :disabled="true"
      />
      </v-flex>
      <v-flex xs1>
        <ColorPickerButton
          v-bind:field-name="'alertBackgroundColor'"
          v-bind:init-color="templateModel.alertBackgroundColor"
          v-on:update-color="getUpdatedColor">
        </ColorPickerButton>
      </v-flex>
      <!-- Alert Text Color -->
      <v-flex xs1>
        <v-checkbox @change="disableText($event, 'alertBackgroundColor')"></v-checkbox>
      </v-flex>
      <v-flex xs4>
        <v-text-field
          v-bind="fields.alertTextColor"
          v-model="templateModel.alertTextColor"
          placeholder="#4A4A4A"
          :disabled="true"
        />
      </v-flex>
      <v-flex xs1>
        <ColorPickerButton
          v-bind:field-name="'alertTextColor'"
          v-bind:init-color="templateModel.alertTextColor"
          v-on:update-color="getUpdatedColor"
        ></ColorPickerButton>
      </v-flex>
    </v-layout>
  </v-container>

If I modify my markup to mimic the docs example, like so:

<v-container grid-list-lg>
  <v-layout row>
    <v-flex xs5>
      <v-checkbox @change="disableText($event, 'alertBackgroundColor')""></v-checkbox>
      <v-text-field
        v-bind="fields.alertBackgroundColor"
        v-model="templateModel.alertBackgroundColor"
        placeholder="#4A4A4A"
        :disabled="true"
      />
    </v-flex>
    <v-flex xs1>
      <ColorPickerButton
        v-bind:field-name="'alertBackgroundColor'"
        v-bind:init-color="templateModel.alertBackgroundColor"
        v-on:update-color="getUpdatedColor">
      </ColorPickerButton>
    </v-flex>
  </v-layout>
</v-container>

They don't even fit on one line:

How do I get these two elements to fit together side-by-side as they do in the docs example? The issue is the calculated size of the element itself, not the padding or margin, so playing with the spacing helpers doesn't make a difference.

• javascript
• vue.js
• vuejs2
• vue-component
• vuetify.js

6 Answers 6

You can try wrapping v-checkbox and v-text-field in v-layout

   <v-layout>
      <v-flex xs5>
        <v-layout>
          <v-checkbox v-model="includeFiles" hide-details class="shrink mr-2"></v-checkbox>
          <v-text-field label="Include files"></v-text-field>
        </v-layout>
      </v-flex>
      <v-flex xs1>Test</v-flex>
    </v-layout>

<v-checkbox class="shrink mr-0 mt-0"></v-checkbox>

For me this helped

<v-checkbox class="ma-1 pa-1" hide-details="true" ...

A lot of the components now have a 'density' prop, which if set to 'compact' removes a lot of the space around them automatically and also sets a more sensible height

here is a quick example of how to use it...

<v-checkbox
    density="compact"
    hide-details
></v-checkbox>

and here is a link to the API documentation for the v-checkbox element which mentions the property and its possible values

The space appearing there is due to the xs1 column so it's correct.

If you put all inside one v-flex the elements will be with display:block so it's going to be in another line; to avoid that put it inside a v-layout as per example here:

https://vuetifyjs.com/en/components/selection-controls - Checkboxes - Inline with a textfield

And use the class shrink to only use the space needed for its contents (https://vuetifyjs.com/en/framework/grid#grow-and-shrink):

<v-layout row wrap>
  <v-checkbox v-model="includeFiles" class="shrink mr-2"></v-checkbox>
  <v-text-field label="Include files"></v-text-field>
</v-layout>

JS

new Vue({
  el: '#app',
  data: () => ({
    includeFiles: true,
    enabled: false
  })
})

If you want to play with sizes to have it on a xs6 column you can do in this way:

<v-layout row wrap>
      <v-flex xs6>
        <v-container fluid pa-0>
          <v-layout row wrap>
            <v-checkbox v-model="includeFiles" class="shrink mr-2"></v-checkbox>
            <v-text-field label="Include files"></v-text-field>
          </v-layout>
        <v-container>
      </v-flex>
    </v-layout>

Codepen here: https://codepen.io/pen/?&editable=true&editors=101

.v-input__control {
   height: 28px !important
}