Skip to content

[Bug][HorizontalCell]: добавить равномерное распределение по ширине #7605

@inomdzhon

Description

@inomdzhon

Сейчас есть проблема, что компонент задаёт только максимальную ширину, что приводит к неравномерной вёрстке по ширине если использовать EllipsisText для header (см. подробности в
разделе Скриншот).

Воспроизведение

  1. Код

    // import { HorizontalScroll, HorizontalCell, Avatar, EllipsisText } from '@vkontakte/vkui';
    
    const data = [
      {
        id: 1,
        name: 'Иван',
        avatarSrc: 'https://sun9-54.userapi.com/c850536/v850536134/15096d/6806J7q6YwM.jpg',
      },
      {
        id: 2,
        name: 'Александра',
        avatarSrc: 'https://sun9-20.userapi.com/c857416/v857416681/fc6d0/06XQvs4SyiE.jpg',
      },
      {
        id: 3,
        name: 'Толя',
        avatarSrc: 'https://sun9-50.userapi.com/c850536/v850536397/129313/qdVJ7A7xd70.jpg',
      },
      {
        id: 4,
        name: 'Катя',
        avatarSrc: 'https://sun9-41.userapi.com/Zf2HluZJZDYjTbxhnSfeYnHtttBYsYbdjJ3QJQ/aDcJQrVVnbQ.jpg',
      },
    ];
    
    const UserItems = () => {
      return (
        <HorizontalScroll inline>
          {data.map((user, i) => (
            <HorizontalCell onClick={() => {}} key={user.id} size="m" header={<EllipsisText>{user.name}</EllipsisText>}>
              <Avatar size={56} src={user.avatarSrc} />
            </HorizontalCell>
          ))}
        </HorizontalScroll>
      )
    };
    
    <UserItems />

  2. Вставить в редактор кода в документации https://vkcom.github.io/VKUI/6.7.0/#/HorizontalCell

Скриншот

image
  1. Разная ширина.
  2. Текст не по центру.

Примечание

Для первого потомка нужно точно задать width: 100%, а для самого родителя нужно найти решение. Если задать flex: 1 1 100%;, то теряется смысл выставления max-width. Возможно надо прибегнуть к display: grid на контейнере.

Ссылки

Metadata

Metadata

Assignees

Type

Projects

Status

✅ Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions