Div overcoming Modal width limit

Question

Div overcoming Modal width limit

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

2

How to render the following content without it exceeding the modal border width?

Current Rendering Example:

Code:

<divclass="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 with data already rendered:

<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>

html css twitter-bootstrap

asked by anonymous 14.10.2015 / 20:46

3 answers

Dependency Injection Composition and Injection [closed] Help to fill jTable

score 0 · Answer 1

I rewrote the modal showing only how to solve the problem of the table that exceeds the modal size.

It is not advisable to use css inline and repeat styles type text-align:left . When you include the bootstrap in your project it comes with classes to do this such as class="text-left" .

To solve your problem you can either increase the modal using modal-lg or you can use overflow:auto; in your table.

Example:

<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><scriptsrc="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

Preview Only

score 0 · Answer 2

Good morning, you are using fixed width in the table that causes the limits are not obeyed

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

See that you must have something in your code that determines the fixed width of the table, I suppose this is by the class added to the table .tabela-largura-fixa

You also use fixed widths for table cells

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

To fit the modal size, remove these references from fixed values, and use if necessary .table-responsive

Embrace

score 0 · Answer 3

0

Brother .. puts modal overflow: hidden and table max-width: 100% , I believe this solves the problem .. however to avoid a side scroll you will need to leave this table responsive!

01.12.2018 / 01:27