How can i set vuetifty 3 v-select menu checbox left and right padding?

Question

I want to reduce the left padding of v-select menu checkbox using f12 debugger, but when i click on the menu it suddenly disappears. Then i can't see the active menu.

Here is the screen shot of select menu.

How can i set the checkbox right or label left padding using css ? I use the vue 3 and vuetify 3 version.

Here is the sample application https://u5ziwy-4173.csb.app/

You can use `setTimeout` in console to pause the debugger after a set amount of time allowing you to set the UI how you want for when the debugger finally pauses. See [this Stack Overflow answer](https://stackoverflow.com/a/28454481/6225326) — yoduh, Mar 20 '23 at 13:27

Neha Soni · Accepted Answer · 2023-03-21T10:38:56.353

To keep the menu open for debugging-

Use the menu-props of v-select which passes props through to the v-menu component and set the model-value prop of v-menu to true which will always keep the menu open.

<v-select 
  multiple 
  :items="items" 
  :menu-props="{ modelValue: true }"
>
</v-select>

To set the padding of the list items' label-

You can modify the class .v-list-item-title.

.v-list-item-title {
  padding-left: 10px !important;
}

You can debug more as per your requirements.

How can i set vuetifty 3 v-select menu checbox left and right padding?

1 Answers1