I have a generic bootstrap modal window that will open several views. The problem is that each of them will have a different screen size and currently, my settings stay fixed (style="width: 800px; height: 500px;") ... Is there any way I can change the two parts of the code to meet this requirement?
(Generic Modal where all Views are opened)
<div class="modal fade modal-primary" id="modalGenerica" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered" style="width: 800px; height: 500px;">
<div class="modal-content">
<div id="contentModal"></div>
</div>
</div>
</div>
(Example of a view with parts of the Modal structure)
@model Retaguarda.Application.ViewModels.CustomerViewModel
@{
ViewData["Title"] = "Register new Customer";
Layout = null;
}
<div>
<form asp-action="Create">
@Html.AntiForgeryToken()
<div class="modal-shadow">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title text-center"> @ViewData["Title"] </h4>
</div>
<div class="form-horizontal">
<vc:summary />
<div class="panel-body">
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="Email" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="BirthDate" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="BirthDate" class="form-control" />
<span asp-validation-for="BirthDate" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<select data-plugin="selectpicker" id="mySelect2" data-style="btn-primary">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-success" />
<a asp-action="Index" class="btn btn-info">Back to List</a>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script>
//Resolve problema de exibição no Modal
$('#mySelect2').selectpicker({
dropdownParent: $('#modalGenerica')
});
</script>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}