встроенный стиль реагирует на ширину элемента - PullRequest
Новая
       10

встроенный стиль реагирует на ширину элемента

0 голосов
/ 10 мая 2018

Я пытаюсь создать круговой div с заданной шириной. Это работает нормально, но как только я добавляю больше div, чем то, что умещается на экране, ширина круга переопределяется. В родительском контейнере установлено overflow: scroll, а div можно прокручивать.

Вот мой код компонента Аватар 

 const Avatar= ({contact, email, circle, width, margin, fontSize, fontWeight}) => {
  let style = {}

  if (width) {
    style.width = `${width}px` || '32px'
    style.height = `${width}px` || '32px'
    style.margin = `${margin}px` || '4px'
  }

  if (circle) {
    style.borderRadius = `${width/2}px` || '16px'
  }

  let displayName;


  if (contact && contact.avatar) {
    return (
      <img style={style}
        src={contact.avatar}
        title={contact.FN || contact.wyreId || email}
        alt={contact.FN || contact.wyreId || email}
      />
    )
  } ... removed code that sets displayname

  // default display
  style.color = '#fff';
  style.background = 'orange';
  style.lineHeight = style.height;
  style.textAlign = 'center';
  style.fontSize = fontSize;
  style.fontWeight = fontWeight;
  return (
    <div style={style}>
        {
          displayName || '?'
        }
      </div>
  )
}

Вот изображение компонентов, работающих по назначению. Вот изображение компонентов, не работающих должным образом.

когда я проверяю с помощью инструментов dev, это стиль, добавляемый к div для обоих случаев. style=width: 32px; height: 32px; margin: 4px; border-radius: 16px; color: rgb(255, 255, 255); background: orange; line-height: 32px; text-align: center; font-size: 16px; font-weight: bold;

Любая идея, что может пойти не так

Также на всякий случай вот стиль, установленный в родительском div. 

.horizontalList {
list-style-type: none;
margin-top: -20px;
margin-left: 2%;
margin-right: 2%;
padding-bottom: 10px;
display: inline-flex;
justify-content: center;
height: 60px;
overflow: scroll;}

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Мне удалось решить эту проблему, установив style.minWidth = $ {width} px || '32px'; в компоненте Avatar.

0 голосов
/ 10 мая 2018

Это не реагирует или проблема встроенных стилей. Удалите свойство display: inline-flex из родительского контейнера и добавьте его в циклические div

Проверьте это: рабочий пример

...