0

Tengo un sitio que quiero hacerlo responsive, pero al disminuir el tamaño de pantalla, logro que se oculte el menú lateral, pero el espacio que deja queda en blanco y "bloquea" para que el contenido lo ocupe, perdiendo espacio e impidiendo que se ajuste responsivamente. He tratado corregir cambiando los parámetros de nav y container pero no lo logro corregir.

Adjunto pantallazo para que se entienda el problema

Pantalla tamaño web Pantalla completa Pantalla móvil Pantalla responsiva

Adjunto código de una de las páginas y el css que hicieron.

.main-container {
    margin-left: 1px;
    margin-top: 70px;
}

.btn-index {
    min-height: 150px;
}

.card-header {
    font-size: 18px;
}

.my-form-control-xs {
    height: 27px !important;
}


/* Inicio Loader */
.bg_load {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #EEE;
    z-index: 1131
}

.loader {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1132;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 5px solid #f3f3f3;
    border-top: 7px solid #0061f2;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bg_load > h1 {
    font-size: 40px;
    position: absolute;
    text-align: center !important;
    margin: 0 auto;
    width: 98%;
    top: 65%;
}
/* Fin Loader */

/* placeholder para campos sin valor */
.alertplaceholder::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red;
    opacity: 1; /* Firefox */
    font-size: 0.8em;
    font-style: italic;
  }
  
  .alertplaceholder:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: red;
   font-size: 0.8em;
   font-style: italic;
  }
  
  .alertplaceholder::-ms-input-placeholder { /* Microsoft Edge */
   color: red;
   font-size: 0.8em;
   font-style: italic;
  }
  /* fin placeholder */

  .pendiente {
    color: red;
    font-size: 0.8em;
    font-style: italic;
    font-weight: normal;
  }
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

    <link rel="shortcut icon" href="../../Content/assets/img/favicon.png" />

    <!-- *** Css Styles *** -->

    <!-- requerido para esconder la parte nativa en SP -->
    <link href="../../Content/css/stylesSP.css" rel="stylesheet" />
    <!-- estilos del template -->
    <link href="../../Content/css/stylesTemplate.css" rel="stylesheet" />
    <!-- estilos de la App -->
    <link href="../../Content/css/stylesApp.css" rel="stylesheet" />

    <!-- Icons -->
    <link href="../../Content/icons/font-awesome/css/fontawesome.min.css" rel="stylesheet" />

    <%--    <link href="../../Scripts/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" />--%>
    <%--<link href="../../Scripts/plugins/select2/css/select2.min.css" rel="stylesheet" />--%>
    <%--<link href="../../Scripts/plugins/dataTable/css/datatables.min.css" rel="stylesheet" />--%>
    <%--<link href="../../Scripts/plugins/bootstrap-tags/bootstrap-tagsinput.css" rel="stylesheet" />--%>
    <%--<link href="../../Scripts/plugins/JsTree/dist/themes/default/style.css" rel="stylesheet" />--%>


    <!-- Main Csom -->
    <SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />


    <!-- **** Javascript Files **** -->
    <script src="../../Scripts/plugins/jquery/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="../../Content/bootstrap/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="../../Content/icons/font-awesome/js/all.min.js" type="text/javascript"></script>
    <script src="../../Scripts/plugins/knockoutJs/knockout.js" type="text/javascript"></script>
    <script src="../../Scripts/plugins/koTemplate/koTemplatel.min.js" type="text/javascript"></script>
    <script src="../../Scripts/plugins/spPlus/sharepointplus.min.js" type="text/javascript"></script>
    <script src="../../Scripts/plugins/spMagic/SPJ.js" type="text/javascript"></script>
    <script src="../../Scripts/plugins/jquery-loading-overlay/loadingoverlay.min.js" type="text/javascript"></script>
    <script src="../../Scripts/utils/myHelpers.js" type="text/javascript"></script>

    <script src="../../Scripts/modulos/repositorios/myUsuarioRepo.js" type="text/javascript"></script>
    <script src="../../Content/js/scripts_template.js" type="text/javascript"></script>
    <script src="../../Scripts/modulos/home/index.js" type="text/javascript"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>



