CSS - Buttons group positioning issue

user_4689583 0
Viewed 45

I have some buttons that are data-bind from an knockout observable array like:

<div class="col-9 btns" data-bind="foreach: groupedDays">
     <div class="btn-group btn-group-outline" data-bind="foreach:$data, css: {active: $data[0].active != false}">
          <button data-bind="css: active == false ? 'btn btn-white btn-xs' : 'btn btn-dark btn-xs', click:$data.click, text:$data.text"></button>
     </div>
</div>

groupedDays contains 4 elements: 1. Mon, 2. Tue, 3. Wed, 4. Thu, Fri, Sat and Sun because are of the same color one next to another

My custom classes are:

.btns {
display: flex;
}

.btn-group-outline {
    display: flex;
    outline-offset: 1.5px;
}
.btn-group-outline.active {
    outline: 2px solid black;
    z-index: 3000;
}
.btn-group-outline > .btn:not(:first-child){
    margin-right: 0;
}

My grouped buttons are looking like enter image description here but I cannot figure out how to make them fill the col-9 div because now is about half of the div and should look like enter image description here but with the outline

knockout.js css html
1 Answers

You could try a display: grid style.

.btns { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  max-width: 100%; margin: 0 auto;
button {
   width: 100%;
   }
}
user_108585440
Related