My modal is decreasing the size of the page horizontally when opened, closing it returns the page to normal, it is something that is strange.
Here is the code:
<div class="row" align="right">
<strong>Posição: <?php echo date("d/m/Y H:i:s", strtotime($rslt_query_time['data'])); ?></strong>
</div>
<div class="row" align="center">
<div class=" panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">MPF - Gestão de Convênios</h3>
</div>
<table style="width: 100%" class="table table-hover table-bordered">
<thead>
<tr style="cursor:default;">
<th style="text-align: center; width: 85px; vertical-align:middle">Convênio</th>
<th data-original-title="Agência Centralizadora" data-toggle="tooltip" data-placement="top" data-container="body" style="text-align: center; width: 85px; vertical-align:middle">Ag. Ctrl.</th>
<th style="text-align: left; vertical-align:middle">Nome</th>
<th style="text-align: center; width: 85px; vertical-align: middle;" >Situação</th>
<th data-original-title="Bloqueio de Contratação" data-toggle="tooltip" data-placement="top" data-container="body" style="text-align: center; width: 85px; vertical-align:middle">Bloqueio</th>
</tr>
</thead>
<tbody>
<?php do{?>
<tr style="cursor:pointer" id="<?php echo $rslt_query['id'];?>" onclick="contato(this)">
<td style="text-align: center;"><?php echo $rslt_query['id']; ?></td>
<td style="text-align: center;"><?php echo $rslt_query['centralizadora']; ?></a></td>
<td style="text-align: left;"><?php echo $rslt_query['nome']; ?></td>
<?php if($rslt_query['situacao'] == 0){
echo "<td style=\"text-align: center;\" data-original-title=\"Suspenso\" data-toggle=\"tooltip\" data-placement=\"top\" data-container=\"body\">
<img src=\"img/error-icon_32px.png\" alt=\"Suspenso\" /></td>";
}else if($rslt_query['situacao'] == 1){
echo "<td style=\"text-align: center;\" data-original-title=\"Ativo\" data-toggle=\"tooltip\" data-placement=\"top\" data-container=\"body\" >
<img src=\"img/select-icon_32px.png\" alt=\"Ativo\" /></td>";
}?>
<?php
$txt_temp = "";
if ( $rslt_query['A'] || $rslt_query['B'] || $rslt_query['C'] || $rslt_query['D'] || $rslt_query['E'] || $rslt_query['F']){
if($rslt_query['A'] == 1){$txt_temp .= "...<hr>";}
if($rslt_query['B'] == 1){$txt_temp .= "...<hr>";}
if($rslt_query['C'] == 1){$txt_temp .= "...<hr>";}
if($rslt_query['D'] == 1){$txt_temp .= "...<hr>";}
if($rslt_query['E'] == 1){$txt_temp .= "...<hr>";}
if($rslt_query['F'] == 1){$txt_temp .= "...<hr>";}
}
$txt_temp .= "";
?>
<td style="text-align: center;" <?php if($rslt_query['A'] || $rslt_query['B'] || $rslt_query['C'] || $rslt_query['D'] || $rslt_query['E'] || $rslt_query['F']){ echo "data-content=\"".$txt_temp."\" data-html=\"true\" rel=\"popover\" data-placement=\"top\" data-toggle=\"popover\" data-original-title=\"Motivo\" data-trigger=\"hover\" data-container=\"body\" "; }?>>
<?php if($rslt_query['A'] || $rslt_query['B'] || $rslt_query['C'] || $rslt_query['D'] || $rslt_query['E'] || $rslt_query['F']){ ?><img src="img/alert-icon_32px.png" alt="Suspenso" />
<?php }?>
</td>
</tr>
<?php }while($rslt_query = mysql_fetch_assoc($query_db)); ?>
</tbody>
</table>
</div>
<?php $rslt_query = mysql_data_seek($query_db, 0);
do{ ?>
<div id="modal-<?php echo $rslt_query['id'];?>" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><?php echo $rslt_query['nome']; ?></h4>
</div>
<div class="modal-body">
<p style="text-align:left;">
<!-- <strong>Nome Convenio:</strong> <?php echo $rslt_query['nome']; ?><br /> -->
<strong>Nº Convênio:</strong> <?php echo $rslt_query['id']; ?><br />
<strong>MCI:</strong> <?php echo $rslt_query['mci']; ?><br /><br />
<strong>Gestor do Convênio:</strong> <?php echo $rslt_query['nome_func']; ?><br />
<strong>Chave:</strong> <?php echo strtoupper($rslt_query['chave_func']); ?><br /><br />
<strong>Responsável Financeiro:</strong> <?php echo $rslt_query['resp_fin_nome']; ?><br />
<strong>Telefone:</strong> <?php echo $rslt_query['resp_fin_fone']; ?><br /><br />
<strong>Responsável Técnico:</strong> <?php echo $rslt_query['resp_tec_nome']; ?><br />
<strong>Telefone:</strong> <?php echo $rslt_query['resp_tec_fone']; ?><br /><br />
<strong>Fluxo agência:</strong><br/> <?php echo nl2br($rslt_query['fluxo_agencia_propria']); ?><br /><br />
<strong>Fluxo outras agências:</strong><br/> <?php echo nl2br($rslt_query['fluxo_outras_agencias']); ?> <br />
</p>
</div>
<div class="modal-footer">
<?php if((isset($_SESSION['prefDep']) && $rslt_query['centralizadora'] == $_SESSION['prefDep']) || (isset($_SESSION['prefDep']) && $_SESSION['prefDep'] == "8501") ){
echo "<form class=\"form-inline\" id=\"id".$rslt_query['id']."\" action=\"form_convenio_alterar.php\" method=\"post\">";
echo "<input type=\"hidden\" name=\"id\" value=\"" . $rslt_query['id'] . "\">";
echo "</form>";
echo "<button type=\"button\" class=\"btn btn-danger\" onClick=\"document.getElementById('id".$rslt_query['id']."').submit()\" >Editar</button>";
}
?>
<button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<?php
}while($rslt_query = mysql_fetch_assoc($query_db));
?>
The CSS I use is what Bootstrap makes available without any modification.
The body looks like this:
<body style="width: 800px; overflow-y:scroll; margin: 0 auto; padding-top: 70px; padding-bottom: 30px;">
And here's what happens:
