0

Actualmente tengo esto, no logro acomodar bien el select de vue

Si selecciono un dato, sucede eso

introducir la descripción de la imagen aquí

Y quiero lograr algo como el esto, no quiero que se extiendo el panel del select con la información

introducir la descripción de la imagen aquí

De antemano gracias.

<template>
<main class="main">
    <ol></ol>
    <div class="container-fluid">
        <div class="card">
            <template>
                <div class="card-body">
                    <div class="form-group row border">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Estudiante(*)</label>
                                <div class="form-group">
                                    <v-select @search="selectEstudiante" label="apellidos" :options="arrayEstudiante" placeholder="Apellido del Estudiante" @input="getDatosEstudiante" v-model="selectedTodo">
                                        <span slot="no-options">No hay registro</span>
                                    </v-select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Tercera Matricula(*)</label>
                                <input type="file" id="file" ref="file" v-on:change="handleFileUpload()" accept=".XLSX, .XLS" class="form-control">
                                <br>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Record Estudiantil(*)</label>
                                <input type="file" id="file" ref="file" v-on:change="handleFileUpload()" accept=".XLSX, .XLS" class="form-control">
                                <br>
                            </div>
                        </div>

                    </div>
                </div>
            </template>
        </div>
    </div>
</main>

   <style>
   .v-select .dropdown-toggle {
        display: flex !important;

    }
    .v-select input[type=search],
    .selected-tag + input[type="search"] ,
    .v-select input[type=search]
    :focus {
        flex-basis: 20px;
        flex-grow: 1;
        height: 33px;
        padding: 0 20px 0 10px;
        width: 100% !important;
    }
</style> 

1 respuesta 1

0

Elimina el codigo css y simplemente agrega en el script lo siguiente:

import 'vue-select/dist/vue-select.css';

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.