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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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