thomas91
Goto Top

Iframe wird zu klein in div angezeigt

Hey Community,

ich habe ein Problem mit einem <iframe> in einem <div>. Das iFrame wird nicht ganz angezeigt da mein div nicht hoch genug ist. Ich habe auch schon versucht das div mittels
style="width: 350px; height: 260px; 
anzupassen. Dann wurde das iframe garnicht mehr angezeigt.

Anbei noch der betroffene Codeblock:

<div class="info">  
<legend>Priorit&auml;t:
<?php  // Prio
	echo $row[9] . " &bull; ";  
?>Mitteiler:
<?php  // Mitteiler
	echo $row[2];
?>
&bull; Alarmzeit: 
<?php  // Alarmzeit
	echo date("H:i", $row['time']);  
?>
</legend>

<?php
// Wir prüfen mal, ob wir denn den FMS Status anzeigen sollen
if ($parameter['FMSSTATUSALARM'] == "true") {  
	echo "<iframe height='32' width='100%' src='fms/status-alarm.php'></iframe>";  
}
?>

</div>

Hat jemand eine Lösung für mein Problem?

Gruß Thomas

Content-Key: 327578

Url: https://administrator.de/contentid/327578

Printed on: April 16, 2024 at 13:04 o'clock

Member: Yannosch
Solution Yannosch Jan 26, 2017 updated at 10:18:18 (UTC)
Goto Top
Huhu,

versuch mal das mit der Style.css

div {
    width: 100%;
    height: 0;
    padding-bottom: 56%; /* Wert für Dimensionsänderung */
    position: relative;
}

div iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}

LG Yannosch

EDIT:

iframe {
    display:block;
    width:100%;
}

wäre sogar noch einfacher face-wink
Member: Thomas91
Thomas91 Jan 26, 2017 at 10:39:01 (UTC)
Goto Top
Ist schon besser, aber jetzt ist es 1cm zu groß :D
Member: Yannosch
Yannosch Jan 26, 2017 at 10:42:39 (UTC)
Goto Top
hast du mal ein Screenshot bitte ? face-big-smile
Member: Thomas91
Thomas91 Jan 26, 2017 at 10:49:31 (UTC)
Goto Top
Anbei das Bild
2017-01-26 11_47_43-alarmdisplay
Member: Yannosch
Yannosch Jan 26, 2017 at 11:36:07 (UTC)
Goto Top
und du willst dass der blaue div container quasi bündig unter den grünen kästen endet ?`

Was hast du bisher in deiner css stehen?
Member: Thomas91
Thomas91 Jan 27, 2017 at 08:29:49 (UTC)
Goto Top
Zitat von @Yannosch:

und du willst dass der blaue div container quasi bündig unter den grünen kästen endet ?`

Genau das hätte ich gerne face-smile

Im css steht folgendes:

html {margin:0;padding:0;border:0;font-size:150%;}
table {border-collapse:separate;border-spacing:1;margin:0em 0.1em 0em 0.1em;width:100%;border-color:#d0d0d0;}
table, th, td, div {vertical-align:middle;text-align:center;}

body.uhr {margin:0;padding:0;border:0;font-size:100%;font:inherit;line-height:1;color:#d0d0d0;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;overflow:hidden;} 

body.alarm {margin:0;padding:0;border:0;font-size:100%;font:inherit;line-height:1;background:#d5edf8;color:#205791;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;overflow:hidden;} 


.table-alarm
{
width: 808px;
text-align: center;
margin:auto;
}

.table-uhr
{
width: 100%;
text-align: center;
}


.td-logo-uhr
{
border-right: 4px solid #d0d0d0;
border-bottom: 4px solid #d0d0d0;
width:3%;
}

.logo-uhr
{
font-size: 2.75em;
font-weight: bold;
line-height:1;
/* -moz-transform: rotate(-90deg); */

}
Member: Yannosch
Yannosch Jan 27, 2017 updated at 08:53:03 (UTC)
Goto Top
dann schraub doch einfach an der height von der DIV-Class die du verändern möchtest :-P
Außerdem gibst du dem iframe noch ein align centre mit und ein margin-top und bottom auf auto.

Irgendwie bekommst du es so schon hin face-wink