Модалка в Lightning UI обрезает контент

[quote="Dmitry Shnyrev"]Сталкивались ли вы с такой проблемой что когда используешь стардартный компонент модалки или Screen Quick Action (который открывается в той же модалке). То когда используешь такие штуки как календарь или dropdown, то они открываются в пределах модалки и все что выходит за пределы обрезается.

вот похожий скриншот нашел 

[img]https://developer.salesforce.com/forums/servlet/rtaImage?eid=9062I000000INgO&feoid=Body&refid=0EM2I000000AwCr[/img]

а хочется вот такое

[img]https://developer.salesforce.com/forums/servlet/rtaImage?eid=9062I000000INgO&feoid=Body&refid=0EM2I000000AwCw[/img]

Я эту проблему решил с помощью кастомной модалки на базе slds и кастомных стилей (но и там не все так идеально как хотелось бы).

Но может есть какое-то более элегантное решение? Не думаю что я первый сталкиваюсь с подобной проблемой. [/quote]

можно в статик ресурс закинуть css и подгружать в компоненте, а в css поиграться с индексами

а вообще этой проблеме уже лет так 8 наверное) все хакамми да костылями и делается)

[quote="Dmitry Shnyrev"]Но может есть какое-то более элегантное решение? Не думаю что я первый сталкиваюсь с подобной проблемой.
Цитировать

[/quote]

[code].slds-dropdown__list{
    max-height: calc(100vh - 150px) !important;
}
[/code]

У меня это так решается. Вроде проблем нет

Все дело в свойстве overflow.
Оно реализовано так, что не отображает содержимое, выходящего за рамки контейнера.
Можно установить значение в visible и тогда будет отображаться все содержимое, но scroll работать не будет.

Единственный вариант и со скролом и без обрезания например пиклиста, это position либо fixed либо absolute.
Например, датапикеры реализованы через fixed.

Наиболее подходящий вариант это absolute, и сделать несколько трюков чтобы соседи его "приняли"

Да, да! Я тут немного тупанул. Вообще стандартные dropdown и календарь работают нормально в стандартной модалке. 

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

Сейчас попробовал стандартную модалку и стардарные компонеты и все вылазит за модалку красиво. Начал разбираться и увидел что используется fixed + кординаты вычисляются на лету в js и навешиваются на выпадающую часть. так получается что выпадающая часть выносится за пределы модалки, показывается выше за счет z-index но есть танцы с координатами. Я еще с такой задачей не сталкивался, буду пробовать. Было бы конечно классно заглянуть в код самих стандартных компонентов, чтобы подглядеть решение а не изобретать свой велосипед.

Кстати, может подскажете где модно исходный код стандартных компонентов найти?

Да это звиздец какой-то! 

открыл для себя [b]transform: translate(0, 0)[/b] в сочетании с [b]position: fixed[/b] 

кто это придумал??? :sad:

Вот как можно узнать смешение элемента если он находится внутри элемента с transform: translate(0, 0) чтобы потом подставить в fixed.

Если брать el1.offsetTop, el1.offsetLeft это вернет смешение относительно родительского элемента, но не до границ элемента с transform: translate(0, 0)

если брать
let v1 = el1.getBoundingClientRect();
el1.top
el1.left 
это вернет смещение относительно экрана. Но я не могу позиционировать fixed относительно экрана если есть если он лежит внутри transform: translate(0, 0)

Чтобы вы понимали прикол

[img]https://i.ibb.co/jybvKw1/image.png[/img]

[img]https://i.ibb.co/9G7XSST/image.png[/img]

до стиля модалки добраться нельзя, так как он за пределами моего компонента.

Получается что контейнер [b].slds-modal__container[/b] из-за [b]transform: translate(0, 0)[/b] имеет координатя 0, 0 для fixed. Ладно было бы это не проблема, но мне надо к примеру этот красный квадрат расположить как раз под последним input. Я могу узнать смешение относительно родительского элемента или относительно экрана. Но не могу узнать смешение до края [b].slds-modal__container[/b] где установлена новая ось координат. 

Все, победил. Костыль конечно, но что поделать. Раз мне надо знать начало координат куда упадет fixed(0, 0), и получить смещение если это не начало координат, то просто сделал скрытый fixed div и просто спрашивую у него, чел а какое у тебя смешение относительно экрана? Он мне говорил что он в нуле или нет. Зная это если я спрашу у любого элемента его смещение относительно экрана то зная смешение начала координат то можно вычислить все что надо. Профит. Задачка конечно. В 99% случаем никто не извращается с transform: translate(0, 0) и такой жопы не происходит, но вот сталкнулся. Делал бы на обычной странице то потом бы долго удивлялся почему все валится в модалках. И самое инетресно как эти подводные камни найти когда отлаживаешь css в браузере. Чисто повезло что отрыл эту херову возможность css.

Кстати узнал для себя еще одну замечательную штуку - как динамически управлять стилями в LWC не манипулирую DOM напрямую. Объявляем css переменные, и работаем с ними из JS. Профит!

[code]let css = this.template.host.style;
css.setProperty('--dropdownTop', ''+(v1.top-z.top+el1.offsetHeight)+'px');
css.setProperty('--dropdownLeft', ''+(v1.left-z.left)+'px');
css.setProperty('--dropdownWidth', ''+el1.offsetWidth+'px');[/code]
[code].slds-dropdown {
    position: fixed;
    width: var(--dropdownWidth, 0);
    top: var(--dropdownTop, 0);
    left: var(--dropdownLeft, 0);
}
[/code]
Не знаю есть ли профит по сравнению с обычным [b]<div style={stylesFromLwcVar}></div>[/b], но выглядит тоже прикольно!