Probleme mit PageButton

Mundus · 22 Mai 2017, 23:22:22

Hallo FHEM-Gemeinde,

ich habe derzeit Probleme mit dem PageButton, bei denen auch eine Forums-Recherche noch keine Lösung gebracht hat.

1. Leider wird der PageButton-Container m.E. nicht an der richtigen Stelle angezeigt. Entsprechend meines Codes (s.u.) müsste der Container in Spalte 13 ausgegeben werden, wird aber erst in Spalte 15 oder 16 ausgegeben. Warum das so ist, verstehe ich nicht.

2. Sobald ich PageButton auswähle bzw. erneut auswähle, treten einige ungewollte Seiteneffekte aus. Beispielhaft sei gesagt, dass

select widgets werden wiederholt ausgegeben.
label widgets werden nicht mehr angezeigt.
symbol widgets verschwinden ganz.
data-active-pattern arbeitet nicht wie gewünscht. Die Markierung des vorherigen PageButtons bleibt erhalten.

3. Führe ich einen Reload auf der Seite aus, wird lediglich das Menü geladen und kein Inhalt einer Seite.

Vielleicht hat das Verhalten etwas damit zu tun, dass ich grundsätzlich ein Menü mit PageTab erstellt habe und auf einer Seite mit PageButton eine Verschachtelung erreichen will. Zum bessern Verständnis die aus meiner Sicht relevanten Codebereiche.
1. PageButton-Menü

Code Auswählen

<!--############################### Menue-pagebutton #################################################-->
<li data-row="1" data-col="12" data-sizex="1" data-sizey="7">
        <header class="big bg-gray">PageButton</header>
        <div data-type="pagebutton"
                 data-url="#pageButton/sub_page1.html"
                 data-load="#sub_page1"
                 data-active-pattern=".*#pageButton/sub_page1.html"
                 data-icon="mi-weekend"
                 class="default"></div>
        <div data-type="pagebutton"
                 data-url="#pageButton/sub_page2.html"
                 data-load="#page2"
                 data-active-pattern=".*#pageButton/sub_page2.html"
                 data-icon="mi-music_video"></div>
        <div data-type="pagebutton"
                 data-url="#page3.html"
                 data-load="#page3"
                 data-active-pattern=".*#page3.html"
                 data-icon="mi-tv"></div>
</li>
<!--############################### Ende Menue ############################################-->

2. Der Code für den Container, die Ausgabe erfolgt m.E. aber nicht an der gewünschten Position

Code Auswählen

<!--########################## PageButton-Container ######################################-->
<li data-row="1" data-col="13" data-sizex="1" data-sizey="7">
        <div class="page" id="sub_page1"></div>
        <div class="page" id="page2"></div>
        <div class="page" id="page3"></div>
</li>
<!--########################## Ende PageButton-Container ######################################-->

3. Der Code für eine PageButton Seite, wobei die derzeit noch leer sind

Code Auswählen

<html>
<title>FHEM</title>
<head></head>
<body>
<div class="page" id="sub_page1">
        <div class="gridster">
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
                <header class="big left bg-gray">Test Seite</header>
                <div data-type="label">Page 1</div>
        </li>
        </div>
</div>
</body>

4. Und die Code-Bereiche der nicht mehr korrekt dargestellten WIdgets

Code Auswählen


<div data-type="select"
                        data-items='["1-24"]'
                        class="left">
</div>
...
<div class="col left-align" data-type="label">Beleuchtung</div> <!--wird auch PageButton-Seite angezeigt-->
<div class="col left-space left-align" data-type="label" data-device="ZWave_Bewegungssensor" data-get="luminance"></div> <!--wird auch PageButton-Seite angezeigt-->
...
<div data-type="symbol"
                                data-device="dAnzahlAnrufe"
                                data-states='["0","Recount","off","[1-9]","[1-9][0-9]"]'
                                data-icons='["fa-phone","fa-phone","fa-phone","fa-phone warn","fa-phone warn"]'
                                data-colors='["gray","gray","gray","orange","orange"]'>
