2

Como renderizar o seguinte conteúdo sem que ele ultrapasse a largura limite do modal?

Exemplo atual da renderização:

inserir a descrição da imagem aqui

Código:

<div class="modal fade" style="width: 100% !important; height: 100% !important" id="modalTotalLocalOS" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button id="fecharModal" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Total de OS</h4>
            </div>
            <div class="modal-body" style="width: auto; height: auto">
         @Html.Partial("~/Views/GeradorDeConsultas/_Paginador.cshtml") 
                <table id="table_report"
                        class="table table-hover tabela-largura-fixa table-condensed "
                        data-bind="visible: Dados().length > 0">
                    <thead>
                        <tr data-bind="template: { name: 'template-table-header', foreach: Colunas }"></tr>
                    </thead>
                    <tbody data-bind="template: { name: 'template-table-body', foreach: Dados }">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Modal com os dados já renderizados:

<div class="modal-scrollable" style="z-index: 1060;"><div tabindex="-1" class="modal fade animated shake in modal-overflow" id="modalTotalLocalOS" aria-hidden="false" style="height: auto; margin-top: 0px;" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" id="fecharModal" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title">Total de OS</h4>
                <div class="row-fluid">
                    <div class="pull-right paginador consulta-views" data-bind="visible: Dados().length > 0">
                        <a title="Primeira Página" class="btn btn-minier disabled" id="btnConsultaPag1" href="#" data-bind="click: PrimeiraPagina, css: { disabled: Pagina() <= 1 }"><i class="icon-double-angle-left"></i></a>
                        <a title="Página anterior" class="btn btn-minier disabled" id="btnConsultaPag2" href="#" data-bind="click: PaginaAnterior, css: { disabled: Pagina() <= 1 }"><i class="icon-angle-left"></i></a>

    &nbsp;Pág.: 
        <input title="" class="mini-input-text tooltip-info" id="input-pagina" type="text" data-original-title='Digite o número da página e pressione a tecla "TAB"' data-bind="value: Pagina" data-trigger="focus" data-placement="bottom" data-rel="tooltip">
    De
        <span data-bind="text: QtdPaginas">1</span> &nbsp;

    <a title="Próxima Página" class="btn btn-minier disabled" id="btnConsultaPag3" href="#" data-bind="click: ProximaPagina, css: { disabled: Pagina() >= QtdPaginas() }"><i class="icon-angle-right"></i></a>
    <a title="Última Página" class="btn btn-minier disabled" id="btnConsultaPag4" href="#" data-bind="click: UltimaPagina, css: { disabled: Pagina() >= QtdPaginas() }"><i class="icon-double-angle-right"></i></a>
    &nbsp; (<span data-bind="text: QtdRegistros">4</span>&nbsp;Itens)

</div>

                </div>
            </div>

            <div class="modal-body">
                <div class="container-fluid" style="height: 480px !important; -ms-overflow-x: scroll !important; -ms-overflow-y: auto !important;">

                    <table class="table table-hover tabela-largura-fixa table-condensed " id="table_report" data-bind="visible: Dados().length > 0">
                        <thead>
                            <tr id="modalColunas" data-bind="template: { name: 'template-table-header', foreach: Colunas }">
        <td style="width: 50px; text-align: right;">OS  
        </td>

        <td style="width: 100px; text-align: left;">Anexo?  
        </td>

        <td style="width: 400px; text-align: left;">OS - Descrição  
        </td>

        <td style="width: 50px; text-align: right;">SS  
        </td>

        <td style="width: 250px; text-align: center;">Data de Encerramento - Data e Hora  
        </td>

        <td style="width: 300px; text-align: left;">Solicitante - Nome  
        </td>

        <td style="width: 300px; text-align: left;">Tipo de Solicitação - Descrição  
        </td>

        <td style="width: 300px; text-align: left;">Serviço - Descrição  
        </td>

        <td style="width: 300px; text-align: left;">Equipamento - Descrição  
        </td>

        <td style="width: 300px; text-align: left;">Tipo de Serviço - Descrição  
        </td>
