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 !