Is it possible to change the css3 of the table (in Jqgrid) to change the positioning on the page?

Asked

Viewed 79 times

0

It is possible to change the table positioning on the Jqgrid library page?

When the Jqgrid table returns too much data, it creates a vertical scroll bar.

When going down to view the last records the table goes behind the menu but does not go back to the top. Only the table, the rest of the div goes, as filter fields with 'inpunt' and 'select', this goes right behind the top. I’ve tried Z-index at the top. See the image below:

inserir a descrição da imagem aqui

HTML:

@{
    ViewBag.Title = "Index";
}

<link href="~/Areas/Representantes/Script/consultaentrega/ConsultaEntregaEstilo.css" rel="stylesheet" />
<br /><br />
<div class="alinaresquerda">

    <center><img src="~/Content/imagem/logo.png" id="recurso" /></center>
    <div class="bs-callout bs-callout-primary">
        <center><h4>CONSULTA ENTREGA</h4></center>
    </div>


    <input type="hidden" id="sessaoRepresentante" value="@ViewBag.representante" />

    <fieldset class="grupo">
        <div class="campo">
            <label for="nome">Representante</label>
            <select class="form-control" name="codigoRepresentante" id="representante"></select>
        </div>
    </fieldset>



    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
    <hr />


</div>
<br /><br />
<script src="~/Areas/Representantes/Script/consultaentrega/consultaentregalista.js"></script>

JS:

    var url = "/Representantes/ConsultaEntrega/lista";

$(document).ready(function () {

    //Verifica permissão 
    var recurso = "TELA_REPRESENTANTE_CONSULTA_ENTREGA";
    VerificaPermissao(recurso); 

    var representante = $("#sessaoRepresentante").val();

    if ($("#sessaoRepresentante").val() != "0") {
        $("#representante").prop("disabled", true);
    }

    CarregaRepresentante(representante);    

    var $table = $("#jqGrid");

    $table.jqGrid({
        url: url,
        datatype: 'json',
        mtype: 'GET',  
        postData: {
            representante: function () { return jQuery("#representante option:selected").val(); }         
        }, 
       colModel: [
           { label: 'PEDIDO', name: 'D2_PEDIDO', width: 60 },
           { label: 'DOC', name: 'F2_DOC', width: 80 },
           { label: 'SERIE', name: 'F2_SERIE', width: 40 },
           { label: 'CLIENTE', name: 'F2_CLIENTE', width: 60 },
           { label: 'LOJA', name: 'F2_LOJA', width: 50 },
           { label: 'ZRAZAO', name: 'F2_ZRAZAO', width: 250 },
           { label: 'CHVNFE', name: 'F2_CHVNFE', width: 320 },
           { label: 'CODTRA', name: 'CODTRA', width: 60},
           { label: 'NOMETRA', name: 'NOMETRA', width: 120 },
           { label: 'NOMERED', name: 'NOMERED', width: 80 },
           { label: 'EMISSAO', name: 'F2_EMISSAO', width: 80 },
           { label: 'ZDTSAID', name: 'F2_ZDTSAID', width: 80 },
           { label: 'GWU_DTPENT', name: 'GWU_DTPENT', width: 80 },
           { label: 'GWU_DTENT', name: 'GWU_DTENT', width: 80 }


        ],

         viewrecords: true,
            rowNum: 20,
            rowList: [20, 40, 100],
            height: "auto",
            //height: 400,
            emptyrecords: "Nenhum Registro",
            loadtext: "Buscando e carregando...",
            //rowNum: 20,
            pager: "#jqGridPager",
            loadonce: true

    });


    $('select#representante').on("change", function () {

        var id = $("#representante").val();
        $("#nome").val('');
        $("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid');
    });


    function CarregaRepresentante(representante) {
        $.ajax({
            url: "/Gerenciamento/UsuarioExterno/SelecionarRepresentante",
            async: false,
            success: function (data) {

                $("#representante").empty();

                if (representante == 0) {
                    $("#representante").append('<option value="" disabled selected hidden>Selecione...</option>');
                }

                $.each(data, function (i, element) {
                    if (representante > 0) {
                        if (representante == element.codigoRepresentante) {
                            $("#representante").append('<option  value=' + element.codigoRepresentante + ' selected >' + element.nome + '</option>');
                        }
                    }
                    $("#representante").append('<option value=' + element.codigoRepresentante + '>' + element.nome + '</option>');
                });
            }
        });
    }



});

Top CSS (generated by the framework):

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
@media (min-width: 768px)
.navbar-fixed-top, .navbar-fixed-bottom {
    border-radius: 0;
}
.navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}
html jquery css3 jqgrid

  • Danielle puts the CSS that contains the Top class. Your problem is there most likely.

  • this top {<Nav class="navbar navbar-inverse navbar-Fixed-top">} was generated by the Asp.net framework in a navbar.Less file with more than 500 lines. So I don’t know if it’s cool to post it by size. But I put in the Question the CSS and Class that I think it calls.

  • In .navbar-fixed-top place position:relative and z-index: 1031 to make a test. Basically an element that does not have a position defined will not recognize the z-index. If you answer tell me that I give a more detailed answer.

  • Thank you Hugo, I got it after a lot of tinkering. I’ll go straight to the ui.jqgrid.css file or z-index

1 answer

1


I imagined it. I changed it in the library. In the ui.jqgrid.css file I changed to :

.ui-jqgrid {
    position: relative;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 0;  // de 1 para 0
}

Browser other questions tagged html jquery css3 jqgrid

You are not signed in. Login or sign up in order to post.