</div>

Ich hoffe, ihr könnt mir helfen und mir sagen, wo meine Probleme begründet sind.

Gruß

Mundus

amenomade · 23 Mai 2017, 01:09:40

Auf welcher Seite (in welcher Datei) sind 1., 2. und 4.?

Wenn Du ein pagebutton Menü in Spalte 1 hast, dann sind alle widgets der Subpage eine Spalte nach recht verschoben: ein Widget, der in der Subpage in Spalte 1 definiert ist, wird dann in Spalte 2 angezeigt, rechts vom Pagebutton Menü.

Aber, wie gesagt, um genau zu verstehen, fehlt die Verschachtelung der verschiedenen Seiten / Divs, und wie Du genau das ganze willst.
Ich vermute 1. und 2. in index.html ? Aber 4.?

amenomade · 23 Mai 2017, 01:17:19

Ah und noch ein Ding.
Wenn Du mehrere li an der gleiche Position hast, macht gridster was er will, um alle anzuzeigen: z.B. einige Widgets verschieben.

Mundus · 23 Mai 2017, 23:52:12

Hallo amenomade,

ich versuche mal deine Fragen zu beantworten. Meine Testseite liegt im Verzeichnis "/opt/fhem/www/tablet/" und heißt trainiPage.html. Der gesamte Code sieht wie folgt aus

Code Auswählen


<!DOCTYPE html>
<html>
    <title>Übungsseite</title>
<head>
</head>

<body>
    <div class="gridster">
        <ul>
<!--############################### Menue #################################################-->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menue.html"></li>
<!--############################### Ende Menue ############################################-->
<!--############################# Test Bewegungsmelder ###########################################-->
                            
<li data-row="1" data-col="2" data-sizex="2" data-sizey="3">
    <header class="big bg-gray">Bewegungsmelder</header>
	<div class="row top-space"> 
		<div class="col left-align" data-type="label">Bewegung</div>
		<div class="col left-space left-align" data-type="label" data-device="ZWave_Bewegungssensor" data-get="state"></div>
	</div>
	<div class="row">
		<div class="col left-align" data-type="label">Beleuchtung</div>
		<div class="col left-space left-align" data-type="label" data-device="ZWave_Bewegungssensor" data-get="luminance"></div>
	</div>	
	<div class="row">
		<div class="col left-align" data-type="label">Status</div>
		<div class="col left-align left-space" data-type="label" data-device="ZWave_Bewegungssensor" data-get="reportedState"></div>
	</div>	
	<div class="row">
		<div class="col left-align" data-type="label">Temperatur</div>
		<div class="col left-align left-space" data-type="label" data-device="ZWave_Bewegungssensor" data-get="temperature"></div>
	</div>	
	<div class="row">
		<div class="col" data-type="symbol"
				 data-device="fu_Licht"
				 data-get="state"
				 data-icon="fa-lightbulb-o"
				 data-states='["dim 99","dim ((9[0-8])|([1-8][0-9])|([1-9]))","off"]'
				 data-colors='["green","orange","gray"]'>
		</div>
	</div>	
	<div class="row">
		<div class="col left-align" data-type="label">state Licht</div>
		<div class="col left-align left-space" data-type="label" data-device="fu_Licht" data-get="state"></div>
	</div>	
</li>
<!--############################# Test Bewegungsmelder ###########################################-->
<!--############################### Timepicker ############################################-->
<li data-row="7" data-col="2" data-sizex="2" data-sizey="2">
    <header class="big bg-gray">Fernseher aus</header>
	<div class="row top-space">
		<div data-type="select"
			data-items='["1-24"]'
			class="left">
		</div>
		<div data-type="select"
			data-items='["0-60"]'
			class="right">
		</div>
	</div>
