Eval2.2 - Pagebutten - mehrere grid-elemente in content

chris1284 · 05 August 2016, 22:09:41

Hi,
ich habe die pagebutton demo-seite angepasst um pagebutton in der eval zu testen. irgenwie bekomme ich aber immer nur einen "großen grauen kasten" in dem der kontent landet. kann man das aufbechen so das es einzelen grid sind und dennoch nur eine conten.html? anbei ein bild ist (mit rot eingezeichnet wo das wetter hin soll und ein bild was ich im paint manipuliert habe wie es aussehen soll.

def index:

Zitat
<body>
<div class="gridster">
<ul>
         <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
            <header>Termine</header>
            <div data-type="calview" data-device="View_All" data-get="today" data-detail='["bdate","summary"]' data-max="7" class="cell"></div>
            <div data-type="calview" data-device="View_All" data-get="tomorrow" data-detail='["bdate","summary"]' data-max="7" class="cell"></div>
         </li>
<li data-row="1" data-col="2" data-sizex="8" data-sizey="1">
<div data-type="pagebutton" data-url="#page_heating.html" data-load="#page_heating" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_heating.html" data-icon="fa-home" class="default top-space"></div>
<div data-type="pagebutton" data-url="#page_switches.html" data-load="#page_switches" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_switches.html" data-icon="fa-music" class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#page_weather.html" data-load="#page_weather" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern=".*#page_weather.html" data-device="ftuitest" data-states='["0","1"]' data-icons='["fa-sliders","fa-sliders activate"]' class="prefetch top-space"></div>
</li>
<li data-row="2" data-col="1" data-sizex="10" data-sizey="4">
<div class="page" id="page_heating"></div>
<div class="page" id="page_switches"></div>
<div class="page" id="page_weather"></div>
</li>
</ul>
</div>
</body>

def weather

Zitat
<!DOCTYPE html>
<html>
<head>
<title>FTUI Dev</title>
</head>
<body>
<div class="page" id="page_weather">
   <ul>
      <li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
         <header>Wetter</header>
         <div class="cell" >
            <div data-type="label" class="cell left-align">Außentemp</div>
            <div data-type="label" data-device="out_sen_t" data-get="temperature" data-unit="°C" data-color="orange" class="cell big"></div>
         </div>
      </li>
      <li data-row="1" data-col="2" data-sizex="4" data-sizey="2">
         <header>Yahoo</header>
         <div class="col-1-4">
            <div data-type="label" class="cell">Heute</div>
            <div data-type="weather" data-device="weather_yahoo" data-get="fc1_condition" data-imageset="kleinklima" ></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc1_low_c" data-unit="°C" data-color="blue" class="inline "></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc1_high_c" data-unit="°C" data-color="orange" class="inline "></div>
         </div>
         <div class="col-1-4">
            <div data-type="label" data-device="weather_yahoo" data-get="fc2_day_of_week" class="cell"></div>
            <div data-type="weather" data-device="weather_yahoo" data-get="fc2_condition" data-imageset="kleinklima" ></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc2_low_c" data-unit="°C" data-color="blue" class="inline "></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc2_high_c" data-unit="°C" data-color="orange" class="inline "></div>
         </div>
         <div class="col-1-4">
            <div data-type="label" data-device="weather_yahoo" data-get="fc3_day_of_week" class="cell"></div>
            <div data-type="weather" data-device="weather_yahoo" data-get="fc3_condition" data-imageset="kleinklima" ></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc3_low_c" data-unit="°C" data-color="blue" class="inline "></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc3_high_c" data-unit="°C" data-color="orange" class="inline "></div>
         </div>
         <div class="col-1-4" >
            <div data-type="label" data-device="weather_yahoo" data-get="fc4_day_of_week" class="cell"></div>
            <div data-type="weather" data-device="weather_yahoo" data-get="fc4_condition" data-imageset="kleinklima" ></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc4_low_c" data-unit="°C" data-color="blue" class="inline "></div>
            <div data-type="label" data-device="weather_yahoo" data-get="fc4_high_c" data-unit="°C" data-color="orange" class="inline "></div>
         </div>
      </li>
      <li data-row="3" data-col="1" data-sizex="3" data-sizey="1">
         <div class="cell">
            <div data-type="gds" data-device="gdswetter" data-get="alert" data-max="5" class="cell"></div>
         </div>
      </li>
   </ul>
</div>
</body>
</html>

ich würde jetzt erwarten das er ein bei 1 startendes, 1 breites, 2 hohes element läd, nebendran mit dem standard abstand ab position 2 ein 4 breites 2 hohes element wo dann 4 columns drin sind.

chris1284 · 06 August 2016, 18:09:46

niemand eine idee? die info das der pagebutton das nicht kann (also mehr als das eine grid-element austauschen als die größer do der content in der index definiert ist) würde auch schon reichen

setstate · 06 August 2016, 19:51:57

Mit der ersten Seite reservierst du den Platz, mit den Unterseiten füllst du ihn. Wenn die Unterseite ein Layout bekommen soll, kann man Gridster in Gridster probieren. Dazu fehlt aber das neue Gridster div. Ansonsten nur mit col-*-* oder inline positionieren.

chris1284 · 06 August 2016, 20:04:14

danke das was... den 2. gridstar einfach noch definieren der überschreibt dann den ersten!

FHEM Forum

Eval2.2 - Pagebutten - mehrere grid-elemente in content

chris1284

chris1284

setstate

chris1284