Publicado em 11 de nov.

Wrap para Internet Explorer 6

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á...

/applications/core/interface/imageproxy/imageproxy.php?img=http://img98.imageshack.us/img98/6247/img1x.jpg&key=52dfebf73e38ad6d22fd3827dde6f82ce0ce7ad083463e59712cf268ee2ca513" alt="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.

/applications/core/interface/imageproxy/imageproxy.php?img=http://img98.imageshack.us/img98/2357/img2k.jpg&key=2750ccf6270ac9d1d5665f78eee132731fac4cf5937a298cb00a7ee345ee4a16" alt="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

Discussão (13)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

quintelab· 11 de nov.

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

Abraços...

Thyago Brasil· 12 de nov.

>
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

quintelab· 12 de nov.

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...

Thyago Brasil· 12 de nov.

>
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

quintelab· 12 de nov.

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...

Thyago Brasil· 12 de nov.

>
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

Thyago Brasil· 13 de nov.

>
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

roberto182· 13 de nov.

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

Thyago Brasil· 13 de nov.

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

quintelab· 13 de nov.

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

Abraços...

Thyago Brasil· 13 de nov.

>
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...

quintelab· 13 de nov.

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

Abraços...

Thyago Brasil· 13 de nov.

>
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...