• O WordPressie
    • WordPress.org
    • Dokumentacja
    • Naucz się WordPressa
    • Pomoc techniczna
    • Uwagi
  • Zaloguj się
Marek Zając Marek Zając
  • contact@zajacmarek.com Zapraszam do kontaktu
  • Strona główna
  • O mnie
  • Kursy
  • Konsultacje
  • Kanał Youtube
  • 14 stycznia 2018
  • Marek Zając
  • 0 Comments

Angular 5 i flex layout – dlaczego nie działa?

Pisząc w pracy aplikację webową natknąłem się na problem, którego rozwiązaniem się z Wami podzielę. Dojście do działającej wersji zajęło mi dobre kilka godzin dlatego mam nadzieję, że komuś tym tekstem uproszczę pracę.

Problematyczna stopka

Chcę wykorzystać właściwości display: flex; z CSSa do zrobienia stopki, która jest zawsze na dole ekranu. Chodzi o zachowanie jak na poniższym obrazku:

Jak powinno być

Problem znany i powszechnie opisany dlatego łatwo go znaleźć w internecie. Standardowo, wg wielu poradników robi się to w ten sposób:

HTML:

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS:

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}

Łatwo i skutecznie. Działa na wszystkich nowszych przeglądarkach, bez nadmiaru magii.

Jak jest w Angularze

Jednak w Angularze 2+ takie rozwiązanie nie do końca działa. Dlaczego? Bo Angular działa na komponentach. A komponenty są widoczne w wynikowym kodzie HTML.

W najprostszym przykładzie, gdzie mamy tylko AppComponent i w nim dodajemy footer, nasz kod HTML będzie wyglądał mniej więcej tak:

<body>
  <app-root>
    <div class="content">
      content
    </div>
    <footer class="footer"></footer>
  </app-root>
</body>

Widzicie element <app-root> ? Nie ma on wpływu na renderowanie treści. Ale jak się okazuje ma wpływ na style.

Jak się okazuje, żeby mój przykład działał w Angularze muszę dla tego, i każdego innego ponad naszym contentem, elementu dodać takie style:

display: flex;
flex-direction: column;
height: 100%

Tylko jak to zrobić? W końcu nasz komponent nie ma żadnej swojej klasy. Nie widzimy go też w kodzie HTML, który piszemy, pojawia się dopiero po uruchomieniu aplikacji.

Otóż rozwiązaniem w tym wypadku jest skorzystanie ze specjalnego selektora :host . Odnosi się on do komponentu, dla którego dodajemy style. Tak więc w naszym przypadku musi się on znaleźć w stylach dla komponentu AppComponent. Jeżeli korzystasz z osobnych plików ze stylami to Twój plik app.component.css będzie wyglądał następująco:

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Jeszcze do tego uwaga dla osób piszący w SASSie zamiast w CSSie. W wersji, z której ja korzystam, a jest ona raczej świeża, jest pewien problem z tym selektorem. Mianowicie jeśli wpiszecie go tak jak powyżej to dostaniecie błąd z nieprawidłowym znakiem : . Niestety w niektórych wersjach kompilatora SASSa trzeba wyescapować znak dwukropka. Dlatego w pliku app.component.sass będziesz miał taki zapis:

\:host
  display: flex
  flex-direction: column
  height: 100%

Zwróć uwagę na backslash na początku. Wtedy błąd powinien nie wystąpić.

Related Posts
  • Asynchroniczność w ASP.NET Core 16 stycznia 2020
  • Nie lubię TEGO projektu! 15 stycznia 2020
  • Pierwsze portfolio na GitHubie – Przewodnik 14 stycznia 2020

Leave a Comment Cancel Comment

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Copyright 2020 Bizix, All rights reserved.
  • POLITYKA PRYWATNOŚCI I PLIKÓW COOKIES
 

Loading Comments...