0

tengo este modal en bootstrap que lo uso para mostrarlo en la versión desktop de esta manera

Lo llamo de esta manera

        $("#addFuel").click( function()
        {
            $('#addFuelModal').modal('toggle');
        }
    );

Código del modal

    {{--    MODAL ADD FUEL --}}
<div class="modal" id="addFuelModal" tabindex="-1" role="dialog" data-id="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Añadir repostaje</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formCreateCar" method="post">
                    <meta name="csrf-token" content="{{ csrf_token() }}" />

                    <div class="form-group">
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' id="data_fueling" class="form-control" required />
                            <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                        </div>
                    </div>

                    <input type="hidden" id="usercar_id" value="{{ $car[0]->id }}">
                    <button type="submit" id="btnCreateCar" class="btn btn-primary" style="background-color: #025c99;">
                        Crear
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        @lang('general.cancelar')
                    </button>
                </form>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

En formato desktop tiene este aspecto

introducir la descripción de la imagen aquí

En formato mobile el aspecto es este introducir la descripción de la imagen aquí

Mi pregunta es, como poder hacer para que se me vea bien en mobile, que se os ocurre?

Gracias

4
  • 1
    Si el modal está cerrado ¿El responsive funciona correctamente o ves que la web se desborda a lo ancho?
    – granch
    el 29 oct. 2020 a las 14:49
  • 1
    No deberías tener problema, como dice @granch, ¿estás cargando todo el sitio en vistas móviles? Porque si estás simplemente reduciendo desde el inspector de elementos, sí generaría el resultado que mencionas. el 29 oct. 2020 a las 16:36
  • 1
    El ancho del modal, está gestionado por la clase .modal-dialog que en vistas inferiores a 576px (cuando ya no se aplican reglas media queries) pasa a tener el valor width: auto;, esto para ajustarse al ancho de su contenedor padre .modal cuyo valor siempre es width: 100%; el 29 oct. 2020 a las 16:43
  • @JheymanMejia lo que dices es correcto. Pero comunmente si hay un error en el responsive del sitio y el body desborda a lo ancho, el .modal por su estilo width: 100% desbordará tambien. Por lo poco que se puede ver en las imágenes adjuntadas en la pregunta me parecería que está sucediendo algo de eso.
    – granch
    el 14 ene. 2021 a las 14:47

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.