Ankündigung

Einklappen
Keine Ankündigung bisher.

"Group" innerhalb einer Navbar

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    "Group" innerhalb einer Navbar

    Hallo,

    ich habe mir heute mal die Zeit genommen um in meine CV die aktuelle Uhrzeit einzubauen. Hat so weit, nach der Anleitung gut funktioniert.
    Aber nun hätte ich die Uhrzeit, anstatt wie im Beispiel "swiss" in der linken Navbar lieber in der Top Nabar. Das habe ich auch soweit geschaft, nur das die Navbar bedingt druch die eingebaute group höher wird und ich nicht weiß warum das so ist.

    TopNavbarMitUhr.JPG

    Der Code der Navbar sieht wie folgt aus

    HTML-Code:
    <navbar position="top">
    <line>
    <layout colspan="0"/>
    </line>
    <pagejump target="Übersicht">
    <layout colspan="0"/>
    <label><icon name="control_all_on_off"/>Übersicht</label>
    </pagejump>
    <line>
    <layout colspan="0"/>
    </line>
    <pagejump target="Küche">
    <layout colspan="0"/>
    <label><icon name="control_building_int_eg"/>Räume</label>
    </pagejump>
    <line>
    <layout colspan="0"/>
    </line>
    <pagejump target="Fussbodenheizung">
    <layout colspan="0"/>
    <label><icon name="sani_floor_heating"/>FBH</label>
    </pagejump>
    <line>
    <layout colspan="0"/>
    </line>
    <pagejump target="Heizung">
    <layout colspan="0"/>
    <label><icon name="sani_boiler_temp"/>Heizung</label>
    </pagejump>
    <line>
    <layout colspan="0"/>
    </line>
    <pagejump target="Aussen">
    <layout colspan="0"/>
    <label><icon name="control_building_outside"/>Aussen</label>
    </pagejump>
    <line>
    <layout colspan="0"/>
    </line>
    <pagejump target="Wetter">
    <layout colspan="0"/>
    <label><icon name="weather_station_generic"/>Wetter</label>
    <widgetinfo>
    <info format="%.1f °C">
    <layout colspan="0" width="50px"/>
    <address transform="DPT:9.001">9/4/0</address>
    </info>
    </widgetinfo>
    </pagejump>
    <line>
    <layout colspan="0"/>
    </line>
    <pagejump target="FensterÜbersicht">
    <layout colspan="0"/>
    <label><icon name="fts_window_2w"/>Fenster/Türen</label>
    </pagejump>
    <line>
    <layout colspan="0"/>
    </line>
    <pagejump target="KNX Bus">
    <layout colspan="0"/>
    <label><icon name="edit_settings"/>Technik</label>
    </pagejump>
    <line>
    <layout colspan="0"/>
    </line>
    <group name="Aktuelle Zeit" nowidget="true">
    <layout colspan="2"/>
    <group nowidget="false" align="left">
    <strftime lang="de" format="%H:%M" class="timebig">
    <layout colspan="2"/>
    </strftime>
    <strftime lang="de" format="%a, %d. %B %Y" class="timedate">
    <layout colspan="2"/>
    </strftime>
    </group>
    </group>
    <line>
    <layout colspan="0"/>
    </line>
    </navbar>

    Hat einer von euch vielleicht eine Ahnung woran das liegt?


    Gruß
    Ralf

    Gruß
    Ralf

    #2
    Könntest Du bitte mal deinen Code mit den entsprechenden Einrückungen veröffentlichen? Der Button "Quellmode" (links mit <>) im Editor wirkt Wunder, wenn Du ihn vor dem Pasten benutzt.
    Die Vorgehensweise ist in diesem Beitrag beschrieben:
    https://knx-user-forum.de/forum/supportforen/smarthome-py/1497890-hilfe-zu-smarthomeng-erhalten-python-code-und-yaml-konfig-richtig-einf%C3%BCgen .
    Gruß
    Hans
    Zuletzt geändert von Tontechniker; 23.05.2020, 12:18.

    Kommentar


      #3
      Hallo Hans,

      danke für deinen Tip, das habe ich gesucht aber nicht gefunden.... Sorry noch mals!

      HTML-Code:
       <navbar position="top">
            <line>
              <layout colspan="0"/>
            </line>
            <pagejump target="Übersicht">
              <layout colspan="0"/>
              <label><icon name="control_all_on_off"/>Übersicht</label>
            </pagejump>
            <line>
              <layout colspan="0"/>
            </line>
            <pagejump target="Küche">
              <layout colspan="0"/>
              <label><icon name="control_building_int_eg"/>Räume</label>
            </pagejump>
            <line>
              <layout colspan="0"/>
            </line>
            <pagejump target="Fussbodenheizung">
              <layout colspan="0"/>
              <label><icon name="sani_floor_heating"/>FBH</label>
            </pagejump>
            <line>
              <layout colspan="0"/>
            </line>
            <pagejump target="Heizung">
              <layout colspan="0"/>
              <label><icon name="sani_boiler_temp"/>Heizung</label>
            </pagejump>
            <line>
              <layout colspan="0"/>
            </line>
            <pagejump target="Aussen">
              <layout colspan="0"/>
              <label><icon name="control_building_outside"/>Aussen</label>
            </pagejump>
            <line>
              <layout colspan="0"/>
            </line>
            <pagejump target="Wetter">
              <layout colspan="0"/>
              <label><icon name="weather_station_generic"/>Wetter</label>
              <widgetinfo>
                <info format="%.1f °C">
                  <layout colspan="0" width="50px"/>
                  <address transform="DPT:9.001">9/4/0</address>
                </info>
              </widgetinfo>
            </pagejump>
            <line>
              <layout colspan="0"/>
            </line>
            <pagejump target="FensterÜbersicht">
              <layout colspan="0"/>
              <label><icon name="fts_window_2w"/>Fenster/Türen</label>
            </pagejump>
            <line>
              <layout colspan="0"/>
            </line>
            <pagejump target="KNX Bus">
              <layout colspan="0"/>
              <label><icon name="edit_settings"/>Technik</label>
            </pagejump>
            <line>
              <layout colspan="0"/>
            </line>
            <group name="Aktuelle Zeit" nowidget="true">
              <layout colspan="2"/>
              <group nowidget="false" align="left">
                <strftime lang="de" format="%H:%M" class="timebig">
                  <layout colspan="2"/>
                </strftime>
                <strftime lang="de" format="%a, %d. %B %Y" class="timedate">
                  <layout colspan="2"/>
                </strftime>
              </group>
            </group>
            <line>
              <layout colspan="0"/>
            </line>
          </navbar>

      in meiner verlinkten css datei steht noch folgendes

      Code:
      .custom_timebig {
          padding: 0;
          margin: 0;
          color: #75d5ff;
          min-height: 0mm;
          line-height: 5mm;
          font: bold 6mm "Lucida Grande", Lucida, Verdana, sans-serif;
      }
      
      .custom_timebig &gt; div.strftime_value {
          text-align: left;
          line-height: 5mm;
      }
      
      .custom_timedate {
          padding: 0;
          margin: 0;
          min-height: 0mm;
          line-height: 5mm;
          font: bold 3mm "Lucida Grande", Lucida, Verdana, sans-serif;
      }
      
      .custom_timedate &gt; div.strftime_value {
          text-align: left;
      line-height: 7mm;
      }

      Vielen Dank!

      Gruß
      Ralf
      Gruß
      Ralf

      Kommentar


        #4
        Dir fehlende da noch folgende CSS-Regeln:

        Code:
        #navbarTop .navbar .widget.custom_timebig { min-height: 0; }
        #navbarTop .navbar .group { margin: 0; border: none; }
        Und warum da 2 ineinander verschachtelte Groups sind, verstehe ich nicht. Ich würde das eher so machen

        Code:
           <group name="Aktuelle Zeit" nowidget="true">
                <layout colspan="2"/>
                <strftime lang="de" format="%H:%M" class="timebig">
                  <layout colspan="1"/>
                </strftime>
                <strftime lang="de" format="%a, %d. %B %Y" class="timedate">
                  <layout colspan="1"/>
                </strftime>
           </group>
        Gruß
        Tobias

        Kommentar


          #5
          Hallo,

          danke für den die Tipps.

          Den Code packe ich in die CSS-Datei oder?
          Auf jeden Fall scheint es dann zu funktionieren...

          Wegen der Verschachtelung, die hat sich irgendwie beim vielen Herumspielen eingeschlichen, habe ich entfernt ;-)

          Noch eine Frage, wenn ich den colspan auf 1 setzte dann steht Zeit und Datum übereinander, was ja klar ist.
          Was müsste ich in der CSS-Datei angeben wenn ich gerne Zeit und Datum untereinander, zentriert haben möchte um den colspan auf 1 zu setzten?

          Leider ist HTML und auch CSS für mich absolutes Neuland.

          Danke!

          Gruß
          Gruß
          Ralf

          Kommentar

          Lädt...
          X