2
How to render the following content without it exceeding the limit width of modal?
Current example of rendering:
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>
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>
<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>
(<span data-bind="text: QtdRegistros">4</span> 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>
class="table-responsive"
before the<table>
– user94336