fix(ModalPage): Properly calculate content height in expanded mode #6538

mendrew · 2024-02-09T15:48:42Z

close [Bug]: проблема пересчёта размеров ModalPage при изменении ориентации мобильного устройства #6242

Описание

Проблема лишнего места при изменении ориентации экрана в том, что это происходит когда модальное окно в режиме expandable. В этом режиме у .ModalPage__content-in height задано 100% (изначально добавлено тут)

VKUI/packages/vkui/src/components/ModalPage/ModalPage.module.css

Lines 121 to 126 in e935a7b

    
           /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ 
        
           .ModalPage--desktop .ModalPage__content-in, 
        
           :global(.vkuiInternalModalRoot__modal--expandable) .ModalPage__content-in { 
        
             block-size: 100%; 
        
           }

Из-за этих стилей высота контейнера контента становится равна высоте родительского элемента.
При этом, если высота контента в вертикальной ориентации экрана меньше чем высота экрана, то высота контейнера контента будет больше чем высота контента, что как раз и добавляет лишнее место снизу.

При изменении ориентации мы пересчитываем высоту, но селектор всё ещё работает и element.scrollHeight, дающий нам высоту контента продолжает выдавать высоту равную высоте родителя, хотя наша логика определения состояния expandable основывается на сравнении высоты родительского элемента и высоты контента.
В результате ModalRoot продолжает думать, что ModalPage в состоянии expandablе и позиционирует модальную страницу максимально высоко, хотя контент позволяет отрисовать модальное окно ниже, как если бы модальное окно было изначально открыто в такой ориентации экрана.

Изменения

меняем логику определения высоты контента.
Раньше мы просто брали el.offsetScroll у контейнера контента .ModalPage__content-in, теперь же, учитывая, что в режиме expandable размер контента модального окна не получить через el.offsetScroll мы высчитываем высоту временно меня height на height: auto, смотрим размер, и возвращаем стиль назад.
убрали проверку предыдущего состояния state.expandable при определении текущего состояния expandable, потому что при изменении ориентации это не верно. Верно всё же ориентироваться на высоту контента.

Видео с фиксом

Screen.Recording.2024-02-13.at.13.24.19.mov

Unfortunately the only way to do so without waiting for next render is to temporary apply height: auto during caclulation with element.scrollHeight.

github-actions · 2024-02-09T15:51:01Z

size-limit report 📦

Path	Size
JS	349.45 KB (+0.04% 🔺)
JS (gzip)	106.81 KB (+0.03% 🔺)
JS (brotli)	88.29 KB (-0.06% 🔽)
JS import Div (tree shaking)	1.43 KB (0%)
CSS	257.87 KB (0%)
CSS (gzip)	33.8 KB (0%)
CSS (brotli)	27.47 KB (0%)

codesandbox-ci · 2024-02-09T15:53:27Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 24d1f4b:

Sandbox	Source
VKUI TypeScript	Configuration

github-actions · 2024-02-09T15:54:35Z

e2e tests

Playwright Report

github-actions · 2024-02-09T15:54:53Z

👀 Docs deployed

✅ Styleguide
✅ Storybook

Commit 24d1f4b

inomdzhon

👏

…6538) - close #6242 - меняем логику определения высоты контента. Раньше мы просто брали `el.offsetScroll` у контейнера контента `.ModalPage__content-in`, теперь же, учитывая, что в режиме `expandable` размер контента модального окна не получить через `el.offsetScroll` мы высчитываем высоту временно меня `height` на `height: auto`, смотрим размер, и возвращаем стиль назад. - убрали проверку предыдущего состояния `state.expandable` при определении текущего состояния `expandable`, потому что при изменении ориентации это не верно. Верно всё же ориентироваться на высоту контента. Проблема лишнего места при изменении ориентации экрана в том, что это происходит когда модальное окно в режиме `expandable`. В этом режиме у `.ModalPage__content-in` `height` задано `100%` (изначально добавлено [тут](#4625)) https://github.com/VKCOM/VKUI/blob/e935a7b8dfd2c9d9dbbb5937bd1decba859d45d1/packages/vkui/src/components/ModalPage/ModalPage.module.css#L121-L126 Из-за этих стилей высота контейнера контента становится равна высоте родительского элемента. При этом, если высота контента в вертикальной ориентации экрана меньше чем высота экрана, то высота контейнера контента будет больше чем высота контента, что как раз и добавляет лишнее место снизу. При изменении ориентации мы пересчитываем высоту, но селектор всё ещё работает и `element.scrollHeight`, дающий нам высоту контента продолжает выдавать высоту равную высоте родителя, хотя наша логика определения состояния `expandable` основывается на сравнении высоты родительского элемента и высоты контента. В результате `ModalRoot` продолжает думать, что `ModalPage` в состоянии `expandablе` и позиционирует модальную страницу максимально высоко, хотя контент позволяет отрисовать модальное окно ниже, как если бы модальное окно было изначально открыто в такой ориентации экрана.

