How can I make all my button to follow the width of a larger width based on text?

The button produce dynamically and the text will be based on data on database. then I want them to have the same size on UI.

Is this possible? If it is. how?

Here's my button:

@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

Here's the UI of my button

as you can see the text is not fitted. I can make the button bigger than what is it now but I don't know when a word will be on database that is large enough for it to be not fit again.

Thanks in advance.

How can I make all my button to follow the width of a larger width based on text?

The button produce dynamically and the text will be based on data on database. then I want them to have the same size on UI.

Is this possible? If it is. how?

Here's my button:

@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

Here's the UI of my button

as you can see the text is not fitted. I can make the button bigger than what is it now but I don't know when a word will be on database that is large enough for it to be not fit again.

Thanks in advance.

• javascript
• jquery
• html
• css
• laravel

• 1 Can you try css property white-space: normal; to your button class?? – Maniraj Murugan Commented Feb 14, 2020 at 1:37
• @ManirajMurugan what is the use of that? – Jovs Commented Feb 14, 2020 at 1:38
• It will make the text to fit into the width of the button.. – Maniraj Murugan Commented Feb 14, 2020 at 1:39
• @ManirajMurugan its make my specific button to have another height which is not good for me too – Jovs Commented Feb 14, 2020 at 1:39
• 1 Then I would suggest don't make the col num split up, just give it col, codepen.io/Maniraj_Murugan/pen/OJVMjBb .. This will make everything in auto.. – Maniraj Murugan Commented Feb 14, 2020 at 2:14

4 Answers 4

If it was me - I would forget trying to use the boostrap columns and simply style the width with css.

This can be done in plain javascript (esp using the document.querySelectorAll() selector - but since you are using jquery - here is the approach -

iterate over the buttons and find the max-width by paring each buttons width to a max-width and if it is greater than maxwidth - setting that width as the max-width.

Then set all the buttons to the maxWidth and voila - all buttons are the same width as the button with the longest text.

Note that i removed some of your code just for this snippet - and also moved the style into the css block - it is always better to use exteranl css than inline for each button. If you want different astyles for different buttons -apply different classes with the different styling.

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./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 is already here , but i add this one for info about using grid and custom properties.

element can wrap on few rows but will all be the same width, demo below .

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>

Here is a pen to fork or play with https://codepen.io/gc-nomade/pen/GRJovXZ

DISCLAIMER : requires a browsers that supports CSS Grid Layout and custom properties / CSS variables (--*:value)

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

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

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

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

support information can be find out at http://caniuse.

Actually there is an easy way to do this using jQuery with minimal code.

You can modify this solution to get the largest button width and apply that width to all.

$(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./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: in the website, they provided a solution which involves click to get the width, so modify it like my code, where you remove the click function and call that code in the ready function.

This will ensure that your buttons will always take the largest button width value and apply that to all other buttons.

As I can see, you'll need to set the width after all the content of the buttons is updated. So, you can check the largest width with Javascript and change the button width property according to it.

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>