Menü scrollbar

theophilou85 · 29 Mai 2017, 14:04:14

Grüß euch

Ich habe mir am Wochenende, nach dieser Anleitung ein Menü eingerichtet (https://wiki.fhem.de/wiki/FTUI_Widget_Pagetab). Sieht toll aus und klappt soweit auch wunderbar (am PC). Kommt jetzt das Handy ins Spiel, geht sich das links im Menü irgendwann mit dem Symbolen nicht mehr aus. Die Größe der Symbole skalieren möchte ich nicht, da ich mit meinen Wurstfingern (nüchtern bei zittriger Hand) die Icons nicht treffe.
Schön wäre eine Möglichkeit den linken Frame/Menüleiste scrollbar zu machen, aber ohne die hässlichen Scrollleisten, die ich noch aus meiner HTML-Zeit kenne. Die rechte Zielseite/n sollen natürlich stehenbleiben.
Hat hier vielleicht jemand einen Lösungsansatz?

airbeat92 · 06 Juni 2017, 19:00:49

Hallo theophilou85,

du musst um deine ganzen div-container noch zwei weitere herumbauen.
Als erstes fügst du im fhem-tablet-ui-user.css diese Zeilen ein:
.container1 {
height: 100%;
width: 100%;
border: 0px solid green;
overflow: hidden;
position: relative;
}
.container2 {
position: absolute;
top: 5px;
bottom: 50px;
left: 30px;
right: -17px;
border: 0px solid blue;
overflow: auto;
}

Anschließend setzt du vor dein Komplettes Menü diese zwei div:
<div class="container1">
<div class="container2">

<*HIER DEIN MENÜ*>

</div>
</div>

Es sind zwei div container da "container2" die scrollbar des "container1" verdeckt.
So habe ich zumindest ein Scrollbares Menü aufgebaut. Ich hoffe ich konnte dir damit helfen.

Standarduser · 07 Juni 2017, 17:41:02

Das Ergebnis (Screenshot) würde mich mal interessieren. Dann würde ich das vielleicht mal ins Wiki packen.

theophilou85 · 07 Juni 2017, 21:13:55

Danke für den Tipp, aber bei mir fangt es schon einmal damit an, dass ich kein fhem-tablet-ui-user.css habe, sondern nur: fhem-tablet-ui.css und fhem-tablet-ui-min.css. Habe es versuchshalber einmal die ...tablet-ui.css gepackt:

Code Auswählen

.border-lightgray {
    border: 3px solid #cccccc;
}

.container1 {
    height: 100%;
    width: 100%;
    border: 0px solid green;
    overflow: hidden;
    position: relative;
}
.container2 {
    position: absolute;
    top: 5px;
    bottom: 50px;
    left: 30px;
    right: -17px;
    border: 0px solid blue;
    overflow: auto;
}

.container.round {
    border-radius: 17px;

Hier die menu.html:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="container1">
<div class="container2">

<div class="gridster">
        <header>NAVIGATION</header>
			<div class="row">
				<div class="container">
					<div data-type="pagetab"
						data-url="status.html"
						data-icon="fa-home"
						class="cell"></div>
					<div data-type="label" class="cell">Status</div>
				</div>
			</div>
			<div class="row">
				<div class="container">
					<div data-type="pagetab"
						data-url="klima.html"
						data-icon="fa-thermometer-three-quarters"
						class="cell"></div>
					<div data-type="label" class="cell">Klima</div>
				</div>
			</div>
			<div class="row">
				<div class="container">
					<div data-type="pagetab"
						data-url="licht.html"
						data-icon="fa-lightbulb-o"
						class="cell"></div>
					<div data-type="label" class="cell">Licht</div>
				</div>
			</div>
			<div class="row">
				<div class="container">
					<div data-type="pagetab"
						data-url="geraete.html"
						data-icon="fa-microchip"
						class="cell"></div>
					<div data-type="label" class="cell">Geräte</div>
				</div>
			</div>
			<div class="row">
				<div class="container">
					<div data-type="pagetab"
						data-url="funktionen.html"
						data-icon="fa-toggle-on"^
						class="cell"></div>
					<div data-type="label" class="cell">Funktionen</div>
				</div>
			</div>
			<div class="row">
				<div class="container">
					<div data-type="pagetab"
						data-url="automatiken.html"
						data-icon="fa-refresh"
						class="cell"></div>
					<div data-type="label" class="cell">Automatiken</div>
				</div>
			</div>
			<div class="row">
				<div class="container">
					<div data-type="pagetab"
						data-url="einstellungen.html"
						data-icon="fa-gears"
						class="cell"></div>
					<div data-type="label" class="cell">Einstellungen</div>
				</div>
			</div>
</div>

</div>
</div>

</body>
</html>

Hat zur Folge dass mein Menü komplett weg ist

theophilou85 · 03 Juli 2017, 00:19:21

Irgendeine Erklärung dafür?

Amenophis86 · 03 Juli 2017, 08:15:00

Solltest du die Datei nicht haben, was mich wundert, dann einfach erstellen und in deinen anderen Dateien im Header einbinden. Das Problem ist, wenn du die Änderungen in der Datei fhem-tablet-ui-min.css einbaust, dann könnte es mim nächsten Update wieder rausfliegen. Dafür gibt es die andere Datei, diese wird beim Update nicht angefasst.

theophilou85 · 03 Juli 2017, 22:28:00

Könntest du mir die fhem-tablet-ui-user.css senden/freigeben? Ich denke, wenn ich eine leere Datei erstelle und nur den obigen Code einfüge, fehlt mir vermutlich noch einiges an Code.
Wenn ich das richtig verstanden habe, sollte es aber auch mit der fhem-tablet-ui.css bis zum Update funktionieren. Hat es leider nicht.

Amenophis86 · 04 Juli 2017, 19:48:43

In der Datei muss sonst nichts stehen, das heißt du kannst nur das eintragen. Eingebunden wird sie wie gesagt per

Code Auswählen

<link rel="stylesheet" href="css/fhem-tablet-ui-user.css"

Menü scrollbar

airbeat92