Кнопка фиксированного размера на сетке CSS - PullRequest
Новая
       1

Кнопка фиксированного размера на сетке CSS

0 голосов
/ 16 июня 2019

JSFiddle Я создал, чтобы показать мой случай

Я создал простую сетку, используя -template-areas.В «первую ячейку» я положил кнопку.При нажатии кнопки текст на ней меняется (на более длинный), а также на его ширину.Это проблема для меня.

Почему кнопка меняет свой размер, если достаточно места для размещения нового текста (после щелчка) без увеличения его ширины?

Я знаю, что insted of width: 100% для кнопки, я мог бы использовать некоторое статическое значение, например, fe width: 250px.Причина, по которой меня не интересует это решение, заключается в том, что когда я использовал ng-bootstrap: dropdown component и установил его ширину на 100%, он не изменил размер кнопки, когда текст на ней вырос в ширину.Вот почему я думаю, что я могу получить тот же результат, что и они, но, очевидно, я что-то упускаю в моем случае, поэтому мой вопрос.

Как получить кнопку сwidth: 100% в ячейке сетки CSS, которая не будет увеличиваться в ширине при изменении длины текста на ней?

Ответы [ 2 ]

1 голос
/ 16 июня 2019

Вы определили столбцы как minmax(30px, auto), а auto является виновником.По сути, вы сказали браузеру автоматически вычислять ширину столбца, но не делать их равными.Затем содержимое будет определять ширину, с которой вы сталкиваетесь.

Вы можете заменить auto на 1fr, чтобы избежать этого эффекта.Вы также используете 5 столбцы, поэтому вы должны исправить это тоже: 

document.getElementById("card-btn").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("card-btn").innerHTML = "A little bit longer text";
}
.grid-container {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(5, minmax(30px, 1fr));
  grid-template-rows: repeat(4, minmax(30px, auto));
  grid-auto-rows: minmax(50px, auto);
  height: 100vh;
  grid-template-areas: 
    "card1 card2 card3 . card4" 
    "card5 card5 card5 card5 card5" 
    "card6 . . . card7" 
    "card8 card8 card8 card8 card8";
}

.grid-container div {
  background-color: red;
}

#card1 {
  grid-area: card1;
}

#card-btn {
  width: 100%;
}

#card2 {
  grid-area: card2;
}

#card3 {
  grid-area: card3;
}

#card4 {
  grid-area: card4;
}

#card5 {
  grid-area: card5;
}

#card6 {
  grid-area: card6;
}

#card7 {
  grid-area: card7;
}

#card8 {
  grid-area: card8;
}
<div class="grid-container">
    <div id="card1">
      <button type="button" id="card-btn">
      Short text
    </button>
    </div>
    <div id="card2">
      card2
    </div>
    <div id="card3">
      card3
    </div>
    <div id="card4">
      card4
    </div>
    <div id="card5">
      card5
    </div>
    <div id="card6">
      card6
    </div>
    <div id="card7">
      card7
    </div>
    <div id="card8">
      card8
    </div>
  </div>

Связанный вопрос, чтобы получить пример неявного вычисления: Поддерживать соотношение между столбцами в сетке CSS.Как рассчитывается сетка-столбец?

0 голосов
/ 16 июня 2019

Вы можете использовать Дисплей: блок; или положение: fexed;

...