Modal Boostrap reduces site body size

Question

Man modal is decreasing the size of the page horizontally when opened, when closing it goes back to normal, it is something that is strange.

Here 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&ccedil;&atilde;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">&times;</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&ordm; Conv&ecirc;nio:</strong> <?php echo $rslt_query['id']; ?><br />
                                    <strong>MCI:</strong> <?php echo $rslt_query['mci']; ?><br /><br />
                                    <strong>Gestor do Conv&ecirc;nio:</strong> <?php echo $rslt_query['nome_func']; ?><br />
                                    <strong>Chave:</strong> <?php echo strtoupper($rslt_query['chave_func']); ?><br /><br />
                                    <strong>Respons&aacute;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&aacute;vel T&eacute;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&ecirc;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 provides, without any modification.

The body is like this:

<body style="width: 800px; overflow-y:scroll; margin: 0 auto; padding-top: 70px; padding-bottom: 30px;">

And here’s what happens:

Answer 1

I managed to solve my problem, I do not know if in the future it can cause me some damage, however, for now it is acceptable

In the archive bootstrap.js on line 964 In the part of Function

Modal.prototype.show

There’s this part

this.setScrollbar()

I commented her and my problem was solved, every time the modal is open occurs the insertion of a padding-rigth: 15px in the body, I found the solution by looking at the code with the Opera code inspector!

Answer 2

Good afternoon guys, I solved the problem by adding:

<style>
    body {
        padding-right: 0 !important;
    }
</style>

the previous reply from the friend helped me a lot. thanks very much.