Problem with large size of v-checkbox element in Vuetify

Question

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.

Solution 1

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>

Solution 2

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

Solution 3

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