Как сделать так, чтобы ширина кнопки соответствовала самой большой кнопке ширины на основе текста?

Question

Как сделать так, чтобы все мои кнопки следовали ширине большей ширины на основе текста?

Кнопка генерирует динамически, и текст будет основан на данных в базе данных. тогда я хочу, чтобы они имели одинаковый размер в пользовательском интерфейсе.

Возможно ли это? Если это. как?

Вот моя кнопка:

@foreach($buttons as $button)
 <button class="btn col-lg-2 col-md-3 col-sm-4 text-center btn-button button{{$button->parent_id}} hide" type="button" onclick="buttonFunction('button{{$button->id}}'"  style="background-color: #69C1DA;">
  <input type="radio" class="hide" name="type" value="{{$button->id}}" id="button{{$button->id}}">
  <span>{{$button->name}}</span>
 </button>
@endforeach

Вот пользовательский интерфейс моей кнопки

, как вы можете видеть, текст не вписывается. Я могу сделать кнопку больше, чем она есть сейчас, но я не знаю, когда слово будет в базе данных, достаточно большой, чтобы оно больше не подходило.

Заранее спасибо.

Answer 1

Если бы это был я - я бы забыл попытаться использовать столбцы boostrap и просто присвоить ширину css.

Это можно сделать простым javascript (особенно с использованием document.querySelectorAll ( ) селектор - но так как вы используете jquery - вот подход -

итерируйте по кнопкам и найдите максимальную ширину, сравнивая ширину каждой кнопки с максимальной шириной и, если она больше максимальной ширины - установка этой ширины как max-width.

Затем установите все кнопки на maxWidth и вуаля - все кнопки имеют ту же ширину, что и кнопка с самым длинным текстом.

Обратите внимание, что я удалил часть вашего кода только для этого фрагмента - а также переместил стиль в блок css - всегда лучше использовать exteranl css, чем встроенный для каждой кнопки. Если вам нужны разные стили для разных кнопок - примените разные классы с другим стилем.

let maxWidth = 0;

$('.btn').each(function(){
 const width = parseFloat($(this).css('width'));
 if(width > maxWidth) {maxWidth = width}
})

$('.btn').css('width', maxWidth +'px');

.btn {
  background-color: #69C1DA;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn text-center btn-button button{{$button->parent_id}} hide" type="button">

  <span>text</span>
 </button>
  <button class="btn text-center btn-button button{{$button->parent_id}} hide" type="button">
  <span>longer text</span>
 </button>
  <button class="btn text-center btn-button button{{$button->parent_id}} hide" type="button" onclick="buttonFunction('button{{$button->id}}'">
  <span> very very long text</span>
 </button>
   <button class="btn text-center btn-button button{{$button->parent_id}} hide" type="button">
  <span>short text</span>
 </button>

Answer 2

Ответ уже здесь, но я добавлю его для получения информации об использовании grid и пользовательских свойств. Элемент

может переноситься на несколько строк, но все они будут одинаковой ширины, демонстрация ниже.

var bigW = '0';
for (let e of document.querySelectorAll('.btn')) {
  elW = e.offsetWidth;
  if (elW > bigW) {
    bigW = elW;
  }
  document.documentElement.style.setProperty("--myW", bigW + 'px');// update column's width //
}

div {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--myW)); /* custom properie here to size the columns */
  justify-content: center;/* center them for a better visual*/
}

button {
  white-space: nowrap;  /* we need this */
}

<div>
  <button class="btn">some more text </button>
  <button class="btn">text </button>
  <button class="btn">some bits of text </button>
  <button class="btn">Lorem Ipsum</button>
  <button class="btn">some loooooonnnng text </button>
  <button class="btn">some some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
</div>

Вот перо для разветвления или игры с https://codepen.io/gc-nomade/pen/GRJovXZ

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: требуется браузер с поддержкой CSS Grid Layout и пользовательских свойств / CSS переменных (- *: значение)

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

Имена свойств с префиксом --, например --example-name, представляют собой пользовательские свойства, которые содержат значение, которое можно использовать в других объявлениях с использованием функции var().

---

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

CSS Сетка Макет отлично подходит для разделения страницы на основные регионы или определения отношений с точки зрения размера, положения и слой, между частями элемента управления, построенного из HTML примитивов.

Информацию о поддержке можно найти по адресу http://caniuse.com

Answer 3

На самом деле есть простой способ сделать это, используя jQuery с минимальным кодом.

Вы можете изменить это решение на , чтобы получить наибольшую ширину кнопки и применить эту ширину. на все .

$(document).ready(function() {
  
  $.fn.widest = function() {
    return this.length ? this.width(Math.max.apply(Math, this.map(function() { 
        return $(this).width();
    }))) : this;
	};
  
    $('.buttons').widest();
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="buttons" >One</button>
<button class="buttons" >Twooooo</button>
<button class="buttons" >Three Four Five Six Seven Eight</button>

ps: на сайте они предоставили решение, которое включает щелчок, чтобы получить ширину, поэтому измените его, как мой код, где вы удалите щелкните по функции и вызовите этот код в функции ready .

Это гарантирует, что ваши кнопки всегда будут принимать наибольшее значение ширины кнопки и применят его ко всем остальным кнопкам.

Answer 4

Как я вижу, вам нужно будет установить ширину после обновления всего содержимого кнопок. Таким образом, вы можете проверить наибольшую ширину с помощью Javascript и изменить свойство ширины кнопки в соответствии с ним.

let buttons = document.querySelectorAll('.btn');
let maxWidth = 0;

for (let i = 0; i < buttons.length; i++)
{
  // You need to check the maximum value of all
  if (maxWidth < buttons[i].offsetWidth) maxWidth = buttons[i].offsetWidth;
}

for (let i = 0; i < buttons.length; i++)
{
  // You set the width to the max plus the padding left and right
  buttons[i].style.width = maxWidth + 40 + 'px';
}

// This was the maximum width
document.querySelector('p').innerHTML = maxWidth + 40 + 'px';

.btn
{
  width: fit-content;
  padding: 8px 20px;
  font-size: 16px;
  border: 1px solid blueviolet;
  color: white;
  background-color: blueviolet;
  margin: 1vmin 2vmin;
  cursor: pointer;
  transition: 0.3s ease;
}
.btn:hover
{
  color: blueviolet;
  background-color: transparent;
 }

<button class='btn'>
  This is a button
</button>
<button class='btn'>
  Ok, you shoud click this!
</button>
<button class='btn'>
  Click here!
</button>
<button class='btn'>
  Learn more
</button>
<button class='btn'>
  Come here, buddy!
</button>
<button class='btn'>
  What a button
</button>
<p>
</p>