0

let lastSelectButton;

document.querySelectorAll('.primaryButton').forEach(button => {
  button.addEventListener('click', event => {
    if (lastSelectButton) document.querySelector(`#${lastSelectButton} + div`).classList.toggle('inlb');
    lastSelectButton = event.currentTarget.getAttribute('id');
    document.querySelector(`#${lastSelectButton} + div`).classList.toggle('inlb');
  }, false);
});
button {
  text-align: left;
}

.primaryButton {
  display: inline-block;
  background: #bfbfbf;
  border: none;
  width: 100%;
  padding: 5px;
}

.secondaryButton {
  background: #d4d4d4;
  border: none;
  width: 100%;
  text-indent: 1em;
}

.primaryButton:hover {
  background: #a1a1a1;
  cursor: pointer;
}

.secondaryButton:hover {
  background: #bfbfbf;
  cursor: pointer;
}

.none {
  display: none;
}

.inlb {
  display: inline-block !important;
}
<button class="primaryButton" id="p1">A</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
  <button class="secondaryButton">3</button>
</div>
<button class="primaryButton" id="p2">B</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
</div>
<button class="primaryButton" id="p3">C</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
</div>

As seen, the secondary buttons do not occupy full width like the primary buttons. Why does this happen? How to correct it?

On the contrary, setting inline-blocks to blocks settles the matter:

let lastSelectButton;

document.querySelectorAll('.primaryButton').forEach(button => {
  button.addEventListener('click', event => {
    if (lastSelectButton) document.querySelector(`#${lastSelectButton} + div`).classList.toggle('inlb');
    lastSelectButton = event.currentTarget.getAttribute('id');
    document.querySelector(`#${lastSelectButton} + div`).classList.toggle('inlb');
  }, false);
});
button {
  text-align: left;
}

.primaryButton {
  display: block;
  background: #bfbfbf;
  border: none;
  width: 100%;
  padding: 5px;
}

.secondaryButton {
  background: #d4d4d4;
  border: none;
  width: 100%;
  text-indent: 1em;
}

.primaryButton:hover {
  background: #a1a1a1;
  cursor: pointer;
}

.secondaryButton:hover {
  background: #bfbfbf;
  cursor: pointer;
}

.none {
  display: none;
}

.inlb {
  display: block !important;
}
<button class="primaryButton" id="p1">A</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
  <button class="secondaryButton">3</button>
</div>
<button class="primaryButton" id="p2">B</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
</div>
<button class="primaryButton" id="p3">C</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
</div>

What happens when I do this that solves the problem?

Edit: This question is not a duplicate of this question, the main issue of in my question is buttons taking full width, while the other question asks for a differences between display: inline-block and display: block .

Book Of Flames
  • 316
  • 3
  • 13
  • add `width:100%;` to the `.inlb` class, and your inline block displays width 100% ... like you want – Bravo Aug 02 '21 at 09:56
  • @Bravo I just realized, that the width problem is due to the `div`s with class `none`. They don't occupy full width. Do you have any idea why do they take the width they do instead of taking full width? – Book Of Flames Aug 02 '21 at 10:02
  • @StephanVierkant That question has the general explanation to what `inline-block` and `block` elements are, but in my question the problem is to have the buttons take the full width, whose root cause is a different issue. – Book Of Flames Aug 02 '21 at 10:04
  • in both case you button is taking full width of its container, now the issue is the container that only take full width of its own container when it's block not inline block (thus the difference between block and inline block – Temani Afif Aug 02 '21 at 10:11
  • @TemaniAfif But why do the containers take the width they do in `inline-block` vs full width in `block`? Even that is inconsistent, like in secondary buttons of `A` and `B` – Book Of Flames Aug 02 '21 at 10:13
  • you simply need to understand the difference between block and inline-block (check the duplicates) – Temani Afif Aug 02 '21 at 10:17

0 Answers0