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.

Answer 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>