Moin
Ich möchte ein Widget (gds) welches mehr Einträge hat als in mein <gridster>-Element passen in einen scrollbaren iframe auslagern.
<li class="halbTransparent" data-row="2" data-col="2" data-sizex="7" data-sizey="4" class="halbTransparent">
<header class="headerTransparent">WETTERWARNUNGEN REGION HANNOVER</header>
<iframe src="/fhem/tablet/iframe_dwd.html"
width="100%"
height="100%"
name="DWD">
</iframe>
</li>
oder auch:
<li class="halbTransparent" data-row="2" data-col="2" data-sizex="7" data-sizey="4" class="halbTransparent">
<header class="headerTransparent">WETTERWARNUNGEN REGION HANNOVER</header>
<div data-type="iframe"
data-src="./iframe_dwd.html"
data-height="auto"
data-width="auto"
data-scrolling="auto">
</div>
</li>
Die einzubindende iframe_dwd.html sieht so aus:
Ich habe den <head>-Tag mit rein genommen, weil ich nicht wusste ob der iframe die Scripte und so weiter vererbt....
<!DOCTYPE html>
<html>
<head>
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="138">
<meta name="widget_base_height" content="155">
<meta name="widget_margin" content="1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="gridster_disable" content="1">
<meta name="debug" content="0"> <!-- 1=output to console;0=no output -->
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/pgm2/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'TAB3':'WVC_TAB3_Buro'}; var wvcUserCssFile="webviewcontrol.css"</script>
</head>
<body style="background-image:none; background-color:transparent;">
<div data-type="gds"
data-device="gds"
data-get="alert"
data-max="20"
class="centered">
</div>
</body>
</html>
Im iframe-Widget wird die richtige Seite geladen (rechtsklick->aktueller Frame->Frame-Quelltext).
Allerdings ohne Inhalt. Also weder "Es liegen keine Warnungen vor" noch irgendetwas anderes. Kein Text, keine Label-Widgets und auch keine anderen Widgets.
Es scheint die Verbindung zu FHEM zu fehlen...
Waran kann das liegen?? Jemand eine Idee? setstate? :)
Grüße^^
Scrollbar? Ich habe das extra wegkonfiguriert! Kannst du aber gerne wieder einbauen:
.gridster ul li {
background-color:#2A2A2A;
overflow: hidden;
text-align: center;
}
ändern in:
.gridster ul li {
background-color:#2A2A2A;
overflow: auto;
text-align: center;
}
Zitat von: setstate am 01 Februar 2016, 08:11:19
Scrollbar? Ich habe das extra wegkonfiguriert! Kannst du aber gerne wieder einbauen:
.gridster ul li {
background-color:#2A2A2A;
overflow: hidden;
text-align: center;
}
ändern in:
.gridster ul li {
background-color:#2A2A2A;
overflow: auto;
text-align: center;
}
Moin.
Danke... Nur behebt das leider nicht mein eigentliches Problem, dass in dem iframe (egal ob widget oder nicht) nicht angezeigt wird obwohl die richtige Datei geladen wird.
Grüße^^
Habe es jetzt folgendermaßen gelöst.
Ohne iframe... und ohne overflow dauerhaft auf auto zu setzen :)
<li class="halbTransparent" data-row="2" data-col="2" data-sizex="7" data-sizey="4" style="overflow:auto;">
<header class="headerTransparent">WETTERWARNUNGEN REGION HANNOVER</header>
<div data-type="gds"
data-device="gds"
data-get="alert"
data-max="20"
class="centered">
</div>
</li>
Der schöne Vorteil... in WebViewControl werden keine Scrollbars angezeigt (trotzdem scrollbar) und auf meinem Handy (Android) wird die Scrollbar schmal, grau dargestellt.
Grüße^^