How I can make each callendar item grow evenly?

Created Sep 20, 2021 Edited Sep 20, 2021

Viewed 41

I have the following implementation of a callendar:

.btn-etable {
  color: #fff;
  background-color: #d92b3a;
  border-color: #d92b3a;
}

.btn-etable:hover,
.btn-etable.selected {
  color: #d92b3a;
  background-color: #fff;
  border-color: #d92b3a;
}

.btn-ppl {
  width: 48px;
  height: 48px;
  margin: 2px;
}

.callendar {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  width: 100%;
}

.week,
.callendar_header {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  justify-content: stretch;
}

.callendar_header {
  order: "-1"
}

.callendar_header span {
  width: 48px;
  margin: 1px;
  text-align: center;
  flex-grow: 1;
}

.callendar-item,
.blank {
  width: 48px;
  flex-grow: 1;
  margin: 1px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
   <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<div id="callendar_view" class="callendar">
  <div id="callendar_header" class="callendar_header">
    <span>Κυρ</span>
    <span>Δευ</span>
    <span>Τρι</span>
    <span>Τετ</span>
    <span>Πεμ</span>
    <span>Παρ</span>
    <span>Σαβ</span>
  </div>
  <div class="week" data-week="1" style="order: 1;">
    <div class="blank" style="order:-1;">&nbsp;&nbsp;</div>
    <button class="btn btn-secondary blank disabled callendar-item" style="order:1; text-alighn:center;">20</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-21" data-parent="callendar_colapse" data-input-name="reserv_date"
      data-form="reserv_form" style="order:2;" data-callback="onSelectDate">21</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-22" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form"
      style="order:3;" data-callback="onSelectDate">22</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-23" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:4;" data-callback="onSelectDate">23</button>
    <button
      class="btn btn-etable btn-radio callendar-item" data-value="2021-09-24" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:5;" data-callback="onSelectDate">24</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-25" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:6;" data-callback="onSelectDate">25</button></div>
  <div class="week"
    data-week="2" style="order: 2;"><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-26" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:0;" data-callback="onSelectDate">26</button><button class="btn btn-secondary blank disabled callendar-item"
      style="order:1; text-alighn:center;">27</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-28" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:2;" data-callback="onSelectDate">28</button>
    <button
      class="btn btn-etable btn-radio callendar-item" data-value="2021-09-29" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:3;" data-callback="onSelectDate">29</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-30" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:4;" data-callback="onSelectDate">30</button><button class="btn btn-etable btn-radio callendar-item"
        data-value="2021-10-01" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:5;" data-callback="onSelectDate">1</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-02"
        data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:6;" data-callback="onSelectDate">2</button></div>
  <div class="week" data-week="3" style="order: 3;"><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-03" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:0;" data-callback="onSelectDate">3</button><button class="btn btn-secondary blank disabled callendar-item"
      style="order:1; text-alighn:center;">4</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-05" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:2;" data-callback="onSelectDate">5</button>
    <button
      class="btn btn-etable btn-radio callendar-item" data-value="2021-10-06" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:3;" data-callback="onSelectDate">6</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-07" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:4;" data-callback="onSelectDate">7</button><button class="btn btn-etable btn-radio callendar-item"
        data-value="2021-10-08" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:5;" data-callback="onSelectDate">8</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-09"
        data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:6;" data-callback="onSelectDate">9</button></div>
  <div class="week" data-week="4" style="order: 4;"><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-10" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:0;" data-callback="onSelectDate">10</button>
    <div class="blank" style="order:106;"></div>
    <div class="blank" style="order:105;"></div>
    <div class="blank" style="order:104;"></div>
    <div class="blank" style="order:103;"></div>
    <div class="blank" style="order:102;"></div>
    <div class="blank" style="order:101;"></div>
  </div>
</div>

But in small screen (360X640) sizes columns seem out of order:

How I can make it even spaced also in small screen sizes as well? What I want is a table look that grows ans shrinks evenly redardless the screen size. Do you have any idea how I can achieve this?

flexbox css html

2 Answers

You need to reset padding in the .btn class. Add padding: 0; to these classes .callendar-item and .blank.

CSS

.btn.callendar-item,
.btn.blank {
  padding: 0;
}

.btn-etable {
  color: #fff;
  background-color: #d92b3a;
  border-color: #d92b3a;
}

.btn-etable:hover,
.btn-etable.selected {
  color: #d92b3a;
  background-color: #fff;
  border-color: #d92b3a;
}

.btn-ppl {
  width: 48px;
  height: 48px;
  margin: 2px;
}

.callendar {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  width: 100%;
}

.week,
.callendar_header {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  justify-content: stretch;
}

.callendar_header {
  order: "-1"
}

.callendar_header span {
  width: 48px;
  margin: 1px;
  text-align: center;
  flex-grow: 1;
}

.callendar-item,
.blank {
  width: 48px;
  flex-grow: 1;
  margin: 1px;
}


/* new lines */

.btn.callendar-item,
.btn.blank {
  padding: 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<div id="callendar_view" class="callendar">
  <div id="callendar_header" class="callendar_header">
    <span>Κυρ</span>
    <span>Δευ</span>
    <span>Τρι</span>
    <span>Τετ</span>
    <span>Πεμ</span>
    <span>Παρ</span>
    <span>Σαβ</span>
  </div>
  <div class="week" data-week="1" style="order: 1;">
    <div class="blank" style="order:-1;">&nbsp;&nbsp;</div>
    <button class="btn btn-secondary blank disabled callendar-item" style="order:1; text-alighn:center;">20</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-21" data-parent="callendar_colapse" data-input-name="reserv_date"
      data-form="reserv_form" style="order:2;" data-callback="onSelectDate">21</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-22" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form"
      style="order:3;" data-callback="onSelectDate">22</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-23" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:4;" data-callback="onSelectDate">23</button>
    <button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-24" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:5;" data-callback="onSelectDate">24</button><button class="btn btn-etable btn-radio callendar-item"
      data-value="2021-09-25" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:6;" data-callback="onSelectDate">25</button></div>
  <div class="week" data-week="2" style="order: 2;"><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-26" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:0;" data-callback="onSelectDate">26</button><button class="btn btn-secondary blank disabled callendar-item"
      style="order:1; text-alighn:center;">27</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-28" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:2;" data-callback="onSelectDate">28</button>
    <button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-29" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:3;" data-callback="onSelectDate">29</button><button class="btn btn-etable btn-radio callendar-item"
      data-value="2021-09-30" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:4;" data-callback="onSelectDate">30</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-01"
      data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:5;" data-callback="onSelectDate">1</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-02" data-parent="callendar_colapse"
      data-input-name="reserv_date" data-form="reserv_form" style="order:6;" data-callback="onSelectDate">2</button></div>
  <div class="week" data-week="3" style="order: 3;"><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-03" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:0;" data-callback="onSelectDate">3</button><button class="btn btn-secondary blank disabled callendar-item"
      style="order:1; text-alighn:center;">4</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-05" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:2;" data-callback="onSelectDate">5</button>
    <button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-06" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:3;" data-callback="onSelectDate">6</button><button class="btn btn-etable btn-radio callendar-item"
      data-value="2021-10-07" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:4;" data-callback="onSelectDate">7</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-08" data-parent="callendar_colapse"
      data-input-name="reserv_date" data-form="reserv_form" style="order:5;" data-callback="onSelectDate">8</button><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-09" data-parent="callendar_colapse" data-input-name="reserv_date"
      data-form="reserv_form" style="order:6;" data-callback="onSelectDate">9</button></div>
  <div class="week" data-week="4" style="order: 4;"><button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-10" data-parent="callendar_colapse" data-input-name="reserv_date" data-form="reserv_form" style="order:0;" data-callback="onSelectDate">10</button>
    <div class="blank" style="order:106;"></div>
    <div class="blank" style="order:105;"></div>
    <div class="blank" style="order:104;"></div>
    <div class="blank" style="order:103;"></div>
    <div class="blank" style="order:102;"></div>
    <div class="blank" style="order:101;"></div>
  </div>
</div>

edited Sep 20, 2021

user_155451160

answered Sep 20, 2021

Add the following code to your CSS

@media(max-width:400px){
  .btn {
    padding: 1vw!important;
    font-size: 5vw!important;
  }
  .callendar_header span {
    width: 48px;
    margin: 1px;
    text-align: center;
    flex-grow: 1;
    font-size: 6vw;
  }
}

It will be solved!

edited Sep 20, 2021

user_163317150

answered Sep 20, 2021