FTUI version 3

[blenni]

Ich bin gerade dabei, bei mir über ein iFrame die Laderegelung von evcc einzubinden.

Code Auswählen Erweitern

            <ftui-tab-view id="View6">
                <ftui-grid-tile row="1" col="1" height="6" width="4" shape="round">
                    <ftui-grid-header>evcc</ftui-grid-header>
                    <iframe src="http://xxx" style="overflow:hidden; border:0; width:190%; height:400%; transform:scale(0.59); transform-origin:top;" scrolling="no"></iframe>
                </ftui-grid-tile>
            </ftui-tab-view>
Allerdings wird der Frame nicht in der vollen Höhe dargestellt und abgeschnitten, egal wie ich die Höhe angebe.
Wenn ich die Grid-Tile Höhe vergrößere, dann seh ich auch mehr von evcc.

width:190% und transform:scale(0.59) nutze ich, um die Darstellung runterzuskallieren, da es mir sonst zu groß dargestellt wird.

Kann mir jemand einen Tipp geben, wie ich die volle Höhe des Grid-Tile für das iFrame ausnutzen kann?


EDIT: Ein negatives margin-bottom hilft

[XXL-Wing]

Hallo zusammen,

ich kämpfe sdeit geraumer Zeit mit der Breite der Spalten und dem Umbruch von Labels darin.
Vor allem bei der Wettervorhersage gibt es einen langen Text der echt nervt... (siehe Screenshot).

Der Umbruch funktioniert trotz gesetzter Spaltenbreite irgendwie nicht.
Code und Screenshot anbei.

Jemand eine Idee? Danke für eure Vorschläge.

lG
Mike

[juemuc]

Hallo Mike,

ich habe es wie folgt definiert:

Code Auswählen Erweitern

<!--          [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | format('eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1"> -->
    <ftui-label
         [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold" margin="0.2">
    </ftui-label>
    <ftui-row height="25%">
      <ftui-column width="33%">
        <ftui-label
              text="morgens" size="2">
        </ftui-label>
        <ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" left="5px" style="position:relative;"
              [condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon">
        </ftui-weather>       
        <ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')"
              [text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C">
        </ftui-label>
     </ftui-column>
     <ftui-column width="33%">
        <ftui-label
              text="Mittags" size="2">
        </ftui-label>
        <ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" left="5px" style="position:relative;"
              [condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon">
        </ftui-weather>
        <ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')"
              [text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C">
        </ftui-label>
     </ftui-column>   
     <ftui-column width="33%">
       <ftui-label
            text="Abends" size="2">
       </ftui-label>
       <ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" left="5px" style="position:relative;"
            [condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon">
       </ftui-weather>
       <ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')"
            [text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C">
       </ftui-label>
     </ftui-column>
   </ftui-row>
   <ftui-row height="10%">
     <ftui-column height="90%" width="33%">
       <ftui-label scroll padding="1" height="5em"
            [text]="WetterProplanta:{{VHS_NR}}_weatherMorning">
       </ftui-label>
     </ftui-column>
     <ftui-column height="90%" width="33%">
       <ftui-label scroll padding="1" height="5em"
            [text]="WetterProplanta:{{VHS_NR}}_weatherDay">
       </ftui-label>
     </ftui-column>
     <ftui-column height="90%" width="33%">
       <ftui-label scroll padding="1" height="5em"
            [text]="WetterProplanta:{{VHS_NR}}_weatherEvening">
       </ftui-label>
     </ftui-column>
   </ftui-row>
   <ftui-row height="15%" margin="0.2">
     <ftui-column width="16%" >
       <ftui-label text-align="left" left="30px" style="position:relative;" margin="-0.5"
            text="Max:">
       </ftui-label>
       <ftui-label text-align="left" left="30px" style="position:relative;"
            text="Min:">
       </ftui-label>
     </ftui-column>
     <ftui-column width="10%">
       <ftui-label text-align="right" left="-35px" style="position:relative;" margin="-0.5"
            [text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C">
       </ftui-label>
       <ftui-label text-align="right" left="-35px" style="position:relative;"
            [text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C">
       </ftui-label>
     </ftui-column>
     <ftui-column width="16%">
       <ftui-label text-align="left" left="25px" style="position:relative;" margin="-0.5"
            text="Regen:">
       </ftui-label>
       <ftui-label text-align="left" left="25px" style="position:relative;"
            text="Sonne:">
       </ftui-label>
     </ftui-column>
     <ftui-column width="10%">
       <ftui-label text-align="right" left="-20px" style="position:relative;" margin="-0.5"
            [text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%">
       </ftui-label>
       <ftui-label text-align="right" left="-20px" style="position:relative;"
            [text]="WetterProplanta:{{VHS_NR}}_sun" unit="%">
       </ftui-label>
     </ftui-column>
     <ftui-column width="16%">
       <ftui-label left="30px" style="position:relative;"
            text="UV:">
       </ftui-label>
     </ftui-column>
     <ftui-column width="10%">
       <ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')" left="-20px" style="position:relative;"
            [text]="WetterProplanta:{{VHS_NR}}_uv">
       </ftui-label>
     </ftui-column>
    </ftui-row>

sieht dann so aus:
Du darfst diesen Dateianhang nicht ansehen.

Viele Grüße
Jürgen