</li>
<!--############################# Ende Timepicker ###########################################-->
<!--############################# Anrufliste ###########################################-->
<li data-row="1" data-col="4" data-sizex="5" data-sizey="5">
	<header class="big bg-gray">TEMPLATE TEST CALL</header>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"1-state","par02":"1-timestamp","par03":"1-name","par04":"1-number","par05":"1-duration"}'>
        </div>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"2-state","par02":"2-timestamp","par03":"2-name","par04":"2-number","par05":"2-duration"}'>
        </div>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"3-state","par02":"3-timestamp","par03":"3-name","par04":"3-number","par05":"3-duration"}'>
        </div>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"4-state","par02":"4-timestamp","par03":"4-name","par04":"4-number","par05":"4-duration"}'>
        </div>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"5-state","par02":"5-timestamp","par03":"5-name","par04":"5-number","par05":"5-duration"}'>
        </div>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"6-state","par02":"6-timestamp","par03":"6-name","par04":"6-number","par05":"6-duration"}'>
        </div>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"7-state","par02":"7-timestamp","par03":"7-name","par04":"7-number","par05":"7-duration"}'>
        </div>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"8-state","par02":"8-timestamp","par03":"8-name","par04":"8-number","par05":"8-duration"}'>
        </div>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"9-state","par02":"9-timestamp","par03":"9-name","par04":"9-number","par05":"9-duration"}'>
        </div>
	<div data-template="templates/Anruf_template.html" data-parameter='{"par01":"10-state","par02":"10-timestamp","par03":"10-name","par04":"10-number","par05":"10-duration"}'>
        </div>
</li>
<!--############################# Ende Anrufliste ###########################################-->
<!--############################# Template Wetter ###########################################-->
<li data-row="1" data-col="9" data-sizex="3" data-sizey="3">
	<header class="big bg-gray">TEMPLATE WETTER</header>
		<div data-type="swiper" data-height="180px" class="top-space">
			<ul>
				<li>	
				<div data-template="templates/Wetter_template.html" data-parameter='{"par01":"Heute","par02":"WetterStadt","par03":"fc1_day_of_week","par04":"fc1_date","par05":"fc1_condition","par06":"fc1_high_c","par07":"fc1_low_c"}'></div>
				</li>
				<li>	
					<div data-template="templates/Wetter_template.html" data-parameter='{"par01":"Morgen","par02":"WetterStadt","par03":"fc2_day_of_week","par04":"fc2_date","par05":"fc2_condition","par06":"fc2_high_c","par07":"fc2_low_c"}'></div>
				</li>
				<li>	
					<div data-template="templates/Wetter_template.html" data-parameter='{"par01":"Morgen","par02":"WetterStadt","par03":"fc3_day_of_week","par04":"fc3_date","par05":"fc3_condition","par06":"fc3_high_c","par07":"fc3_low_c"}'></div>
				</li>
			</ul>
		</div>
</li>
<!--############################# Ende Template Wetter ###########################################-->
<!--############################# Test Anrufliste###########################################-->
<li data-row="4" data-col="9" data-sizex="3" data-sizey="2">
	<header class="big bg-gray">Test align</header>
		<div class="row">
			<div class="col left-align"
				data-type="label"
				data-device="ZWave_Bewegungssensor" 
				data-get="state">
			</div>
			<div class="col right-align"
				data-type="label"
				data-device="ZWave_Bewegungssensor" 
				data-get="state">
			</div>
		</div>
		<div class="row">
			<div class="col"
				data-type="label"
				data-device="ZWave_Bewegungssensor" 
				data-get="state">
			</div>
			<div class="col"
				data-type="label"
				data-device="ZWave_Bewegungssensor" 
				data-get="state">
			</div>
		</div>
