How to increase the width of table columns and adjust the width of the modal window of JavaScript

Question

How to increase the width of table columns and adjust the width of the modal window of JavaScript

Navigation

#1 by (0 votes)

0

I need to adjust two things in a Modal Bootstap / javascript window:

1 - The width and height of the modal window; 2 - The table column names are breaking to a new line and deforming the appearance. I need to make each column adjust according to the names.

Would anyone know how to help me?

<div class="modal fade" data-backdrop="static" id="pessoaHistory" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Histórico de Alterações</h4>
            </div>
            <div class="modal-body scoll-tree" style="overflow-x: auto;">
                <p id="pessoaHistoryData"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

@section scripts
    {
    <script type="text/javascript">
        $(".remove-row").on("click", function () {
            var pessoaId = $(this).data('id');
            $.ajax({
                url: "/pessoa-gerenciamento/pessoa-historico/" + pessoaId,
                type: "GET",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                cache: false
            }).done(function (data) {
                console.log(data);
                var formatHtml = "<table class='table table-striped'>";
                formatHtml += "<thead><th>Ação</th><th>Quando</th><th>Código</th><th>Natureza</th><th>Nome/Razão Social</th><th>Apelido/Nome Fantasia</th><th>Nascimento/Abertura</th><th>Sexo</th><th>Estado Civil</th><th>Pelo Usuário</th></thead>";

                for (var i = 0; i < data.length; i++) {
                    var change = data[i];
                    formatHtml += "<tr>";
                    formatHtml += "<td>" + change.acao + "</td>";
                    formatHtml += "<td>" + change.quando + "</td>";
                    formatHtml += "<td>" + change.id + "</td>";
                    formatHtml += "<td>" + change.natureza + "</td>";
                    formatHtml += "<td>" + change.nomeCompletoRazaoSocial + "</td>";
                    formatHtml += "<td>" + change.apelidoNomeFantasia + "</td>";
                    formatHtml += "<td>" + change.nascimentoAbertura + "</td>";
                    formatHtml += "<td>" + change.sexo + "</td>";
                    formatHtml += "<td>" + change.estadoCivil + "</td>";
                    formatHtml += "<td>" + change.quem + "</td>";
                    formatHtml += "</tr>";
                }
                formatHtml += "</table>";
                $("#pessoaHistoryData").html(formatHtml);
            });
        });
    </script>

javascript asp.net

asked by anonymous 21.04.2018 / 02:22

1 answer

Update a value within a function Bottom of the transparent button on tkinter

score 0 · Accepted Answer

To increase the Bootstrap modal size, you can usually use css, for example:

In the code below, look at the class I entered in the second DIV

<div class="modal fade" tabindex="-1">
 <div class="modal-dialog bigModal"> //ATENÇÃO À CLASSE bigModal
  <div class="modal-content">
    <div class="modal-header">
      seu header aqui
    </div>
    <div class="modal-body">
          seu body aqui
    </div>
    <div class="modal-footer">
      seu footer aqui
    </div>
  </div>
 </div>
</div>

And then you add the bigModal class to a css file:

.bigModal{
   width: 85%
   height: 500px;
}

Or you can use the 'in-line' style:

...

<div class="modal-dialog" style="width: 85%; height: 500px;">

...

But anyway strongly recommend that you do it on a separate css sheet to make it easier to maintain the code

On the columns, Bootstrap itself already arranges their width according to their content. When you increase the width of the modal as a whole, I believe your problem will be solved.

I hope to have helped, a hug