Div exceeding Modal width limit

Asked

Viewed 4,204 times

2

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

Current example of rendering:

inserir a descrição da imagem aqui

Code:

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

  • class="table-responsive" before the <table>

3 answers

0

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

0

Good morning, you are using fixed width in the table this makes 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 in your code something that determines the fixed width of the table, I suppose by the class added to the table .tabela-largura-fixa

you also use fixed widths for the table cells

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

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

hug

  • class="table-responsive" nice Trick ^^

0

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

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

To solve your problem you can increase the modal using modal-lg or you can use the overflow:auto; on 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>
<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

Preview Only

Browser other questions tagged html css twitter-bootstrap

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