</li>
<!--############################# Ende Test Anrufliste###########################################-->
<!--############################# Test Button/push/usw ###########################################-->
<li data-row="9" data-col="2" data-sizex="7" data-sizey="2">
	<header class="big bg-gray">Test Bereich Telefon</header>
	<div class="row">
		<div class="col">
			<header class="small bg-gray">Symbol</header>
			<div data-type="symbol"
				data-device="dAnzahlAnrufe"
				data-states='["0","Recount","off","[1-9]","[1-9][0-9]"]'
				data-icons='["fa-phone","fa-phone","fa-phone","fa-phone warn","fa-phone warn"]'
				data-colors='["gray","gray","gray","orange","orange"]'>
			</div>
		</div>
		<div class="col">
			<header class="small bg-gray">Push</header>
			<div data-type="push"
				data-icon="fa-bell"
				data-get="state"
				data-get-off="0|Recount"
				data-get-on='["[1-9]","[1-9][0-9]"]'
				data-device="dAnzahlAnrufe"
				data-warn="state"
				data-background-icon="fa-none"
				data-set-off="Recount"
				data-set-on="">
				<div data-type="link"
					data-url="#mainpage.html"
					data-load="mainpage.html"
					data-icon="fa-none">
				</div>
			</div>
		</div>
		<div class="col">
			<header class="small bg-gray">Switch</header>
			<div data-type="switch"
				data-get="state"
				data-get-off="0|Recount"
				data-get-on='["[1-9]","[1-9][0-9]"]'
				data-device="dAnzahlAnrufe"
				data-warn="state"
				data-set-off="Recount"
				data-set-on="">
			</div>
		</div>
		<div class="col">
			<header class="small bg-gray">Sw Link</header>
			<div>
				<div data-type="switch"
					data-get="state"
					data-get-off="0|Recount"
					data-get-on='["[1-9]","[1-9][0-9]"]'
					data-device="dAnzahlAnrufe"
					data-warn="state"
					data-set-off="Recount"
					data-set-on="">
					<div data-type="pagetab"
						data-url="mainpage.html"
						data-load="mainpage.html"
						data-icon="fa-none">
					</div>
				</div>
			</div>
		</div>
		<div class="col">
			<header class="small bg-gray">Pagetab</header>
			<div data-type="pagetab"
				data-url="mainpage.html"
				data-device="dAnzahlAnrufe"
				data-get="state" 
				data-get-on='["[1-9]","[1-9][0-9]"]'
				data-get-off="!on"
				data-states='["0","[1-9]","[1-9][0-9]"]'
				data-icons='["fa-phone","fa-phone warn","fa-phone warn"]'
				data-colors='["gray","orange","orange"]'
				data-set="0">
			</div>
		</div>
		<div class="col">
			<header class="small bg-gray">Forum</header>
			<div data-type="push"
				data-icon="fa-bell"
				data-get="state"
				data-get-on='["[1-9]","[1-9][0-9]"]' 
				data-get-off='["0","Recount"]' 
				data-device="dAnzahlAnrufe"
				data-warn="state"
				data-background-icon="fa-none"
				data-set-off="Recount"
				data-set-on="">
				<a href="#mainpage.html"></a>
			</div>
		</div>
		<div class="col">
			<header class="small bg-gray">Test Info</header>
			<div data-type="link"
				data-fhem-cmd="set dAnzahlAnrufe Recount">delete
			</div>
			<div data-type="link"
				data-fhem-cmd="set dAnzahlAnrufe 20">Anrufe 20 
			</div>
			<div data-type="link"
				data-fhem-cmd="set dAnzahlAnrufe 4">Anrufe 4
			</div>
			<div data-type="label" data-device="dAnzahlAnrufe"></div>
		</div>
	</div>
