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
HTML Height 100% ze scrollem.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 375
- Rejestracja: dni
- Ostatnio: dni
- Postów: 3394
overflow:scroll;
overflow:auto;
?
- Rejestracja: dni
- Ostatnio: dni
- Postów: 375
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.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 375
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.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 3394
Pokaż kod, bez tego trudno zgadywać.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 375
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
- Rejestracja: dni
- Ostatnio: dni
- Postów: 3394
A nie masz tego gdzieś on-line albo chociaż ze skompilowanym już css?
- Rejestracja: dni
- Ostatnio: dni
- Postów: 375
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.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 3394
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.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 375
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.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 3394
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.
- Rejestracja: dni
- Ostatnio: dni
- Postów: 375
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 .