Verständnisproblem? Informationen unter Element bei Verwendung von col-1-2

kleineranfaenger · 13 September 2017, 16:25:19

Hallo zusammen,

habe bereits einige Designs mit TabletUI umgesetzt, aber das Problem hier verstehe ich nicht. Ich möchte verschiedene Elemente auf meiner Page darstellen und in jedes natürlich einige Infos darstellen. Verwende ich jetzt z.B. col-1-2 um mir die Box auf zu teilen, funktioniert das für die erste Reihe... aber wenn ich dann etwas hinzufüge, egal wie, komme ich immer unter dem Element raus - siehe Screenshot. Warum? Was mache ich falsch?

Hier mein HTML Code:

Code Auswählen


<html>
<head>   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="94">
    <meta name="widget_base_height" content="98">
    <meta name="gridster_cols" content="10">
    <meta name="gridster_rows" content="9">    
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="0">    
    <meta name="widget_margin" content="1">
	<meta name="longpoll" content="1">
	<meta name="longpoll_type" content="1">	
	<meta name="longpoll_filter" content=".*">
	<meta name="longpoll_maxage" content="240">
	<meta name="shortpoll_interval" content="600">
    <meta name="debug" content="1">

    <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/css/fhem-tablet-ui-wdtimer.css" />
	
    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->	
	<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" /> 
	<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />	
	
    <!-- <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" /> -->
	<link rel="stylesheet" href="customfonts/my/style.css">	
	
	<!-- Javascript -->
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>


<title>there is no place like 127.0.0.1</title>
</head>

<body>
<div class="gridster">
<ul>
	<li data-row="1" data-col="1" data-sizex="4" data-sizey="4" style="background-color:#2598c8">
		<div data-type="label" class="big thin">myplace</div>		
		<div class="col-1-2">
			test
		</div>
		<div class="col-1-2">
			test2
		</div>
			test3
	</li>
	
	
</ul>
</div>
</body>
</html>

Ist bestimmt wieder nur ein Denkfehler

Danke und Gruß.

setstate · 13 September 2017, 16:48:07

Die Cols beanspruchen 100% Höhe des Parent Containers, in deinem Fall <li>
Wenn du mehrere Reihen haben willst, musst du class="row" benutzen

li
row
col-50
col-50
row
col-50
col-50

kleineranfaenger · 13 September 2017, 16:58:58

Danke setstate! Kämpfe mich bereits durch die ganzen Änderungen des Updates vom 03.09.,, siehe https://forum.fhem.de/index.php/topic,76167.0/all.html.

Habe schon meine Page für das Tablet angepasst, kämpfe nun mit der zweiten und danach muss ich leider noch an das "Mobile" ran, da mir ebenfalls alles dort um die Ohren geflogen ist :/

FHEM Forum

Verständnisproblem? Informationen unter Element bei Verwendung von col-1-2

kleineranfaenger

setstate

kleineranfaenger