Entrar Ainda não tem acesso?
3
respostas

Não sei resolver....

por Carlos Magno Goiabeira Souza
| 81k xp | 61 posts
Gerente de Projetos

Oi Galera, Estou com um desafio (desesperada para resolver) e não estou conseguindo sanar. Assim, venho pedir a ajuda de vocês. O problema é visual na View. 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 sobre o painel de fundo. Quando coloco a resolução no browser em 90%, fica tudo perfeito, mas quando coloco em 100%, as ultimas colunas sobrepoem para a direita 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.

3 respostas
por Wagner Souza
| 55k xp | 51 posts
Front-end developer

Oi Vanessa,

Pode nos fornecer um screenshot do problema que está tendo? E também o código que está usando para renderizar a table?

Assim fica mais fácil de ajudar.

Att.

por Carlos Magno Goiabeira Souza
| 81k xp | 61 posts
Gerente de Projetos

Oi Wagner, 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; }
por Carlos Magno Goiabeira Souza
| 81k xp | 61 posts
Gerente de Projetos

E o 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>