Beim Entwurf meines Tablet-UI habe ich ein Problem mit der Plazierung der Elemente.
Ein Beispiel zur Illustration:
<body>
<div class="page" id="H2_Wetter">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="8" data-sizey="10">
. . . .
Wie erwartet wird dieses Element "links oben" plaziert, entsprechend 'data-row="1" data-col="1" '.
Bei weiteren Elementen finden diese Angaben allerdings nur bedingt Anwendung. Es kommt mir immer eine "automatische Platzierung"
dazwischen; so in der Form, dass erst einmal die laufende Zeile aufgefüllt wird.
Ich vermute mal, dass man dies abschalten kann. Ich habe aber bisher nichts dazu gefunden.
Irre ich mich, oder habe ich etwas übersehen ?
Für einen Hinweis bin ich natürlich dankbar !
Peter
Ergänzung:
Natürlich könnte man 'Blindelemente' einsetzen, aber die 'feine Art' wäre dies sicherlich nicht !
zeig doch mal den code der bei Dir nicht funktioniert und einen Screenshot dazu. So ist es Glaskugellesen.
Ich habe nur zum Testen in die index.html einen Testrahmen eingefügt.
Teilinhalt von index.html:
. . . .
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<meta name="gridster_cols" content="20">
<meta name="gridster_rows" content="19">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="widget_margin" content="1">
<meta name='toast_position' content='bottom-right'>
<meta name="longpoll_type" content="websocket">
. . . .
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="12">
<header><div data-type="label" class="medium orange">Menu</header>
<div class="cell">
<div data-type="pagebutton" data-url="#H1_Test.html" data-load="#H1_Test" data-off-background-color="transparent" data-off-color="#606060" data-$ data-active-pattern="#H1_Test.html" data-icon="oa-audio_playlist" class="default top-space"></div>
. . . .
Die Testseite soll zur Illustration lediglich einige kleine Objekte darstellen:
</head>
<body>
<div class="page" id="H1_Test">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 1 1</div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 1 2</div>
</li>
<li data-row="1" data-col="10" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 1 10</div>
</li>
<li data-row="1" data-col="19" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 1 19</div>
</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 2 1</div>
</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 2 2</div>
</li>
<li data-row="2" data-col="19" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 2 19</div>
</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 3 1</div>
</li>
<li data-row="3" data-col="19" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 3 19</div>
</li>
<li data-row="10" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 10 1</div>
</li>
<li data-row="10" data-col="2" data-sizex="1" data-sizey="1">
<div data-type="label" class="medium orange" align="left">F 10 2</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Das Ergebnis zeigt das Bild, wobei m. E. das Element 'F 10 2' neben 'F 10 1' stehen müsste und nicht darüber. Dorthin rutscht es aber, da Zeile 2 noch nicht gefüllt ist.
Oder: mein Grundverständnis ist falsch !
Danke für die Mühe, mir auf die Sprünge zu helfen.
Peter