+- Forum ZCBS (https://www.zbbs.nl/forum)
+-- Forum: ARCHIEF (https://www.zbbs.nl/forum/forumdisplay.php?fid=95)
+--- Forum: ZCBS Forum Archief 2018 (https://www.zbbs.nl/forum/forumdisplay.php?fid=99)
+--- Topic: Waarom werkt dit alleen bij Firefox? (/showthread.php?tid=106)
Waarom werkt dit alleen bij Firefox? - Gerard van Nes - 02-08-2018
In onderstaande webpagina kan alleen bij de FireFox browser het gehele iframe scherm via de puntjes in de rechteronderhoek geresized worden.
Is er een CSS-kenner die mij kan helpen en weet wat er aangepast moet worden in onderstaande code zodat het ook bij andere browsers (in ieder geval Google Chrome) ook werkt?
Met jquery lukt het wel, doch ik wil het eenvoudig houden.
Het is voor een toepassing in de nieuwe ZCBS-versie. Iemand van het testpanel liep er tegen aan...
Code:
<html>
<head>
<style type="text/css">
#example {
height: 380px;
width: 380px;
overflow-x: auto;
overflow-y: hidden;
resize: both;
position: relative;
z-index: 1;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
Onderstaande iframe alleen resizable in Firefox?
<div id="example">
<iframe src="https://www.zcbs.nl/maps-google.html"></iframe>
</div>
</body>
</html>RE: Waarom werkt dit alleen bij Firefox? - Ton van Steenoven - 02-08-2018
Hi Gerard,
Vooralsnog W3Schools geraadpleegd en daar een mogelijke verklaring gevonden. Chrome vanaf versie 4.0 en Edge NIET.
RE: Waarom werkt dit alleen bij Firefox? - Ton van Steenoven - 02-08-2018
Even geëxperimenteerd met codepen (werkt deze rechtstreeks naar mijn voorbeeld?) en tot de conclusie gekomen dat toevoegen van overflow: auto; aan en weglaten van resize: both; aan css iframe een eind verder komt (Chrome ). Alleen nog een slider (horizontaal) te zien. Moet ook op te lossen zijn.
RE: Waarom werkt dit alleen bij Firefox? - Ton van Steenoven - 02-08-2018
Gelukt. Zie de link naar mijn codepen-pen als in vorige reactie.
De werking gaat goed voor Opera, FF en Chrome indien een van de overflows (#example) op auto staat.
Beiden op hidden werkt alleen in FF
RE: Waarom werkt dit alleen bij Firefox? - Ton van Steenoven - 02-08-2018
Nog een mooie uitvoering. Alleen verticaal of horizontaal met max- instellingen.
RE: Waarom werkt dit alleen bij Firefox? - Gerard van Nes - 03-08-2018
Het is toch eindelijk gelukt...
Bedankt Ton!
Het werkt nu zowel in Firefox, Chrome, Opera als Safari.
De IE-browser gebruik ik niet/nooit mede vanwege de diverse veiligheidsproblemen bij de IE-browser (los van het feit dat Microsoft resize niet in haar browser heeft geïmplementeerd).
De code is nu als volgt:
Code:
<html>
<head>
<style type="text/css">
#example {
border: 1px solid;
height: 380px;
width: 380px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
Onderstaande iframe resizable in Firefox, Chrome, Opera en Safari?
<div id="example">
<iframe src="https://www.zcbs.nl/maps-google.html" height="98%" width="98%" frameborder="no"
scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</body>
</html>Belangrijkste aanpassing is dat de iframe geen CSS meer heeft doch de waarden nu als parameters met de iframe-tag worden meegegeven (dat bleek een belangrijk verschil te zijn).
Om het goed te laten werken moest de hoogte/breedte lager zijn dan 100% (anders verscheen er een verticale scroll bar!).
Een ZCBS-toepassing is te zien bij bijvoorbeeld:
www.dezijpe.nl/cgi-bin/zhb.pl?ident=2014031419