Postback (tabcontainer) afeta layout responsivo

[DirceuM 0]

Olá amigos;

Estou com um problema e espero auxilio da comunidade .NET do fórum, que sempre são muito solícitos.

 

Tenho um projeto feito em layout responsivo.

Estou utilizando um grupo de abas (componente do ajax tool kit: tabcontainer)

Bom, quando ocorre postback através de um evento delas, o layout "bagunça"....ou seja, mesmo na resolução maior, ele entende que está em uma inferior e fica responsivo....

 

Observação importante: Esse bug ocorre apenas no IE.

 

 

 

 

O que poderia fazer para evitar essa anomalia?

Desde já agradeço

[KhaosDoctor 242]

Qual é o método que controla a responsividade dele?

[DirceuM 0]

Olá Khaos, como vai?

 

Inseri na master page a seguinte meta-tag:

 

<meta name="viewport" content="width=device-width" />

 

No meu arquivo mobile.css, defini as media queries:

 

@media screen and (min-width: 120px) and (max-width: 480px)

@media screen and (min-width: 481px) and (max-width:910px)

[KhaosDoctor 242]

Quando você dá postback ele está perdendo o tamanho da página e seu CSS entende que é um responsivo. Tente comentar essas linhas do CSS.

[DirceuM 0]

Khaos, comentando as linhas do css perderei justamente a "responsabilidade" do layout.

 

Tá tão bizarro isso que, no IE quando mando exibir a janela da Barra de Ferramentas do desenvolveror (F12), o problema não ocorre.

 

E mais, acabei de identificar que o bug ocorre especificamente no IE 9.

[KhaosDoctor 242]

Sim, mas eu estou falando para fazer um teste, para ver se algo ocorre sem essa CSS

[DirceuM 0]

com o css comentado, o bug não acontece...

[KhaosDoctor 242]

Certo, então sabemos que é um problema nessa linha do xml, o que você precisa fazer é ajustar os tamanhos das midias para, pois acho que o sistema está perdendo este tamanho.

[quintelab 91]

Um pouco fora do contexto, mas minha dica é que não utilize esse componentes do ajax toolkit, sempre procuro alternativas em jquery, muito mais fácil de manipular e saber o que esta acontecendo.

Abraços...

[DirceuM 0]

Infelizmente não posso abrir mão do ajaxtool kit, pois seu uso está muito difundido na organizaçao que trabalho, ficando inviável mudar a cultura de seu uso.

 

Estou esgotando minhas possibilidades, estou praticamente apelando para forçar o IE a renderizar como IE8 (<meta http-equiv="X-UA-Compatible" content="IE=8" />).

 

Como ele não suporta as media queries do CSS 3 o problema não ficará obvio ao navegar pelo IE no desktop.

[KhaosDoctor 242]

Cara o problema é que o IE é cheio de bugs para quase qualquer coisa de CSS que você colocar... Não tem como fugir muito disso...

[DirceuM 0]

Realmente é algo nesse ajaxtool kit que buga no IE no uso dessas media queries.

 

O paliativo que fiz foi trabalhar com outra querie, o "device-width" que regula a tela apenas no dispositivo móvel

@media screen and (min-device-width: 120px) and (max-device-width: 480px)

 

outra forma que encontrei foi trabalhar a meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

 

Assim força o IE9 a renderizar como 8 (que não suporta CSS3)

 

Terei mais tempo para investigar com mais calma o comportamento do ajaxtool kit tabcontainer nessas queries, alguma novidade retorno aqui.

 

Vlw