</tr>
                        </thead>
                        <tbody id="modalDados" data-bind="template: { name: 'template-table-body', foreach: Dados }">
    <tr data-bind="click: $root.SelecionarLinha" data-key="0">

            <td style="text-align: right;">40671</td>

            <td style="text-align: left;">Sim</td>

            <td style="text-align: left;">DURATEX - GERAR NOVA DLL COM + 7 SOLICITANTES</td>

            <td style="text-align: right;"></td>
                <td style="text-align: center;"><span autocomplete="off" data-bind=' Format: "03/02/2014 10:09", param: { masc: "dd/MM/yyyy HH:mm" }' maxlength="16">03/02/2014 10:09</span></td>

            <td style="text-align: left;">IGOR TADEU TARÔCO</td>

            <td style="text-align: left;">PROJETO</td>

            <td style="text-align: left;">LICENÇA - DLL</td>

            <td style="text-align: left;">DURATEX S/A</td>

            <td style="text-align: left;">DURATEX - 7 LICENÇAS SOLICITANTES</td>
    </tr>


            <td style="text-align: right;">39125</td>

            <td style="text-align: left;">Não</td>

            <td style="text-align: left;">MULTIPLAN - SHOP. SAO CAETANO - IMPLANTAÇÃO DO SSA - OS GESTAO DO PROJETO</td>

            <td style="text-align: right;"></td>
                <td style="text-align: center;"><span autocomplete="off" data-bind=' Format: "30/03/2012 08:39", param: { masc: "dd/MM/yyyy HH:mm" }' maxlength="16">30/03/2012 08:39</span></td>

            <td style="text-align: left;">ALINE HIRAYAMA</td>

            <td style="text-align: left;">PROJETO</td>

            <td style="text-align: left;">GESTÃO DE PROJETO</td>

            <td style="text-align: left;">MULTIPLAN</td>

            <td style="text-align: left;">31/10/2011-SHOP.SÃO CAETANO-IMPL/DLL/MIG</td>
    </tr>

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>
1
  • class="table-responsive" antes do <table>
    – user94336
    2/01/2018 às 6:22

3 Respostas 3

0

Reescrevi a modal mostrando apenas como resolver o problema da tabela que excede o tamanho da modal.

Não é aconselhavel utilizar css inline e repetir styles tipo text-align:left. Quando você inclui o bootstrap no seu projeto ele vem com classes para fazer isso como por exemplo class="text-left".

Para resolver o seu problema você pode aumentar a modal usando modal-lg ou pode utilizar o overflow:auto; na sua tabela.

Exemplo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<a class="btn btn-primary" data-toggle="modal" href='#modal-id'>Abrir Modal</a>

<div class="modal fade" id="modal-id">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Total de OS</h4>
      </div>
      <div class="modal-body">
        <table class="table table-hover table-condensed table-striped">
          <thead>
            <tr>
              <td>OS</td>
              <td>Anexo?</td>
              <td>OS - Descrição</td>
              <td>SS</td>
              <td>Data de Encerramento - Data e Hora</td>
              <td>Solicitante - Nome</td>
              <td>Tipo de Solicitação - Descrição</td>
              <td>Serviço - Descrição</td>
              <td>Equipamento - Descrição</td>
              <td>Tipo de Serviço - Descrição</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>40671</td>
              <td>Sim</td>
              <td>DURATEX - GERAR NOVA DLL COM + 7 SOLICITANTES</td>
              <td></td>
              <td><span autocomplete="off" data-bind=' Format: "03/02/2014 10:09", param: { masc: "dd/MM/yyyy HH:mm" }' maxlength="16">03/02/2014 10:09</span>
              </td>
              <td>IGOR TADEU TARÔCO</td>
              <td>PROJETO</td>
              <td>LICENÇA - DLL</td>
              <td>DURATEX S/A</td>
              <td>DURATEX - 7 LICENÇAS SOLICITANTES</td>
            </tr>
            <td>39125</td>
            <td>Não</td>
            <td>MULTIPLAN - SHOP. SAO CAETANO - IMPLANTAÇÃO DO SSA - OS GESTAO DO PROJETO</td>
            <td></td>
            <td><span autocomplete="off" data-bind=' Format: "30/03/2012 08:39", param: { masc: "dd/MM/yyyy HH:mm" }' maxlength="16">30/03/2012 08:39</span>
            </td>
            <td>ALINE HIRAYAMA</td>
            <td>PROJETO</td>
            <td>GESTÃO DE PROJETO</td>
            <td>MULTIPLAN</td>
            <td>31/10/2011-SHOP.SÃO CAETANO-IMPL/DLL/MIG</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Sair</button>
      </div>
    </div>
  </div>
</div>

JSFiddle

Apenas Visualização

4
0

Bom dia, você está usando largura fixa na tabela isso faz com que os limites não sejam obedecidos

 <table class="table table-hover tabela-largura-fixa table-condensed " id="table_report" data-bind="visible: Dados().length > 0">

veja que vc deve ter em seu código algo que determina a largura fixa da tabela, suponho isso pela classe adicionada a tabela .tabela-largura-fixa

você também usa larguras fixas para as celulas da tabela

<td style="width: 50px; text-align: right;">OS </td>

para se adequar ao tamanho do modal, remova essas referencias a valores fixos e utilize se necessário .table-responsive

abraço

1
  • class="table-responsive" nice trick ^^
    – user94336
    2/01/2018 às 6:22
0

Brother.. coloca no modal um overflow: hidden e na table max-width: 100%, acredito que isso resolve o problema.. porem para evitar um scroll-lateral vc vai precisar deixar essa table responsiva!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .