0

Hola gracias por los aportes que me puedan ofrecer.

introducir la descripción de la imagen aquí

Tengo un proyecto en MVC ASP.NET cuando cree el proyecto tenía bootstrap 3.0.0 luego de actualizar al 3.4.1 el contenido del modal excede los límites. Pero el formulario interior continúa funcionando perfectamente. Además tengo instalado bootstrap.less.3.4.1, Bootstrap.v3.Datetimepicker.4.17.45, Bootstrap.v3.Datetimepicker.CSS.4.17.45, Select2-Bootstrap.1.2.0, Select2-Bootstrap-Theme.1.0.0.4, Twitter.Bootstrap.3.0.0 por si puede servir de algo.

Este es mi Modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="AccountEditModalLabel">
    <div class="modal-dialog modalAccountEdit" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3><strong>Contrato de renta<span class="accountname"></span></strong></h3>
            </div>

            <div class="modal-body">
                <div id="formContent">



                </div>


            </div>

        </div>
    </div>
</div>

Mediante esta función coloco el contenido en su interior:

function getAccionesContratos(id, action, accionDelContrato) {
        $("#formContent").html('<div align="center" id="imgCargandoInvers"> <img src="@Url.Content("~/Img/gifcargando.gif")"> </div>');

        $.ajax({
            type: "get",
            url: '@Url.Action("AccionesContratos", "Renta")',
            data: { id: id, accion: accionDelContrato },
            success: function (response) {
                $("#formContent").html(response);
            }

        });
    }

Y esta es la vista parcial que se sale de los límites de modal:

@using (Html.BeginForm("AccionesContratos", "Renta", FormMethod.Post, new { @Id = "form-accountedit-appt" }))
    {
        @Html.ValidationSummary(true)

        <div class="row col-md-12">

            <div class="col-md-6">

                <div class="form-group">
                    @Html.LabelFor(model => model.NumContrato)
                    @Html.TextBoxFor(model => model.NumContrato, new { @class = "form-control", @readonly = "readonly" })
                    @Html.ValidationMessage("NumContrato", new { @class = "text-danger" })
                </div>

            </div>

            <div class="col-md-6">

                <div class="form-group">
                    @Html.LabelFor(model => model.ImporteDepositoEntrada)
                    @Html.TextBoxFor(model => model.ImporteDepositoEntrada, new { @Id = "textImporteDeposEntradaModal", @class = "form-control", onchange = "cambiarImporteTotal();" })
                    @Html.ValidationMessage("ImporteDepositoEntrada", new { @class = "text-danger" })
                </div>

            </div>


        </div>

        <div class="row col-md-12">

            <div class="col-md-6">

                <div class="form-group">
                    @Html.LabelFor(model => model.CombEntradaLt)
                    @Html.TextBoxFor(model => model.CombEntradaLt, new { @Id = "textLtCombEntradaModal", @class = "form-control", onchange = "cambiosEnCombLtEntrada();" })
                    @Html.ValidationMessage("CombEntradaLt", new { @class = "text-danger" })
                </div>

            </div>

            <div class="col-md-6">

                <div class="form-group">
                    @Html.LabelFor(model => model.CombEntradaImporte)
                    @Html.TextBoxFor(model => model.CombEntradaImporte, new { @Id = "textImporteCombEntradaModal", @class = "form-control", onchange = "cambiarImporteTotal();" })
                    @Html.ValidationMessage("CombEntradaImporte", new { @class = "text-danger" })
                </div>

            </div>

        </div>

        <div class="row col-md-12">

            <div class="col-md-9">

                <div class="form-group">
                    @Html.LabelFor(model => model.Observaciones)
                    @Html.TextAreaFor(model => model.Observaciones, new { @class = "form-control" })
                    @Html.ValidationMessage("Observaciones", new { @class = "text-danger" })
                </div>

            </div>

            <div class="col-md-3">

                <div class="form-group">
                    @Html.LabelFor(model => model.ImporteTotal)
                    @Html.TextBoxFor(model => model.ImporteTotal, new { @Id = "textImporteTotalModal", @class = "form-control", @readonly = "readonly" })
                    @Html.ValidationMessage("ImporteTotal", new { @class = "text-danger" })
                </div>

            </div>

        </div>


        <div class="row col-md-12">
            <div class="pull-right">
                <div class="form-group">
                    <button class="btn btn-success" type="submit">Siguiente >></button>
                </div>
            </div>
        </div>

    }

2 respuestas 2

0

Puedes pasarle las propiedades que necesitas de 'height' y 'width' a través de 'jquery' para modificar las caracteísticas predefinidas de este tipo de contenedor. Si les obligas a que sea 'auto' y '100%' su tamaño máximo se ajustarán al contenido. Te dejo un ejemplo de código de como quedaría:

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto',
              height:'auto',
              'max-height':'100%',
              'max-width':'100%'
       });
});

En la versiones más antiguas de 'bootstrap' debería funcionar con este código:

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto',
              height:'auto',
              'max-height':'100%',
              'max-width':'100%'
       });
});

Si fuera mejor para tu desarrollo hacerlo a través de css creo recordar que la clase a modificar sería:

.autoModal.modal .modal-body{
    max-height: 100%;
    max-widht: 100%;
}

Comparto además un enlace a la documentación de 'bootstrap' sobre el funcionamiento de sus 'modals' por si te fuera de ayuda y/o utilidad: Bootstrap - Modals

0

Creo que te esta fallando es porque esta tomando 2 veces el layout, en la vista parcial, colócale el layout null

@{
    tuNombreDeLayout = null;
}

De esa manera ya te debería funcionar normal y adaptarse al tamaño de la ventana modal.

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.