CODEWITHSUNDEEP
vue.jsvuejs3vuetify.jsvuetifyjs3
user3534080
user3534080

Reputation: 1455

Vuetify 2->3 v-text-field child alignment (prepend-inner and append seem to be ignored)

I'm working on migrating some legacy code from Vuetify 2 to 3. Currently, I'm having trouble with v-text-field child components. I've tried a number of things based on other StackOverflow posts or Google hits, but none of them seem to solve the problem, just move the label text around. Most of the posts/GitHub issues I've found seem to be alignment issues of the label itself (like wanting it on the right side), not an issue where components are overlapping each other.

The old version of our FilterPanel component looked like this: Vuetify 2 But the Vuetify 3 version I've been working on has some serious layout issues: enter image description here

For whatever reason, the text input is to the right of the append 'add filter' button, and the label is hidden behind the prepend-inner v-select

I tried changing append to append-inner, but that didn't seem to make any difference. Similarly with changing prepend-inner to prepend. I also tried adding a label INSIDE the label, thinking that might help, but it didn't render, regardless of what slot I tried using.

One other unanswered question - in Vuetify 2, what exactly did menu-props='auto' do? I see it's not supported in Vuetify 3, even as menu-props="{ auto: true }", but I can't find any real documentation on what auto used to do, so I have no idea whether it's related to my visual issue, or whether I can just remove that bit.

Also, there's a v-chip after the v-text-field but I don't think that's related, so I've omitted it. I also stripped off style and event handlers from this snippet, since they don't seem to impact layout.

<template>
  <div>
    <v-text-field
      v-model="text"
      name="text"
      label="Type your filter here"
      hide-details
      variant="solo"
      density="compact"
      theme="dark"
    >
      <v-select
        slot="prepend-inner"
        v-model="field"
        :items="fields"
        :menu-props="{ auto: true }"
        label="Field"
        hide-details
        single-line
        density="compact"
        variant="solo"
        theme="dark"
      >
        <v-field rounded flat />
      </v-select>

      <v-btn slot="append" color="normal" size="small">
        Add Filter
        <v-icon end theme="dark"> mdi-filter-plus </v-icon>
      </v-btn>
    </v-text-field>
  </div>
</template>

I'm at a point where I'm thinking maybe what I should do is use a v-container/v-row/v-col, since I imagine that would let me force the desired layout, but I'd prefer to avoid that path if it's possible. (Not to mention, there seem to be some style issues doing that. See below.) If I replace the v-text-field with <v-container><v-row>, then put the original v-text-field in-between the v-select and v-btn, it looks closer, but still doesn't look right: enter image description here

Finally, if instead of replacing v-text-field with v-container, I add another v-text-field inside and add display="none" to the outer text field... it shows the label in the right place, but still tries to do input on the right hand side: enter image description here

Thank you!

Upvotes: 0

Views: 1757

Answers (1)

Moritz Ringler
Moritz Ringler

Reputation: 15786

Positioning is not working because you are using deprecated slot syntax:

slot="prepend-inner" ...

is now

v-slot:prepend-inner>

or the short-hand

#prepend-inner

also, you have to put the slot declaration on a template, it does not work on components directly anymore:

<template v-slot:prepend-inner>
  <v-select
    ...

With this, the slots work, however, nesting the VSelect in a VTextField does not seem to work, looks like the text field does not allow to open the select. Also, there is an issue with spacing. I am pretty sure there are more problems. I think, even with the slots, you will have to build it another way.

Have a look at it on the playground

When the :auto prop is set the select menu will be positioned so that the selected item is positioned where the select box is. So instead of dropping up or dropping down, the menu opens in both directions. Here is a pen if it helps, just look at where the menu opens depending on the selected item.

Upvotes: 1

Related Questions