…6538) (#6573) - close #6242 - меняем логику определения высоты контента. Раньше мы просто брали `el.offsetScroll` у контейнера контента `.ModalPage__content-in`, теперь же, учитывая, что в режиме `expandable` размер контента модального окна не получить через `el.offsetScroll` мы высчитываем высоту временно меня `height` на `height: auto`, смотрим размер, и возвращаем стиль назад. - убрали проверку предыдущего состояния `state.expandable` при определении текущего состояния `expandable`, потому что при изменении ориентации это не верно. Верно всё же ориентироваться на высоту контента. Проблема лишнего места при изменении ориентации экрана в том, что это происходит когда модальное окно в режиме `expandable`. В этом режиме у `.ModalPage__content-in` `height` задано `100%` (изначально добавлено [тут](#4625)) https://github.com/VKCOM/VKUI/blob/e935a7b8dfd2c9d9dbbb5937bd1decba859d45d1/packages/vkui/src/components/ModalPage/ModalPage.module.css#L121-L126 Из-за этих стилей высота контейнера контента становится равна высоте родительского элемента. При этом, если высота контента в вертикальной ориентации экрана меньше чем высота экрана, то высота контейнера контента будет больше чем высота контента, что как раз и добавляет лишнее место снизу. При изменении ориентации мы пересчитываем высоту, но селектор всё ещё работает и `element.scrollHeight`, дающий нам высоту контента продолжает выдавать высоту равную высоте родителя, хотя наша логика определения состояния `expandable` основывается на сравнении высоты родительского элемента и высоты контента. В результате `ModalRoot` продолжает думать, что `ModalPage` в состоянии `expandablе` и позиционирует модальную страницу максимально высоко, хотя контент позволяет отрисовать модальное окно ниже, как если бы модальное окно было изначально открыто в такой ориентации экрана.

…6538) (#6573) (#6583) - close #6242 - меняем логику определения высоты контента. Раньше мы просто брали `el.offsetScroll` у контейнера контента `.ModalPage__content-in`, теперь же, учитывая, что в режиме `expandable` размер контента модального окна не получить через `el.offsetScroll` мы высчитываем высоту временно меня `height` на `height: auto`, смотрим размер, и возвращаем стиль назад. - убрали проверку предыдущего состояния `state.expandable` при определении текущего состояния `expandable`, потому что при изменении ориентации это не верно. Верно всё же ориентироваться на высоту контента. Проблема лишнего места при изменении ориентации экрана в том, что это происходит когда модальное окно в режиме `expandable`. В этом режиме у `.ModalPage__content-in` `height` задано `100%` (изначально добавлено [тут](#4625)) https://github.com/VKCOM/VKUI/blob/e935a7b8dfd2c9d9dbbb5937bd1decba859d45d1/packages/vkui/src/components/ModalPage/ModalPage.module.css#L121-L126 Из-за этих стилей высота контейнера контента становится равна высоте родительского элемента. При этом, если высота контента в вертикальной ориентации экрана меньше чем высота экрана, то высота контейнера контента будет больше чем высота контента, что как раз и добавляет лишнее место снизу. При изменении ориентации мы пересчитываем высоту, но селектор всё ещё работает и `element.scrollHeight`, дающий нам высоту контента продолжает выдавать высоту равную высоте родителя, хотя наша логика определения состояния `expandable` основывается на сравнении высоты родительского элемента и высоты контента. В результате `ModalRoot` продолжает думать, что `ModalPage` в состоянии `expandablе` и позиционирует модальную страницу максимально высоко, хотя контент позволяет отрисовать модальное окно ниже, как если бы модальное окно было изначально открыто в такой ориентации экрана.

Recalculate content-in height

e935a7b

Unfortunately the only way to do so without waiting for next render is to temporary apply height: auto during caclulation with element.scrollHeight.

github-actions bot added the patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Feb 9, 2024

Rename temp style variable

24d1f4b

mendrew marked this pull request as ready for review February 13, 2024 10:44

mendrew requested a review from a team as a code owner February 13, 2024 10:44

inomdzhon approved these changes Feb 14, 2024

View reviewed changes

SevereCloud approved these changes Feb 14, 2024

View reviewed changes

mendrew merged commit 52f0aa8 into master Feb 14, 2024
45 checks passed

mendrew deleted the mendrew/6242/fix/ModalPage/recalculate-height-of-the-modal-on-orientation-change branch February 14, 2024 12:56

mendrew mentioned this pull request Feb 14, 2024

patch(v5): pr6538 #6573

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ModalPage): Properly calculate content height in expanded mode #6538

fix(ModalPage): Properly calculate content height in expanded mode #6538

mendrew commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

codesandbox-ci bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

inomdzhon left a comment


	/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
	.ModalPage--desktop .ModalPage__content-in,
	:global(.vkuiInternalModalRoot__modal--expandable) .ModalPage__content-in {
	block-size: 100%;
	}

fix(ModalPage): Properly calculate content height in expanded mode #6538

fix(ModalPage): Properly calculate content height in expanded mode #6538

Conversation

mendrew commented Feb 9, 2024 • edited Loading

Описание

Изменения

Видео с фиксом

github-actions bot commented Feb 9, 2024 • edited Loading

size-limit report 📦

codesandbox-ci bot commented Feb 9, 2024 • edited Loading

github-actions bot commented Feb 9, 2024 • edited Loading

e2e tests

github-actions bot commented Feb 9, 2024 • edited Loading

👀 Docs deployed

inomdzhon left a comment

Choose a reason for hiding this comment

mendrew commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

codesandbox-ci bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading