Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstdmstd's avatar

vuetify, v-select : problem with drop down listing of select component

Hello, In my Laravel 5.6/vue.js2.5 application I use vuetify,1.0.8 and have some problem with drop down listing of select component On my page I have 3 inputs and the select input “Published” last:

<template>
    <v-flex xs12>
        <editor-header :show_loading_image="!is_page_loaded || is_page_updating" :header_icon="getHeaderIcon('event')" :header_title=header_title
                       :message=message></editor-header>


        <form>
            <v-text-field
                    label="Id"
                    v-model="genre_id"
                    readonly disabled
                    v-show="!is_insert"
            ></v-text-field>

            <v-text-field
                    label="Name"
                    v-model="genre_name"
                    :error-messages="genre_nameErrors"
                    @input="$v.genre_name.$touch()"
                    @blur="$v.genre_name.$touch()"
                    required
            ></v-text-field>

            <v-select
                    v-model="genre_SelectPublished"
                    :items="genrePublishedSelectionList"
                    label="Published"
                    item-text="label"
                    item-value="key"
                    return-object
                    :error-messages="genre_SelectPublishedErrors"
                    @change="$v.genre_SelectPublished.$touch()"
                    @blur="$v.genre_SelectPublished.$touch()"
                    required
            ></v-select>
        </form>
    </v-flex>
</template>


<script>
    import { validationMixin } from 'vuelidate'
    import { required, maxLength } from 'vuelidate/lib/validators'

    import {bus} from '../../app';
    import appMixin from '../../appMixin';

    export default {
        mixins: [validationMixin, appMixin],
...

But when I click on items selection sropdown listing on below of the menu and at right corner: https://imgur.com/a/RWSyR

I tried to play with styles of the menu, like in resources/assets/sass/app.scss :

body {
  font-size: 130% !important ;
}

.menu__content .menu__content--select .menuable__content__active {
  border: 2px solid blue !important; /* DEBUGGING */
  background-color: maroon !important;
  padding: 8px 0;
  transition: height .3s cubic-bezier(.4,0,.2,1);
  z-index: 2000;
  float: left;
  display: block;
  overflow-y: auto;
  overflow-x: auto;
  left:0;
  top:0;
  position: relative;
}
.list {
  list-style-type: none;
  padding: 8px 0;
  transition: height .3s cubic-bezier(.4,0,.2,1);
  border: 2px solid red !important; /* DEBUGGING */
  background-color: yellow !important;
  z-index: 2000;
  float: left;
  display: block;
  overflow-y: auto;
  overflow-x: auto;
}

background color and border are changed, but not the rest of properties. So all my attemptes to fix location by modifications by styles were failed.

In my resources/assets/js/app.js :

require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'

import VueRouter from 'vue-router';
window.Vue.use(VueRouter);

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
Vue.use(Vuetify)

import Toaster from 'v-toaster' //https://github.com/paliari/v-toaster
import 'v-toaster/dist/v-toaster.css'
Vue.use(Toaster, {timeout: 3000})

import Vuelidate from 'vuelidate' // https://github.com/monterail/vuelidate
Vue.use(Vuelidate)

window.moment = require('moment');  // https://momentjs.com/

import HomePage from './components/home/HomePage.vue';
import CmsItemPage from './components/home/CmsItem.vue';
import DashboardIndex from './components/dashboard/DashboardIndex.vue';
import ArtistsIndex from './components/artists/artistsListing.vue';
import ArtistEdit from './components/artists/artistEdit.vue';
import GenresIndex from './components/genres/genresListing.vue';
import GenreEdit from './components/genres/genreEdit.vue';
import AppLogin from './components/AppLogin.vue'; // resources/assets/js/components/AppLogin.vue
import Contact from './components/Contact.vue';
import AppFooter from './components/layout/appFooter.vue'; // resources/assets/js/components/layout/appFooter.vue
Vue.component( 'backend-app-layout',  require( './components/layout/backendAppLayout.vue') );
Vue.component( 'listing-header',  require( './components/lib/ListingHeader.vue') );

const routes = [
    {
        path: '/',
        components: {
            homePage: HomePage,
            cmsItemPage: CmsItemPage,
            dashboardIndex: DashboardIndex,
            artistsIndex: ArtistsIndex,
            artistEditor: ArtistEdit,

            genresIndex: GenresIndex,
            genreEditor: GenreEdit,

            loginPage: AppLogin,
            contactPage: Contact,

        }
    },
    {path: '/home', component: HomePage, name: 'homePage'},
    {path: '/cms-item/:alias', component: CmsItemPage, name: 'cmsItemPage'},
    {path: '/admin/dashboard/:default_block?', component: DashboardIndex, name: 'dashboardIndex'},
    {path: '/login', component: AppLogin, name: 'login'},
    {path: '/contact', component: Contact, name: 'contact'},
    {path: '/admin/artists', component: ArtistsIndex, name: 'artistsIndex'},
    {path: '/admin/artist/edit/:id', component: ArtistEdit, name: 'artistEditor'},
    {path: '/admin/genres', component: GenresIndex, name: 'genresIndex'},
    {path: '/admin/genre/edit/:id', component: GenreEdit, name: 'genreEditor'},

]

const router = new VueRouter( {
    mode: 'hash', // default
    routes
})



export const bus = new Vue();

new Vue({ router,

    data:{
        app_title: '',
        loggedUserProfile: {},
        loggedUserInGroups: {},
        refsArray:[]
    },

} ).$mount('#app')  // new Vue({ router,

In my composer.json:

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "type": "project",
    "require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "graham-campbell/markdown": "^10.0",
        "intervention/image": "^2.4",
        "laracasts/utilities": "^3.0",
        "laravel/framework": "5.6.*",
        "laravel/tinker": "^1.0",
        "wboyz/laravel-enum": "^0.2.1"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.1",
        "filp/whoops": "^2.0",
        "fzaninotto/faker": "^1.4",
        "laravel/dusk": "^3.0",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^2.0",
        "phpunit/phpunit": "^7.0"
    },
    "autoload": {
        "classmap": [
            "database/seeds",
            "database/factories"
        ],
        "psr-4": {
            "App\": "app/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "extra": {
        "laravel": {
            "dont-discover": [
            ]
        }
    },
    "scripts": {
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate"
        ],
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover"
        ]
    },
    "config": {
        "preferred-install": "dist",
        "sort-packages": true,
        "optimize-autoloader": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

Is it some kind of conflict with some other installed packets or it could be fixed by modifing in resources/assets/sass/app.scss ?

Thanks !

0 likes
5 replies
mstdmstd's avatar
  1. I also noticed similar problems when I added to my form date picjker which I got from https://vuetifyjs.com site:
            <v-menu
                    ref="birthday_date_menu"
                    lazy
                    :close-on-content-click="false"
                    v-model="birthday_date_menu"
                    transition="scale-transition"
                    offset-y
                    full-width
                    :nudge-right="40"
                    max-width="290px"
                    min-width="290px"
                    :return-value.sync="artist_birthday"
            >
                <v-text-field
                        slot="activator"
                        label="Select birthday"
                        v-model="artist_birthday"
                        prepend-icon="event"
                        readonly
                ></v-text-field>

                <v-date-picker
                        v-model="artist_birthday"
                        scrollable
                        :header-date-format="date => new Date(date).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })"
                        :formatted-value.sync="formatted"
                >
                    <v-spacer></v-spacer>
                    <v-btn flat color="primary" @click="birthday_date_menu = false">Cancel</v-btn>
                    <v-btn flat color="primary" @click="$refs.birthday_date_menu.save(artist_birthday)">OK</v-btn>
                </v-date-picker>
            </v-menu>

I mean menu with days selection is opened far below of the input.

  1. Also looks like not all styles were appllied to my project. As I wrote above in my resources/assets/js/app.js I added rows with css file included:
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
Vue.use(Vuetify)

But I got code https://vuetifyjs.com/en/components/data-tables ( CRUD Actions example ) and in my example it mostly works ok, but button “NEW ITEM” has no color visible : https://imgur.com/a/wcpXv

also I open modal dialog abd all data on the form below are visible. Could it be that I have to add some more css definitions apart 'vuetify/dist/vuetify.min.css' ?

Who works with vuetify? Have you similar problems ?

jamesking's avatar

I have the same problem, did you ever find a solution for this?

jamesking's avatar

found the solution, u need to wrap the app in a <v-app>

1 like

Please or to participate in this conversation.