Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Thyago Brasil

Wrap para Internet Explorer 6

Por , em .NET

Recommended Posts

Thyago Brasil    0

Thyago Brasil
Postado

Boa tarde Galera,

 

Eu estava antes com um problema no meu gridview onde ele joga os textos pra baixo quando não da certo o tamanho da coluna. Vejam como está...

 

Imagem Postada

 

O que eu queria é que a coluna se ajustasse conforme o conteúdo ou que ficasse apenas na coluna JOÃO DA SIL por exemplo e não aparecesse mais o VA (como esta na imagem abaixo) a não ser quando ele selecionar o cliente e abri-lo em uma outra tela.

 

Imagem Postada

 

Para o Internet Explorer 8, o grid esta funcionando desta forma que necessito, porém, nos inferiores não.

 

Abraço a todos,

 

Thyago

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thyago Brasil    0

Thyago Brasil
Postado

Como fez isso? Até onde eu sei não existe nada nativo do framework.

 

Abraços...

 

Bom dia!

 

Como disse, utilizei o Wrap para fazer com que a coluna se reajustasse conforme o conteúdo. Abaixo, veja o código:

 

<asp:GridView ID="grid" runat="server" CssClass="tblGrid" AutoGenerateColumns="true" AutoGenerateSelectButton="False">
    <RowStyle CssClass="rowGrid" Wrap="false"/>                                                                    
    <AlternatingRowStyle CssClass="rowGridAlt" />
    <HeaderStyle CssClass="headerGrid" Wrap="false"/>
    <Columns>
        <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" HeaderText="Selecione">
            <ItemTemplate>
                <asp:ImageButton ID="btn_Selecionar" runat="server" Height="20px" ImageUrl="select.png" Width="66px" OnClick="btn_Selecionar_Click"/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EmptyDataTemplate> Nenhum registro encontrado! </EmptyDataTemplate>
</asp:GridView>

Esse código esta funcionando para o Internet Explorer 8 mas para o Internet Explorer inferior não. O que eu queria saber é se tem algum outro modo de eu fazer isso para esses navegadores inferiores.

 

Abraços...

 

Thyago

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thyago Brasil    0

Thyago Brasil
Postado

Terá que ver o HTML e o CSS que ele gera quando isso é compilado, talvez você tenha que corrigir algo do css manualmente.

 

Abraços...

 

Veja abaixo o código HTML do grid.

 

<table class="tblGrid" cellspacing="0" rules="all" border="1" id="uc_pesquisa1_grid_Pesquisa" style="border-collapse:collapse;">
    <tr class="headerGrid" style="white-space:nowrap;">
        <th scope="col" style="width:60px;">Selecione</th>
        <th scope="col">Código</th>
        <th scope="col">Usuário</th>
        <th scope="col">Nome</th>
        <th scope="col">E-mail</th>
    </tr>
    <tr class="rowGrid" style="white-space:nowrap;">
        <td>
            <input type="image" name="uc_pesquisa1$grid_Pesquisa$ctl02$btn_Selecionar" id="uc_pesquisa1_grid_Pesquisa_ctl02_btn_Selecionar" src="select.png" style="height:20px;width:50px;border-width:0px;" />
        </td>
        <td>63</td>
        <td>THYAGO</td>
        <td>THYAGO</td>
    </tr>
    <tr class="rowGridAlt" style="white-space:nowrap;">
        <td>
            <input type="image" name="uc_pesquisa1$grid_Pesquisa$ctl03$btn_Selecionar" id="uc_pesquisa1_grid_Pesquisa_ctl03_btn_Selecionar" src="images/btn_select.png" style="height:20px;width:50px;border-width:0px;" />
        </td>
        <td>68</td>
        <td>MARIA</td><td>MARIA APARECIDA DA SILVA</td>
        <td style="width:5px;">maria@maria.com.br</td>
    </tr>
</table>

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thyago Brasil    0

Thyago Brasil
Postado

Ele gero 

style="white-space:nowrap;"

Agora eu terá que ver com a galera de css como é feito isso nos outros browsers pra gente tentar aplicar esse css na grid.

 

Abraços...

 

beleza. Vou ver aqui como resolver.

 

Obrigado

 

Thyago

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thyago Brasil    0

Thyago Brasil
Postado

Ele gero 

style="white-space:nowrap;"

Agora eu terá que ver com a galera de css como é feito isso nos outros browsers pra gente tentar aplicar esse css na grid.

 

Abraços...

 

Quintelab, como eu faço pra editar o html gerado? Aqui ele abre uma janelinha quando clico em exibir codigo fonte mas ela não deixa que eu edite o html.

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

roberto182    0

roberto182
Postado

 

Quintelab, como eu faço pra editar o html gerado? Aqui ele abre uma janelinha quando clico em exibir codigo fonte mas ela não deixa que eu edite o html.

 

