Datagrid: как заполнить доступное пространство внутри карточного блока

Мы создали карты, размер которых может изменяться и перемещаться пользователем. В некоторые из этих карт мы хотим встроить сетку данных, которая должна «заполнять» доступное пространство (например, блок карт).

Я могу контролировать ширину, но не нашел способа контролировать высоту в моем сценарии. Здесь Datagrid выходит далеко за пределы моей карты, даже опуская нижний колонтитул карты.

Вот пример StackBlitz, который показывает поведение.

Кстати, трюк с "height: 100%" не работает в моем сценарии.

Любая помощь будет оценена по достоинству.


vmware-clarity
person Adrian    schedule 11.03.2018    source источник
comment
height: 100% может работать, только если родитель имеет определенную высоту. В вашем случае вы говорите, что размер карт может быть изменен, поэтому я предполагаю, что у них есть динамическая высота, установленная непосредственно на элементе. Это заставит работать height: 100%, но в вашем примере вы не показываете часть карточек с изменяемым размером.   -  person Eudes    schedule 12.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

Как упоминалось в моем комментарии, для использования height: 100% вам нужно, чтобы родитель имел определенную высоту. За исключением вашего случая, все это динамически вплоть до самой карты, поэтому вам нужно распространить этот height: 100% на сетку данных. Я обновил ваш плункер, и теперь он работает нормально: https://stackblitz.com/edit/fit-datagrid-in-card

См. https://drafts.csswg.org/css2/visudet.html#propdef-height для объяснения высоты:

‹процент›

Задает высоту в процентах. Процент рассчитывается относительно высоты блока, содержащего сгенерированный блок. Если высота содержащего блока не указана явно (т. е. зависит от высоты содержимого) и этот элемент не позиционирован абсолютно, используемая высота рассчитывается так, как если бы было задано значение 'auto'. указано. Высота корневого элемента в процентах относится к начальному содержащему блоку.

person Eudes    schedule 14.03.2018
comment
Большое спасибо за ваши усилия, Юдес. К сожалению, я не могу получить доступ к обновленному плункеру. Можно ссылку, пожалуйста? - person Adrian; 15.03.2018
comment
Извините за этого Адриана, я как-то вставил не ту ссылку StackBlitz. Я обновил его, теперь вы можете проверить его. - person Eudes; 15.03.2018
comment
Спасибо, Eudes, теперь все работает отлично. Спасибо также за справочную информацию. - person Adrian; 16.03.2018

arrow_upward
0
arrow_downward

Вы правы в том, что установка высоты в процентах, по-видимому, не ограничивает ее самим блоком карт, но установка в абсолютных пикселях делает.

Я вижу в вашем Stackblitz, что вы пытались установить высоту 300 пикселей, но это все еще превышает размер элемента хостинга. Сама карта имеет размер 400 x 400 пикселей, но после рендеринга блок карты (где размещается сетка данных) имеет размер всего 398 x 281 пикселей.

Пожалуйста, взгляните на этот Stackblitz, где я установил высоту сетка данных до 240px.

person Jose Gomes    schedule 11.03.2018
comment
Большое спасибо @jose-gomes. Я знаю, что фиксированная высота будет работать, но, как уже упоминалось, наши карты должны иметь изменяемый размер, поэтому я боюсь, что это не решит мою проблему. Я обновил пример StackBlitz с изменением размера вверх и вниз кнопки для демонстрации этого (хотя в реальном приложении пользователь сможет установить любой желаемый размер с помощью мыши) - person Adrian; 13.03.2018
comment
Привет, Адриан, теперь я вижу, в чем проблема. Я не уверен, что добавление сетки данных к такой маленькой карте является хорошим выбором, но если размер карты будет жестко закодирован, как в вашем примере, вы всегда можете также установить для сетки данных заранее определенный размер, например это. Если карта будет иметь переменные размеры, то всегда можно придумать подходящий расчет. - person Jose Gomes; 13.03.2018