quinta-feira, 23 de setembro de 2004

Mostrar um DIV sobre um SELECT, impossivel?

Qualquer um que já tenha feito meia duzia de páginas web na vida com alguns recursos de DHTML já se passou por esse problema, o elemento <SELECT> fica na frente de qualquer outro elemento no Microsoft Internet Explorer. Não tem jeito, o elemento <SELECT> não entende o zIndex no engine da Microsoft!

E eu, assim como todo mundo, sabia que era impossível resolver esse problema. Então, fui ler alguns documentos na MSDN para tentar entender o problema e percebi como é confuso e ruim esse engine de páginas do Microsoft Internet Explorer. Vamos as conclusões:
  • O <SELECT> não entende o zIndex, e é o zIndex que faz o posicionamento para frente e para traz dos elementos na tela. Bem, isso todo mundo já sabe, e esse é o problema, mas é por ai que ascoisas realmente irão ficar estranhas.
  • O <IFRAME> entende o zIndex como qualquer outro elemento HTML, só que o <IFRAME> tem uma propriedade especial, que ele consegue ficar na frente do <SELECT> desde que tenha um zIndex maior que o do <SELECT>, e lembre-se que eu disse que o <SELECT> não entende o zIndex, e realmente não entende, tá na documentação, mas nesse caso, pense que ele entende :). Então nessa hora pensei: Eu tenho um cachorro, e ele se chama BINGO!!!!!!
  • Agora vem a parte mais estranha, o <IFRAME> consegue ficar na frente do <SELECT>, e o <IFRAME> entende o zIndex como todos os outros elementos, então meu amigo, olha a confusão, se você colocar um <IFRAME> sobre um <SELECT> e colocar um <DIV> sobre o <IFRAME> com um zIndex maior que todos os outros elementos, SUA <DIV> VAI FICAR NA FRENTE DO <SELECT>. Ai está a solução para um dos problemas mais bizarros da humanidade.
Eu fiz uns testes e ficou perfeito. Nunca mais vou ter problema com os malditos combos. Realmente valeu a pena todo o trabalho que eu passei pra entender primeiro, como funcionava as páginas da MSDN e depois para entender o MSHTML e descobrir que ele é pior do que eu pensava.

Nos meus testes coloquei um iframe oculto na página:
<iframe id="iFrameMenu" src="" style="visibility: hidden; position: absolute; z-index: 2;"></iframe>

Criei o como com um zIndex menor:
<select id="combo" style="z-index:1" >

O <DIV> do menu eu criei normal, só que na hora de mostrar eles na tela a jogada é colocar o <IFRAME>, na mesma posição do <DIV> com a mesma altura e larguro, e com um zIndex menor. Neste caso, o <DIV> vai esconder completamente o <IFRAME> e vai parecer que ele nem existe. Só que, se por algum motivo alheio a nossa vontade, tiver um <SELECT> no mesmo espaço onde ta o <DIV>, o <IFRAME> vai fazer com que o <SELECT> fique atraz do <DIV> que está na frente.

É enrolado, mas é isso, para entender melhor, de uma olhada nesse exemplo. Para complicar um pouco mais, nesse exemplo eu coloquei o <SELECT> dentro de outro <IFRAME>.

E pronto meu amigo, seus problemas com o <SELECT> acabaram! Eu realmente odiava muito ter que esconder os um monte de campo quando abria um menu. Já vi situações em que a tela toda ficava escondida quando se abria o menu somente por causa desse problema.

E eu ainda fico pensando, as vezes me passa pela cabeça que o Bill Gates é uma lenda urbana, e a Microsoft é na verdade meu visinho de 16 anos que passa o dia e a noite programando e não ganha dinheiro porque todo mundo pirateia o Windows. Como pode uma empresa que diz ter milhoes e sem saber o que fazer com o dinheiro não resolver um problema desses que incomoda tanta gente? Eu sinceramente não sei a resposta, mas tenho uma coisa a dizer: Seja Feliz!

10 comentários:

  1. rapaz !!!!! Vc descobriu o ouro. Esse negócio ja estava me deixando doidinha .... mas me fale uma coisa! Troquei o "onClick" por "onMouseOver", mas tenho que fazer o "onMouseOut" tb que não consigo fazer funcionar ... pode me dá uma dica nesse JS? valeu! parabéns vc venceu um grande desafio!

    ResponderExcluir
  2. Olha eu nao to conseguindo fazer funcionar isso no ie...
    Funciona se o select estiver em um include?

    ResponderExcluir
  3. mas isso só funciona para posições absolutas certo?

    ResponderExcluir
  4. Boa boa.... mais um bug safado do IE contornado!

    ResponderExcluir
  5. Valeu pela dica. Testei e aprovei. Funcionou perfeitamente e, de agora em diante, vou usar sempre esta técnica promissora.

    ResponderExcluir
  6. Parabéns, agora só falta a solução para a fome na África e as guerras no Oriente Médio, boa sorte! O resto a gente vai levando!... Rs...

    Abraço

    ResponderExcluir
  7. Cara.... Sem comentários! Excelente! Parabéns e valeu pela ajuda! Abrass

    ResponderExcluir
  8. O pior de tudo é que não corrigiram este bug safado no IE 7! essa microsoft não vale NA-DA! alguem já testou na versão beta do 8? será que eles fizeram a lição de casa?? rs

    ResponderExcluir
  9. IE realmente ridículo. Felizmente pessoas conseguem esses bug e outras divulgam.

    ResponderExcluir
  10. No IE7 já esta corrigido sim!

    ResponderExcluir