Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Help-me (desafio)

Oi Galera, Estou com um desafio (desesperada para resolver) e não estou conseguindo sanar. Assim, venho pedir a ajuda de vocês. Tenho uma View .cshtml que possui uma área de pesquisa, e uma área de resultado, este resultado retorna uma lista de dados em uma table. Porém, dependendo do filtro que aplico e dos registros que aparecem na tela, esta minha tabela "estoura" as colunas para a direita. Quando coloco a resolução no browser em 90%, fica tudo perfeito, mas quando coloco em 100%, as ultimas colunas sobrepoem inclusive o painel de fundo (este fica em 90%). Estou perdida neste problema e já não tenho mais "cara" para continuar com esta falha na exibição da minha consulta. Podem me dar alguma dica ou orientação, por favor?

As colunas desta tabela, são montadas a partir do banco de dados (monta 13 colunas dinamicamente, até então, formatadas direitinhas também. Mas dependendo do registro que é exibido na lista, a tabela estoura o tamanho previsto para a largura desta tabela e "estoura" o limite do painel branco de fundo. (somente quando a exibição do browser está em 100%. Em 90% fica direitinha)

Eu tentei forçar o tamanho da table em 90%, mas nada aconteceu.

4 respostas

Incluindo parte do código. Código CSS:

fieldset {
    margin: 20px auto !important;
    max-width: 90% !important;
} 
table .table-header {
    background-color: #176DAD;
    color: #fff;
}
table .table-width-fixed {
  background-color: #f9f9f9;
  table-layout: fixed;
  width: 90%  !important;
}
.trLinha {
    cursor: pointer;
}
 .trLinha:hover td {
        background-color: #82C0EE;
    }
.filtro {
    width: 100%;
    background-color: #EAEAFF;
}
 .filtro td {
        width: 110px;
    }
    .filtro th {
        text-align: center;
    }

Código CSHTML:

<div data-ng-app="appCadastro" style="display: none;" id="divPrincipalCadastro">

    <div data-ng-controller="CadastroController as self">

        @*Tabela de item*@
        <form id="FormList" name="FormList" action="Cadastro" method="post" onsubmit="return false;">
            <input type="hidden" id="tabela" name="tabela" value="@Model.Nome" />
            <fieldset>
                <legend><span>@ViewBag.Title</span> </legend>

                <!-- aqui é a tabela que estoura-->
                <div class="row ">
                    <table class="table table-width-fixed">
                        <thead>
                            <tr>
                                @foreach (var campo in @Model.Campos)
                                {
                                    if (campo.ExibeEmTabela && !campo.Chave)
                                    {
                                        Html.ViewContext.Writer.Write(String.Concat("<th>", campo.Title, "</th>"));
                                    }
                                }
                                @if (@Model.Update)
                                {
                                <th></th>
                                }
                                @if (@Model.Delete)
                                {
                                <th></th>
                                }
                            </tr>
                        </thead>

                        <tbody>
                            <tr data-ng-repeat="dado in self.dados" data-ng-show="!dado.Excluido" >
                                @foreach (var campo in @Model.Campos)
                                {
                                    if (campo.ExibeEmTabela && !campo.Chave)
                                    {

                                        if (campo.ForeignKey)
                                        {
                                            Html.ViewContext.Writer.Write(String.Concat("<td> {{ dado.", campo.FieldName, ".", campo.Cadastro.DisplayColumn, " }}", "</td>"));
                                        }
                                        else
                                        {
                                            if (campo.Type.IndexOf("List") == -1)
                                            {
                                                Html.ViewContext.Writer.Write(String.Concat("<td>{{ self.GetValue(dado, '", campo.FieldName, "', '", campo.Type, "') }}</td></td>"));
                                            }
                                            else
                                            {
                                                if (campo.Cadastro.Campos.Where(c => c.Chave && c.ChaveTabela == @Model.Nome).Count() > 0)
                                                {
                                                    string chaveCampo = campo.Cadastro.Campos.Where(c => c.Chave && c.ChaveTabela == @Model.Nome).FirstOrDefault().ChaveCampo;
                                                    Html.ViewContext.Writer.Write(
                                                        String.Concat("<td><button class=\"btn btn-primary\" ng-click=\"self.pagina(dado, '", campo.Name, "', '", chaveCampo, "')\">", campo.Title, "</button></td>")
                                                    );

                                                }
                                                else
                                                {
                                                    Html.ViewContext.Writer.Write(
                                                        String.Concat("<td><button class=\"btn btn-primary\" data-ng-click=\"self.MuitosMuitos('modal", campo.Name, "', '", campo.FieldName, "', '",
                                                        campo.GetKeyName(), "', '", campo.Title, "', dado, '", campo.Name, "')\">", campo.Title, "</button></td>")
                                                    );
                                                }
                                            }
                                        }
                                    }
                                }
                                @if (@Model.Update)
                                {
                                <td>
                                    <button class="btn btn-primary" data-ng-click="self.Editar(dado);">
                                        @Model.getText("editar", @Model.Nome)
                                    </button>
                                </td>
                                }

                                @if (@Model.Delete)
                                    {
                                <td>
                                    <button class="btn btn-primary" data-ng-click="self.excluir(dado)">Excluir</button>
                                </td>
                                }
                            </tr>

                        </tbody>
                    </table>
                </div>
            </fieldset>
solução!

Vanessa, achei uma coisa no seu código que pode te ajudar. Na linha do CSS a seguir, você quer alterar a table que contenha a classe table-width-fixed.

table .table-width-fixed {
  /*...*/
}

Porém, este código altera os filhos de toda table que tenham a classe table-width-fixed. Para corrigir, basta remover o espaço, indicando que a sua table tem a classe indicada.

table.table-width-fixed {
  /*...*/
}

Outra coisa que reparei é que a classe table-header declarada no seu CSS nunca é utilizada no seu HTML.

Faça estes testes e, se o problema persistir, volte aqui e vemos mais detalhadamente o problema!

Se conseguir resolver e for com nossa ajuda, lembre-se de marcar aqui a resposta que te ajudou como solução do tópico, para que outros com dúvidas semelhantes possam voltar a estudar mais rapidamente também =)

Um abraço!

Muito obrigada. Funcionou! Era isso mesmo.