CSS Grid Layout TextBox не охватывает несколько столбцов - PullRequest
Новая
       10

CSS Grid Layout TextBox не охватывает несколько столбцов

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

Я использую CSS Grid Layout и испытываю трудности при попытке заставить TextBox заполнить контейнер div, в котором он находится. Кажется, он работает нормально для некоторых элементов управления, таких как GridView / GoogleMap, но когда я пытаюсь с TextBox, он заполняет только ширину одного столбца, даже если div заполняет 3-4 столбца.

Вот мой пример CSS для grid-контейнера и то, что я использую для заполнения всех столбцов 

.grid-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-columns: repeat(2, 1fr);
    grid-gap: 1em;
}

@media (min-width: 52em) {
    .grid-container {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
        -ms-grid-columns: repeat(auto-fit, minmax(20em, 1fr));
        grid-gap: 1em;
    }
}

.item-max-columns {
  grid-column: 1 / -1;
  background-color: aqua;
}

Этот элемент управления GooleMap правильно отображается во всех столбцах, заполняющих экран (GridViews также отображаются правильно) 

<div class="item-max-columns">
    <map:GoogleMap ID="JobMap" Width="100%" runat="server" DefaultAddress="Edmonton, Alberta"></map:GoogleMap>
    <map:GoogleMarkers ID="JobMapMarkers" TargetControlID="JobMap" runat="server"></map:GoogleMarkers>
</div>

Однако, когда я пытаюсь вставить TextBox с шириной 100%, он заполняет только один столбец 

<div class="item-max-columns">
    Project Description
    <asp:TextBox ID="txtProjectDescription" runat="server" Enabled="true" TextMode="MultiLine" Width="100%"></asp:TextBox>
</div>

Вот ссылка на JSFiddle, которая воспроизводит проблему с полями ввода вместо TextBox. Мне бы хотелось, чтобы поле ввода / TextBox охватывало весь тег div, а не только первый столбец.

https://jsfiddle.net/zuvdx2xn/

Проблема ширины CSS

1 Ответ

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

Мне удалось заставить это работать, обновив CSS, чтобы включить 

.textbox{
    width: calc(100% - 2em);
}

и управление вводом / текстовым полем для 

<input type="text" id="txtVal2" class="textbox" style="max-width: 100%;" />


.grid-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-columns: repeat(2, 1fr);
    grid-gap: 1em;
}

.textbox{
    width: calc(100% - 2em);
}

@media (min-width: 52em) {
    .grid-container {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
        -ms-grid-columns: repeat(auto-fit, minmax(20em, 1fr));
        grid-gap: 1em;
    }
    .textbox{
      width: calc(100% - 2em);
    }
}

.item-max-columns {
  grid-column: 1 / -1;
  background-color: aqua;
}
<section class="grid-container">
  <div class="item-max-columns">
    <p>Project Description</p>
    <input type="text" id="txtVal2" class="textbox" style="max-width: 100%;" />  
  </div>
  <div class="item-max-columns">
    <p>Instructions</p>
    <input type="text" id="txtVal2" class="textbox" style="max-width: 100%;" />  
   </div>
</section>
...