Как оформить элемент textarea в столбце сетки? - PullRequest
Новая
       14

Как оформить элемент textarea в столбце сетки?

3 голосов
/ 07 апреля 2019

Я использую реагирование с styledcomponents и получаю голову вокруг css-grid, испытываю проблемы с выравниванием textarea, не могу получить правильную высоту (переполнение в следующем ряду) и ширину (должен выравниваться с 'col3')на правой стороне): 

const Wrapper = styled.div`
    display:grid
    grid-template-columns: 1fr 1fr 1fr 30px;
    grid-template-rows:25% 25% auto;
    justify-items: start;
    border: solid 1px   #000000
    `

const ColumnSpan2 = styled.div`
    grid-column: 2/4;
    grid-row: row 2;
`;

Компонент выглядит следующим образом: 

<Wrapper>
            <Column1>
                <select>
                    <option>een</option>
                    <option>twee</option>
                </select>
            </Column1>
            <Column2>
                <input type="text" value="col2" />{' '}
            </Column2>
            <Column3>
                <input type="text" value="col3" />{' '}
            </Column3>
            <Column4>todo iceon </Column4>
            <ColumnSpan2>
                {' '}
                <textarea>Hello comments here</textarea>
            </ColumnSpan2>
</Wrapper>

css: 

body {
    margin: 0 auto;
    max-width: 60%;
}

textarea{
    width: 200%;
    height: 100%
  }

Как получить правильный стиль дляtextarea (я пытался изменить grid-template-rows реквизит, но не дал решения)

1 Ответ

2 голосов
/ 07 апреля 2019

Я создал ванильное CSS-представление вашего реагирующего кода - вот несколько указателей:

  • justify-items: start выровняет содержимое внутри элементов сетки - рассмотрите возможность его удаления (и width: 200% и т. Д. Тоже, я полагаю, вы были пытаясь решить это, сохраняя justify-items)

  • теперь задайте ширину input, select и textarea до заливки их ячеек сетки, используя width: 100%

  • grid-row: row 2 недопустимо, поскольку у вас нет named grid-line в grid-template-rows определении - измените его на grid-row: 2,

  • вы не определили высоту для контейнера grid - так что вы можете изменить grid-template-rows на grid-template-rows: auto auto,

  • также обратите внимание на использование grid-gap и padding для настройки пробелов между элементами сетки .

См. Демо ниже: 

body {
  margin: 0 auto;
  max-width: 60%;
}

textarea, input, select {
  width: 100%; /* extend the width of the grid item */
  box-sizing: border-box; /* including padding / border in width */
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 30px;
  grid-template-rows: auto auto; /* changed */
  border: solid 1px #000000;
  grid-gap: 10px; /* grid gap to handle spaces between items if needed */
  padding: 5px; /* space between wrapper and grid items */
}

.column1 {
  grid-column: 1/2;
}

.column2 {
  grid-column: 2/3;
}

.column3 {
  grid-column: 3/4;
}

.column4 {
  grid-column: 4/5;
}

.colspan2 {
  grid-column: 2/4;
  grid-row: 2; /* changed */
}
<div class="wrapper">

  <div class="column1">
    <select>
      <option>een</option>
      <option>twee</option>
    </select>
  </div>
  <div class="column2">
    <input type="text" value="col2" />
  </div>
  <div class="column3">
    <input type="text" value="col3" />
  </div>
  <div class="column4">(i)</div>
  <div class="colspan2">
    <textarea>Hello comments here</textarea>
  </div>
</div>
...