Abraço

 

No firefox utilize o FireBug

 

No IE 8 utilize o Developers Toolbar

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thyago Brasil    0

Thyago Brasil
Postado

Galera,

 

Seguinte...

 

Consegui fazer com que o wrap funcione porém apenas quando seleciono uma linha do grid ou passo o cursor do mouse em cima. Quando fica fora o wrap não funciona. Será que tem algo de errado no grid ou então no css mesmo?

 

Vou postar os dois aqui pra vcs.

 

- GridView

<asp:GridView ID="grid_Pesquisa" runat="server" CssClass="tblGrid" AutoGenerateColumns="true" AutoGenerateSelectButton="False">
    <RowStyle CssClass="rowGrid" Wrap="false"/>                                                                    
    <AlternatingRowStyle CssClass="rowGridAlt" />
    <HeaderStyle CssClass="headerGrid" Wrap="false"/>
    <Columns>
        <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" HeaderText="Selecione">
            <ItemTemplate>
                <asp:ImageButton ID="btn_Selecionar" runat="server" Height="20px" ImageUrl="select.png" Width="66px" click="btn_Selecionar_Click"/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EmptyDataTemplate> Nenhum registro encontrado! </EmptyDataTemplate>
</asp:GridView>                                                                 
<mycontrols:GridViewControlExtender ID="grid_PesquisaExtender" runat="server" TargetControlID="grid_Pesquisa" RowHoverCssClass="row-over" RowSelectCssClass="row-selected"/>

- CSS

.tblGrid
{
    font-family:Arial, Verdana;
    font-size:small;
    color: Black;
    min-width: 10px;
    min-height: 10px;
    border:2px solid #000;
    color:#000;
    font-weight:bold;
}

/* Hack para Internet Explorer 7 ou inferior */
*+html .tblGrid
{
    font-family:Arial, Verdana;
    font-size:small;
    color: Black;
    min-width: 10px;
    min-height: 10px;
    border:2px solid #000;
    color:#000;
    font-weight:bold;
    border-collapse: collapse;
}

.rowGrid
{
    padding:2px 2px;
    border-bottom:solid 2px #000000;
    background-color:#ffddb4;
    color:#000;
}

/* Hack para Internet Explorer 7 ou inferior */
*+html .rowGrid
{
    padding:2px 2px;
    border-bottom:solid 2px #000000;
    background-color:#ffddb4;
    color:#000;
    white-space: nowrap;
}

.rowGridAlt
{
    padding:2px 2px;
    border-bottom:solid 2px #000000;
    background-color:#fff6ec;
    color:#000;
}

/* Hack para Internet Explorer 7 ou inferior */
*+html .rowGridAlt
{
    padding:2px 2px;
    border-bottom:solid 2px #000000;
    background-color:#fff6ec;
    color:#000;
    white-space: nowrap;
}

.headerGrid
{
    background-image: url(../images/backgrid.jpg);
    height:20px;
    border: solid 2px #000000;
}

.row-over
{
    background-color:#ffc580; 
    background-repeat:repeat;
    color: #000;
    border-bottom: solid 1px #000000;
    text-align: center;
    cursor: default;
    font-weight: bold;
    font-family: Arial, Verdana;
    font-size:small;    
}

/* Hack para Internet Explorer 7 ou inferior */
*+html .row-over
{
    background-color:#ffc580;
    background-repeat:repeat;
    color: #000;
    border-bottom: solid 1px #000000;
    text-align: center;
    cursor: default;
    font-weight: bold;
    font-family: Arial, Verdana;
    font-size:small;    
    white-space: nowrap;
}

.row-selected
{
    background-color:#ff9e28;
    background-repeat:repeat;
    color:#fff;
    text-align:center;
}

/* Hack para Internet Explorer 7 ou inferior */
*+html .row-selected
{
    background-color:#ff9e28;
    background-repeat:repeat;
    color:#fff;
    text-align:center;
    white-space: nowrap;
}

Abraço

 

Thyago

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thyago Brasil    0

Thyago Brasil
Postado

Você esta aplicando o CSS somente para o RowHoverCssClass e RowSelectCssClass. Tente aplicar para o CssClass.

 

Abraços...

 

Eu fiz isso lá no Header Style e no Row Style. Se você ver lá no grid que eu postei, você vai ver. Lá no mycontrols, não tem CssClass apenas o RowHoverCssClass e o RowSelectCssClass. Esses dois também estão funcionando. O que não funciona é os dois que citei a pouco (Header Style e Row Style).

 

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thyago Brasil    0

Thyago Brasil
Postado

Copie o CSS que esta no row-over e coloque no rowGrid. Deixe ele iguais.

 

Abraços...

 

Ja fiz isso e não funcionou. Existe a possibilidade de ser algum problema no próprio GridView? Ou seria Css mesmo?

 

Abraços...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos .NET
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito