Aanmelden

**Gerard van Nes** · (Dit bericht is het laatst bewerkt op 02-08-2018, 08:53 AM door Gerard van Nes.)

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>

geeft:

**Ton van Steenoven** · 02-08-2018, 09:09 AM

Hi Gerard,

Vooralsnog W3Schools geraadpleegd en daar een mogelijke verklaring gevonden. Chrome vanaf versie 4.0 en Edge NIET.

**Ton van Steenoven**

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.

**Ton van Steenoven**

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

**Ton van Steenoven** · 02-08-2018, 07:04 PM

Nog een mooie uitvoering. Alleen verticaal of horizontaal met max- instellingen.

**Gerard van Nes** · 03-08-2018, 12:03 AM

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

Aanmelden
Gebruikersnaam
Wachtwoord:	Wachtwoord vergeten?
	Mij onthouden