Einen Abschnitt als Footer fixieren

Einleitung
In modernen Webanwendungen und Benutzeroberflächen ist es häufig erforderlich, bestimmte Elemente wie Navigation oder wichtige Informationen stets sichtbar zu halten. Ein fixierter Footer kann dabei helfen, den Zugriff auf diese Elemente zu erleichtern, ohne dass der Benutzer durch Scrollen navigieren muss. In diesem Artikel wird erläutert, wie man einen Abschnitt als Footer in einer Smart-Home-Oberfläche implementiert.

Problem
Die Frage bezieht sich auf die Möglichkeit, einen Abschnitt oder eine Raster-Card als fixen Footer in einer Benutzeroberfläche zu erstellen. Der Benutzer möchte eine Navigation mit Karten anlegen, die immer am unteren Rand des Bildschirms sichtbar bleibt.

Lösung
Um einen Abschnitt als Footer zu fixieren, kann eine benutzerdefinierte Karte (custom card) verwendet werden. Die Lösung beinhaltet die Verwendung von CSS-Stilen, um die Positionierung und das Aussehen der Karte zu steuern. Die folgenden Schritte und der bereitgestellte Code zeigen, wie dies umgesetzt werden kann.

Schritte zur Umsetzung
1. Erstelle eine benutzerdefinierte Karte: Verwende die custom:bubble-card, um die gewünschten Navigationslinks zu erstellen.
2. Füge CSS-Stile hinzu: Definiere die Stile für die Karte, um sie am unteren Rand des Bildschirms zu fixieren.
3. Implementiere die Karte in deiner Benutzeroberfläche: Füge den Code in die Konfiguration deiner Smart-Home-Oberfläche ein.

Hier ist der Beispielcode, der verwendet werden kann:

type: custom:bubble-card
styles: |
  .bubble-icon {
    --mdc-icon-size: 30px !important;
    height: 35px;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-right: 10px; 
    color: var(--primary-color);
  } 
  * { 
    font-size: 10px !important;
    border: none !important;
    border-radius: 0px !important;
    background: rgba(0,0,0,0) !important;
  }
card_type: horizontal-buttons-stack
auto_order: false
1_name: ""
1_icon: mdi:keyboard-backspace
1_link: /dashboard-test/home
2_link: /dashboard-test/heizung
2_icon: mdi:heating-coil
3_link: /dashboard-test/licht
3_icon: mdi:lamps
4_link: /dashboard-test/garten
4_icon: mdi:pool
5_link: /dashboard-test/wetter
5_icon: mdi:weather-partly-cloudy
6_link: /dashboard-test/solar
6_icon: mdi:home-lightning-bolt-outline
card_mod:
  style: |
    ha-card {
      border: none !important;
      border-radius: 0px !important;
      background: none !important;
      box-shadow: none !important;
      padding: 0px; 
      z-index: 2;
      position: fixed;
      margin: 0 !important;
      bottom: 0;
    }

Wichtig sind die folgenden Punkte im card_mod, um das Menü entsprechend zu fixieren:

z-index: 2;
position: fixed;
margin: 0 !important;
bottom: 0;

Hintergrundwissen
Die Verwendung von position: fixed in CSS ermöglicht es, ein Element relativ zum Ansichtsfenster zu positionieren. Das bedeutet, dass das Element beim Scrollen der Seite an seiner Position bleibt. Der z-index bestimmt die Stapelreihenfolge von Elementen, sodass der Footer über anderen Inhalten angezeigt wird.

Typische Fehler, die vermieden werden sollten:
- Vergessen, z-index zu setzen, was dazu führen kann, dass der Footer hinter anderen Elementen verborgen bleibt.
- Falsche Verwendung von Margen, die das Layout stören können.

Zusätzliche Infos

Hinweise & Best Practices
- Teste die Darstellung auf verschiedenen Bildschirmgrößen, um sicherzustellen, dass der Footer überall gut aussieht.
- Achte darauf, dass der Footer nicht zu viel Platz einnimmt, um die Benutzererfahrung nicht zu beeinträchtigen.
- Berücksichtige die Zugänglichkeit, indem du sicherstellst, dass die Icons und Links gut lesbar sind und ausreichend Platz für Interaktionen bieten.