</li>
<!--############################# Ende Test Button/push/usw ###########################################-->
<!--############################# Test Server ###########################################-->
<li data-row="9" data-col="9" data-sizex="3" data-sizey="2">
	<header class="big bg-gray">Test FritzBox</header>
	<div class="row" 
		data-type="label"
		data-device="dFritzLan"
		data-get="Lan1">
	</div>
	<div class="row top-space">
		<div class="col left" 
			data-type="label"
			data-device="dFritzLan"
			data-get="Lan1"
			data-part="(\w+):.*">
		</div>
		<div class="col right" 
			data-type="label"
			data-device="dFritzLan"
			data-get="Lan1"
			data-part=".*:(\w+.\w+.\w+.\w+)">
		</div>
	</div>
	<div class="row"
		data-type="label"
		data-device="FritzBox"
		data-get="box_fwVersion">
	</div>
	<div class="row"
		data-type="label"
		data-device="FritzBox"
		data-get="box_fwVersion"
		data-part=".*.(\d+.\d+)">
	</div>
	<div class="row"
		data-type="label"
		data-device="FritzBox"
		data-get="box_model"
		data-part=".*\s(\w+)\s.*">
	</div>
</li>
<!--############################# Test Ende Server ###########################################-->
<!--############################### Menue-pagebutton #################################################-->
<li data-row="1" data-col="12" data-sizex="1" data-sizey="7">
	<header class="big bg-gray">PageButton</header>
	<div data-type="pagebutton"
		 data-url="#pageButton/sub_page1.html"
		 data-load="#sub_page1"
		 data-active-pattern=".*#pageButton/sub_page1.html"
		 data-icon="mi-weekend"
		 class="default"></div>
	<div data-type="pagebutton"
		 data-url="#pageButton/sub_page2.html"
		 data-load="#page2"
		 data-active-pattern=".*#pageButton/sub_page2.html"
		 data-icon="mi-music_video"></div>
	<div data-type="pagebutton"
		 data-url="#page3.html"
		 data-load="#page3"
		 data-active-pattern=".*#page3.html"
		 data-icon="mi-tv"></div>
</li>
<!--############################### Ende Menue ############################################-->
<!--########################## PageButton-Container ######################################-->
<li data-row="1" data-col="13" data-sizex="1" data-sizey="7">
	<div class="page" id="sub_page1"></div>
	<div class="page" id="page2"></div>
	<div class="page" id="page3"></div>
</li>
<!--########################## Ende PageButton-Container ######################################-->
        </ul>
    </div>
</body>

</html>

Das erste Menü, welches als PageTab definiert ist, sieht so aus

Code Auswählen

<html>
<body>
    <header class="big bg-gray">Menü</header>
    <div class="cell">
	<div class="bottom bottom-space-2x">
           <div data-type="clock" data-format="H:i" class="large"></div>
           <div data-type="clock" data-format="d.n.Y" class="small"></div>
        </div>
        <div data-type="pagetab" data-url="mainpage.html" data-icon="fa-home" data-on-background-color="green" class="top-space"></div>
        <div data-type="pagetab" data-url="pgButtonTraini.html"  data-icon="fa-music" class="top-space"></div>
        <div data-type="pagetab" data-url="sub3.html"  data-icon="fa-sliders" class="top-space"></div>
        <div data-type="pagetab" data-url="serverPage.html"  data-icon="oa-it_router" data-on-background-color="green" class="top-space"></div>
        <div data-type="pagetab" data-url="trainiPage.html"  data-icon="oa-message_service" data-on-background-color="orange" class="top-space"></div>
    </div>
</body>
</html>

Die Seiten der PageButton liegen unter /opt/fhem/www/tablet/pageButton/ und der Code einer PageButton ist bei meinem ersten Post unter 3. festgehalten.Eigentlich müsste das Gridster nicht machen was es will, sondern was ich ihm sage, da ich m.E. keinen Fehler in der Aufteilung habe.

amenomade · 24 Mai 2017, 02:14:34

Ok jetzt verstanden.

Wahrscheinlich nicht die Lösung, aber :

1. Hast Du irgendwo Headers wie

Code Auswählen

	<meta name="gridster_cols" content="16">
	<meta name="gridster_rows" content="8">	
	<script src="js/fhem-tablet-ui.js"></script>

?

2. Rein von HTML her, sollten nw. <li> Items in einer <ul> Liste sein