</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <body class="nav-fixed">

        <!-- ko template : { name: 'header', template: 'master' } -->
        <!-- /ko -->

        <div id="layoutSidenav_content">
            <main>

                <%-- Inicio Contenido Dinamico --%>

                <div class="container-fluid main-container">

                    <div class="row">
                        <div class="col-sm-12">
                            <ol class="breadcrumb mt-2 mb-4">
                                <li class="breadcrumb-item">
                                    <a href="/sites/ControlHoras/SistemaHH/SiteAssets/Pages/Home/Index.aspx">Home
                                    </a>
                                </li>
                                <li class="breadcrumb-item active">Gestión de Horas</li>
                            </ol>
                        </div>
                    </div>

                    <div class="card main-card">
                        <div class="card-header">Módulos del Sistema</div>
                        <div class="card-body">

                            <div class="row">
                                <div class="col-sm-12 col-md-4 col-lg-4 pr-4 pl-4 pt-4 pb-4">
                                    <a href="/sites/ControlHoras/SistemaHH/SiteAssets/Pages/Cliente/Index.aspx" class="btn btn-green btn-block btn-index">
                                        <i class="fas fa-address-book fa-3x text-center text-light"></i>
                                        <h3 class="mt-4 text-light">Clientes</h3>
                                    </a>
                                </div>
                                <div class="col-sm-12 col-md-4 col-lg-4 pr-4 pl-4 pt-4 pb-4">
                                    <a href="/sites/ControlHoras/SistemaHH/SiteAssets/Pages/CentroCosto/Index.aspx" class="btn btn-green btn-block btn-index">
                                        <i class="fas fa-project-diagram fa-3x text-center text-light"></i>
                                        <h3 class="mt-4 text-light">Centros de Costo</h3>
                                    </a>
                                </div>
                                
                                <div class="col-sm-12 col-md-4 col-lg-4 pr-4 pl-4 pt-4 pb-4">
                                    <a href="/sites/ControlHoras/SistemaHH/SiteAssets/Pages/HojaTiempo/Index.aspx" class="btn btn-green btn-block btn-index">
                                        <i class="fas fa-tasks fa-3x text-center text-light"></i>
                                        <h3 class="mt-4 text-light">Hoja de Tiempo</h3>
                                    </a>
                                </div>
                               
                            </div>

                        </div>
                    </div>

                </div>

                <%-- Fin Contenido Dinamico --%>
            </main>
        </div>

        <!-- ko template : { name: 'footer', template: 'master' } -->
        <!-- /ko -->
    </body>
</asp:Content>

4
  • 1
    Bienvenido a StackOverflow en español. Sería excelente si pudieras adjuntar un ejemplo mínimo verificable del código en la pregunta. Para familiarizarte con el sitio, puedes leer "Cómo preguntar" y hacer el recorrido de bienvenida para entender cómo funciona. Commented el 24 ene. 2022 a las 11:35
  • Bienvenido @Andrew! Edita la pregunta y añade el código HTML y CSS para poderte ayudar, si no va a ser imposible
    – msalinas
    Commented el 24 ene. 2022 a las 12:03
  • gracias msalinas, acabo de adjuntar código no se si sirve con esa información
    – Andrew
    Commented el 24 ene. 2022 a las 17:58
  • Yo no veo que carges el css de bootstrap por ninguna parte. Parece que solo uses plugins para el y su javascript, pero no su css. Tampoco especificas que version de bootstrap supuestamente estás usando, y por último, si realmente estas usandolo yo no agregaria ningun CSS más, o los mínimos posibles, pues el ya se encarga de la parte responsive por si solo y quizás ahi tienes el problema.
    – masterguru
    Commented el 8 feb. 2022 a las 20:59

2 respuestas 2

0

A simple vista creo que solo estás ocultando la DIV del Menú, pero el menú está dentro de un elemento padre que sigue manteniendose visible aunque su interior (menù) desaparezca...

Para evitar esto usa una MEDIA QUERY para que cuando estés en dispositivos móviles se oculte también el elemento padre que contiene al menú y ponle los margin y padding a 0 en el media query.

Ademas checa bien el nav-fixed en el body, creo que eso hace que el elemento que contiene al menu siempre este visible

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 24 ene. 2022 a las 18:19
0

recomiendo usar em o rem en lugar de pixeles, es para adaptarlo mejor a la gran mayoría de dispositivos y resoluciones a las que tú página se vea afectada, es solo una recomendación, quizás solo estes estableciendo esas medidas de forma directa para algo más especifico, sobre el responsive concuerdo con los Media Query, te servirá para que al cambiar de resolución se adapte una nueva sin tener que hacer mucho code en las líneas originales, es más para darle esos retoques que se adapten a gran parte de medidas, suerte estimado.

1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 24 ene. 2022 a las 19:45

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.