Ustawiłem height: 100% dla HTML + Body tak, żeby stworzyć dwa divy które będą mi dzielić screena w jakiejś proporcji a dla małych ekranów - symulować slide z prawej do lewej po otwarciu. Jednakże teraz mam problem taki, że w takiej sytuacji w przypadku gdy content nie mieści się w przeglądarce (height jest większy od 100%, gdy VH jest wystarczająco mały) to dla width > 960 (w media mam ustawione 960), buttony wychodzą poza diva wychodząc na HTML (białe tło), gdy width < 960, overflow znika. Jak to naprawić? Jak dobrze pisać CSSy mając na uwagę height/width/min-height/min-width itd. Link do projektu, z komponentem w którym leży problem:
https://github.com/KamLar/English-learning-frontend/blob/dev/src/app/modules/login/login-page/login-page-right-content/login-page-right-content.component.html
overflow:scroll;
overflow:auto;
?
Prawie działa. Dodałem overflow: inherit na form oraz overflow: auto na parenta form - jednak teraz to co poniżej jest scrollowalne, to co powyżej - nie (np header z "Logowanie"). Największy problem jaki widzę jest taki, że nie jestem pewny czy dobrze strukturyzuję HTML i CSS co skutkuje tym, że naprawa może być tylko tymczasowa. Na HTML jak dodałem overflow: auto czy scroll - nie zadziałało.
Edit: wiem, że mogę dodawać overflow: inherit na każdym z divów będącym parentem miejsca gdzie występuje ovefrlow oraz overflow: auto na HTML ale raczej nie tędy droga.
Naprawiłem to dodając do form jeszcze height:100%
- wcześniej było tylko min-height: 100%
, teraz jest min-height: 100%; height: 100%;
.
I teraz moje pytanie: skoro min-height
nie pozwala elementowi być mniejszym niż podana wartość - i jeżeli została ona ustawiona na 100%
, to czemu dopiero to zaczęło działać kiedy dodałem jeszcze height:100%
?
W przypadku gdy oba są oddzielnie - nie działa to tak jak powinno.
Pokaż kod, bez tego trudno zgadywać.
W pierwszym poście link do Githuba. Poniżej template oraz scssy już naprawionego projektu.
- template komponentu będącego parentem komponentu z formą: https://github.com/KamLar/English-learning-frontend/blob/dev/src/app/modules/login/login-page/login-page.component.html
- scss: https://github.com/KamLar/English-learning-frontend/blob/dev/src/app/modules/login/login-page/login-page.component.scss
- template komponentu z form: https://github.com/KamLar/English-learning-frontend/blob/dev/src/app/modules/login/login-page/login-page-right-content/login-page-right-content.component.html
- scss: https://github.com/KamLar/English-learning-frontend/blob/dev/src/app/modules/login/login-page/login-page.component.scss
A nie masz tego gdzieś on-line albo chociaż ze skompilowanym już css?
Wystawione na Heroku:
https://learn-it-easier.herokuapp.com/
Zadziała to, gdy wyłączę z form w klasie login-form
align-items:center
- jednakże chciałbym żeby to tam było żeby wyśrodkować cały formularz. W wypadku gdy jest zostawiony align-items:center
przy zmniejszaniu wysokości okna - header wychodzi poza scrolla. Dodatkowo, sytuacja tak jak wcześniej wspomniałem z height
i min-height
.
Bogowie, a po grzyba ci tam 5 poziomów zagnieżdżenia różnych elementów? Nie dziwota, że idzie się w tym pogubić, co się ile przewija i jaką ma wysokość, jak musisz jednocześnie zachowanie kilku różnych potomków kontrolować.
Przecież taka struktura jak na obrazku jest do realizacji dosłownie dwoma divami:
<body>
<div class="lewy">abc</div>
<div class="prawy">abc</div>
</body>
U mnie w Firefoksie
.login-form[_ngcontent-pfx-c29]{
min-height:100%; przy
działa poprawnie.
Pierwszy poziom: app-root
wynika z tego, że to będzie strona startowa (docelowo w celach nauki mam zamiar dodać do tego PWA) - więc potrzebuję tego, żeby Angular mógł mi renderować komponenty na najwyższym poziomie (planuję, że aplikacja po zalogowaniu będzie miała inny layout)
Drugi poziom: app-login-page
to będą właśnie te podmieniane komponenty.
Trzeci poziom: div
rzeczywiście mógłbym się go pozbyć i dodać te klasy do app-login-page
Czwarty poziom:app-login-page-right-content
- postanowiłem wyodrębnić form
do osobnego komponentu żeby template w Angularze nie miały kilkaset linii (lewą część planuję zrobić tak samo)
Piąty poziom: form
sam w sobie musi być.
A potem już jest wrapper służący do wyśrodkowania contentu wewnątrz app-login-page-right-content
. Zapomniałem powiedzieć, że na Google Chrome są te problemy - zdaję sobie sprawę, że to może być związane z silnikiem (miałem kilka problemów na Chrome które na Firefox nie występowały, np. z stcky). Dalej zastanawiam się czemu align-items: center
psuje efekt scrollingu + to zachowanie z min-height
i height
jest trochę dziwne.
Edit: Dodatkowo - dwóch poziomów mógłbym się bezproblemowo pozbyć, gdyby to nie był Angular tylko React :D A tak to angular wprowadza np. nadmiarowe zagnieżdżenia jeśli chce się wykorzystać routing czy wyodrębnić template do osobnych komponentów.
Powiem tak: w moim odczuciu progresywni webmasterzy sami stwarzają sobie problemy, które nie występują na klasycznych stronach www.
Jak się używa jakiegoś narzędzia/biblioteki itp. to ono chyba powinno ułatwiać nam życie zamiast je utrudniać?
Różne przeglądarki mają różny zakres obsługi nowszych właściwości css, niekiedy potrzebne jest używanie prefiksów, patrz:
http://drakonica.pl/dokumenty/flexbox_zestawienie.htm#niestandardowe
https://caniuse.com/
Dalej zastanawiam się czemu align-items: center psuje efekt scrollingu + to zachowanie z min-height i height jest trochę dziwne.
align-items centruje ci tutaj elementy w pionie. Bez niego formularz też wyłazi poza skrolowany obszar, tyle tylko, że po wycentrowaniu treść jest niżej, więc efekt szybciej się ujawnia.
Bez niego formularz też wyłazi poza skrolowany obszar, tyle tylko, że po wycentrowaniu treść jest niżej, więc efekt szybciej się ujawnia.
No właśnie niedokońca. Wychodzi - pojawia się scroll, ale gdy ustawiony jest align-items:center
część renderowana jest ponad obszarem (zakładam że tak jakby element miał ujemny Y). Gdy wyłączę align-items:center
to nagle się okazuje że Y zawsze jest dodatni i wszystko można zobaczyć scrollując. Prefiksy raczej nie będą problemem, bo z tego co wiem preprocesory scss załatwiają sprawę prefiksów. Więc według mnie jest to dziwne zachowanie. Dodanie overflow: inherit
aż do app-login-page-right-content
a w tym overflow: auto
też nie działa.
Zdaję sobie też sprawę, że normalnie powinno się dobierać technologie do problemów tylko najpierw tych technologii trzeba się nauczyć żeby móc je odpowiednio dobierać, druga sprawa - w pracy korzystam z Angulara (którego wydaje mi się, że po roku korzystania z niego w miarę ogarniam) - największą moją bolączką są Cssy, których chcę się jak najszybciej nauczyć (bo tylko one trzymają mnie w obecnej pracy). Zastanawiam się też czy jest sens brnąć w Angulara, czy przesiąść się na Reacta.
Edit: Mam odpowiedź: https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container .