3. Deine Definition sieht so wie das begefügte Bild aus. Normalerweise sollte er die beide untere Divs automatisch nach oben verschieben. Aber... da Du Verschiebungen hast, wäre besser für die Analyse, wenn alles ordentlich geschrieben wäre.

Hast Du schon probiert, die Dinge in data-col 9 auszukommentieren? Um zu sehen, wo die Pagebuttons sich verschieben.

Mundus · 24 Mai 2017, 21:10:55

Hi,

vielen Dank für deine Hilfe.
1. Meine Index-Datei in der mein Header aufgeführt ist, sieht wie folgt aus:

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->

    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta name="widget_base_width" content="70">  <!-- 9 cols -->
    <meta name="widget_base_height" content="80"> <!-- 7 rows -->

    <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="widget_min_cols" content="13">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->


    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="gridster">
        <ul>
<!--######################################### Menue ############################################-->
            <li data-row="1" data-col="1" data-sizey="1" data-sizex="7" data-template="menue.html"></li>
<!--############################# Ende Menue ###########################################-->

        </ul>
    </div>
</body>

</html>

2. Habe ich jetzt umgesetzt und

Zitat von: Mundus am 22 Mai 2017, 23:22:22
1. Leider wird der PageButton-Container m.E. nicht an der richtigen Stelle angezeigt. Entsprechend meines Codes (s.u.) müsste der Container in Spalte 13 ausgegeben werden, wird aber erst in Spalte 15 oder 16 ausgegeben. Warum das so ist, verstehe ich nicht.

damit gelöst

.
Schlampige Programmierung

3. Den Fehler habe ich behoben, wobei dein Bild das Wetter-Widget nur zwei Spalten, nach meinem html-Dokument 3 Spalten groß sein müsste. Die Fehler bleiben aber. Ich habe sogar alle Inhalte aus der Seite entfernt und wieder eingefügt...

Mein Verdacht ist, dass ich schlampig (falsch) gearbeitet habe und die über PageTab geladene Web-Seite erneut, aber dann falsch geladen wird, wenn ich einen Page-Button auswähle.

Dies würde das duplizieren beim TimePicker erklären. Außerdem verschwindet auch die Markierung bei meinem PageTab (Hauptmenü) wenn ich einen PageButton auswähle. Ferner wird die Markierung bei Wechsel der PageButtons nicht deaktiviert. So sind teilweise mehrer PageButtons markiert....

Wie gesagt, den Fehler vermute ich in meiner Programmierung.

Gruß

Mundus

Mundus · 29 August 2017, 13:37:30

Hallo,

ich versuche dieses Thema nochmal zu reaktivieren. Leider habe ich die bereits beschriebenen Fehler unter 2.

Zitat von: Mundus am 22 Mai 2017, 23:22:22
2. Sobald ich PageButton auswähle bzw. erneut auswähle, treten einige ungewollte Seiteneffekte aus. Beispielhaft sei gesagt, dass

select widgets werden wiederholt ausgegeben.
label widgets werden nicht mehr angezeigt.
symbol widgets verschwinden ganz.
data-active-pattern arbeitet nicht wie gewünscht. Die Markierung des vorherigen PageButtons bleibt erhalten.

immer noch. Zur Fehleranalyse habe ich mein bestehendes Menü mit Pagetab um einen Eintrag erweitert und dort als "quasi" Untermenü ein Pagebutton Menü eingefügt. Sobald ich von dem Default "pageButton" auf einen weiteren PageButton wechsel, wird zwar die neue Seite angezeigt, jedoch bleibt der default PageButton ebenfalls im Zustand "on"

Leider habe ich keine Idee woran das liegt und bin auf eure Hilfe angewiesen. Habt ihr Ideen, wie ich die Ursache finden bzw. das Problem lösen kann? Funktioniert die Kombination PageTab als Grundmenü und Pagebutton als Untermenü nicht?

Gruß