Swiper gridster sizey BUG?

Begonnen von Eisix, 19 November 2019, 14:19:51

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Eisix

19 November 2019, 14:19:51
Hallo,

versuche gerade einen Teil meiner Seite auf swiper umzustellen. Das funktioniert auch grundsätzlich aber die Gridster Boxen werden nicht in der richtigen Größe dargestellt. Die Boxen werden nur auf die Größe der enthaltenen Elemente aufgezogen und nicht auf die im <li  definierte Größe. Dies betrifft nur die Y-Richtung und das gleiche Verhalten habe ich auch wenn ich Flex verwende.

Hier im Forum habe ich einige ältere Einträge mit dem gleichen Problem gefunden aber keine Lösung.
Habe ich irgendwo einen Fehler oder hat das widget einen Fehler?

1_Musik.html
Code Auswählen

<!DOCTYPE html>
<html>
<head>
        <title>FHEM</title>
        <meta charset="UTF-8">
</head>
<body>
<div class="page" id="1_Musik">
<div class="gridster">
      <ul>
        <li data-row="1" data-col="1" data-sizex="17" data-sizey="1">
        <div class="sheet">
        <div class="row">
                <div class="cell swipertab inline">
        <div class="round" data-type="image" data-device="MediaPad_Player_sel" data-state-get="state" data-states='["Bose","((Onkyo)|(MediaPad)|(Yoga)|(LMS))"]' data-classes='["","faded"]' data-width="45" data-height="45" data-url="/fhem/images/Bose_Soundtouch10.jpg" data-fhem-cmd="set MediaPad_Player_sel Bose"></div>
                </div>
                <div class="cell swipertab inline">
                                                <div class="round" data-type="image" data-device="MediaPad_Player_sel" data-state-get="state" data-states='["Onkyo","((Bose)|(MediaPad)|(Yoga)|(LMS))"]' data-classes='["","faded"]' data-width="45" data-height="45" data-url="/fhem/images/Onkyo_TX-NR807.jpg" data-fhem-cmd="set MediaPad_Player_sel Onkyo"></div>
                </div>
                <div class="cell swipertab inline">
                                                <div class="round" data-type="image" data-device="MediaPad_Player_sel" data-state-get="state" data-states='["MediaPad","((Bose)|(Onkyo)|(Yoga)|(LMS))"]' data-classes='["","faded"]' data-width="45" data-height="45" data-url="/fhem/images/huawei-mediapad.png" data-fhem-cmd="set MediaPad_Player_sel MediaPad"></div>
                </div>
                <div class="cell swipertab inline">
                                                <div class="round" data-type="image" data-device="MediaPad_Player_sel" data-state-get="state" data-states='["Yoga","((Bose)|(Onkyo)|(MediaPad)|(LMS))"]' data-classes='["","faded"]' data-width="45" data-height="45" data-url="/fhem/images/Yoga.png" data-fhem-cmd="set MediaPad_Player_sel Yoga"></div>
                </div>
                <div class="cell swipertab inline">
                                                <div class="round" data-type="image" data-device="MediaPad_Player_sel" data-state-get="state" data-states='["LMS","((Bose)|(Onkyo)|(Yoga)|(MediaPad))"]' data-classes='["","faded"]' data-width="45" data-height="45" data-url="/fhem/images/Logitech_3.png" data-fhem-cmd="set MediaPad_Player_sel LMS"></div>
                </div>
        </div>
        </div>
        </li>
        <li data-row="2" data-col="1" data-sizex="17" data-sizey="14">
<div data-type="swiper"
          data-device="MediaPad_Player_sel"
data-get="state"
          data-states='["Bose","Onkyo","MediaPad","Yoga","LMS"]'
          class="nopagination">
<ul>
<li>
                                                <div data-type="include" data-url="2_Musik_Bose.html"></div>
                        </li>
                        <li>
          <div data-type="include" data-url="2_Musik_Onkyo.html"></div>
                        </li>
<li>
          <div data-type="include" data-url="2_Musik_MediaPad.html"></div>
                        </li>
<li>
          <div data-type="include" data-url="2_Musik_SB.html"></div>
                        </li>
<li>
          <div data-type="include" data-url="2_Musik_LMS.html"></div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>


2_Musik_Bose.html
Code Auswählen

<!DOCTYPE html>
<html>
<head>
        <title>FHEM</title>
        <meta charset="UTF-8">
</head>
<div class="gridster">
        <ul>
    <li data-row="1" data-col="1" data-sizex="5" data-sizey="14">ROW 1 | COL 1 | X 1 | Y 1</li>
    <li data-row="1" data-col="6" data-sizex="7" data-sizey="2">ROW 1 | COL 2 | X 1 | Y 1</li>
    <li data-row="3" data-col="6" data-sizex="7" data-sizey="2">ROW 1 | COL 3 | X 2 | Y 1</li>
    <li data-row="5" data-col="6" data-sizex="7" data-sizey="10">ROW 2 | COL 1 | X 2 | Y 2</li>
    <li data-row="1" data-col="13" data-sizex="5" data-sizey="7">ROW 2 | COL 3 | X 1 | Y 3</li>
    <li data-row="8" data-col="13" data-sizex="5" data-sizey="7">ROW 2 | COL 4 | X 1 | Y 1</li>
        </ul>
</div>
</body>
</html>


Gruß
Eisix

Eisix

#1
23 November 2019, 13:52:22
Hallo,

keiner eine Idee. So sieht es optisch aus.

Gruß
Eisix
Drucken
Nach oben Seiten1
Benutzer-Aktionen