PerSalmi.NET

Swedish .Net software developer...
# Wednesday den 5 July 2006

Det gamla problemet med att SELECT-element och andra element som baseras på Windows kontroller syns rakt igenom alla lager även om de ligger ovanpå när de renderas i Internet Explorer får ny aktualitet när det dyker upp fler och fler Ajax tillämpningar. Själv kände jag mig tvungen att hitta en elegant lösning på problemet när det dök upp både i en applikation som bygger på ASP.NET Ajax och vid en ändring i menysystemet i MOLiTHO där vi utnyttjar CSS Control Adapters för att rendera menyer om så önskas.

Lösningen på problemet är ofta att dölja alla SELECT-element med hjälp av ett JavaScript när ett lager ska visas. Efter mycket sökande hittade jag en extra elegant lösning på den relativt anonyma sajten Hedgerwow.com.

Här är en länk till sidan med lösningen.

Det fina med just denna lösning är att den är fri från skript, bara CSS och en villkorsstyrd kommentar som ger en IFRAME som utnyttjas när ett lager ska renderas i IE. De tester jag har gjort med CSS-IFRAME lösningen här visade att den även fungerar tillsammans med Atlas Toolkit DragPanel.

IE 7 som kommer inom en inte alltför avlägsen framtid innehåller en bättre lösning på problemet i och med att man där har implementerat nya varianter av de windowsbaserade elementen.

Ett exempel på hur det kan se ut i kod, hämtat från Hedgerwow.com:

<style>
.select-free
{
 position:absolute;
 z-index:10;/*any value*/
 overflow:hidden;/*must have*/
 width:33em;/*must have for any value*/;
}
.select-free iframe
{
 display:none;/*sorry for IE5*/
 display/**/:block;/*sorry for IE5*/
 position:absolute;/*must have*/
 top:0;/*must have*/
 left:0;/*must have*/
 z-index:-1;/*must have*/
 filter:mask();/*must have*/
 width:3000px;/*must have for any big value*/
 height:3000px/*must have for any big value*/;
}
.select-free .bd
{
border:solid 1px #aaaaaa;
padding:12px;
}
</style>

<div class="select-free" id="dd3">
 <div class="bd">
your content here
 </div>
 <!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

Blog & Contact
Per Salmi
Per Salmi
Min LinkedIn Profil

Jag arbetar på Combitech AB i Linköping med konsultuppdrag och utbildning inom Microsoft .NET området. Kontakta mig gärna om ni har frågor, behov av konsulttjänster eller är intresserade av utbildning inom .NET.

Copyright © 2014 Per Salmi

Bloggmotor: newtelligence dasBlog 2.3.12105.0

Sign In
Statistics
Total Posts: 211
This Year: 1
This Month: 0
This Week: 0
Comments: 40

Datorer
All Content Copyright © 2014, Per Salmi