Как узнать, сколько элементов перекрывают друг друга, и изменить их ширину - PullRequest
Новая
       100

Как узнать, сколько элементов перекрывают друг друга, и изменить их ширину

1 голос
/ 01 августа 2020

У меня 3 кнопки во флексбоксе в ОДНОЙ ячейке таблицы. Дело в том, что я хочу настроить ширину каждой кнопки так, чтобы кнопки заполняли горизонтальную ширину на 100% (насколько это возможно). Проблема в том, что если я не использую flexbox, они перекрываются, и размеры не меняются (не отображаются все кнопки). Однако, если я использую flexbox, поскольку это одна ячейка, все кнопки динамически сжимаются, ДАЖЕ ЕСЛИ они НЕ перекрываются по оси y (это ячейка с высотой 42 бэр, см. Рисунок ниже).

Вот фотография проблемы:

Image showing the problem

In the photo the red cell under the Monday column should be at full width and it is not.

My Question is: Can I have a way to dynamically change these widths (max-width didnt work) ONLY if they are overlapping. If they do not overlap they should fit the whole width. The caveat is I am going to be dynamically adding more events as time goes so I can just say put this one button at 50% because soon it may need to be 33%.

Alternatively: Is there a way to know exactly how many overlap, so I can just use JavaScript to readjust every time something is added (less nice).

Here is a codepen: https://codepen.io/samuel-solomon/pen/oNbKeRm?editors=1100 Примечание: я хочу сохранить y-позицию (это для календаря, поэтому он представляет время) 

.day_Block {
  position: relative;
}

.flexbox_Edits {
  top: 0;
  position: relative;
  width: 100%;
  height: 42rem;
}

.event_Button {
  border-width: 2px;
  max-width: 100%;
  border-radius: 8px;
  border-style: inset solid solid;
  align-items: flex-start;
  align-self: stretch;
  position: relative;
  width: 100%;
  float: left;
  left: 0;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}

.event_Button_Text {
  word-wrap: break-word;
  text-align: left;
  float: left;
  line-height: 1.25rem;
  font-family: 'Montserrat';
  font-weight: 550;
  letter-spacing: 0.06rem;
  display: inline-flex;
  font-size: 0.8em !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="container on_Left from_Top table-responsive">
  <table class="calendar mt-5" id="calendar_Table">
    <thead class="masthead">
      <tr>
        <th class="time_Col days"></th>
        <th>
          <str>Monday</span>
        </th>
        <th><span>Tuesday</span></th>
        <th><span>Wednesday</span></th>
        <th><span>Thursday</span></th>
        <th><span>Friday</span></th>
      </tr>
    </thead>
    <tbody id="calendar_Body">
      <tr id="Time">
        <td class="time_Col">
          <div class="time_Block">8am</div>
          <div class="time_Block">9am</div>
          <div class="time_Block">10am</div>
          <div class="time_Block">11am</div>
          <div class="time_Block">12pm</div>
          <div class="time_Block">1pm</div>
          <div class="time_Block">2pm</div>
          <div class="time_Block">3pm</div>
          <div class="time_Block">4pm</div>
          <div class="time_Block">5pm</div>
          <div class="time_Block">6pm</div>
          <div class="time_Block">7pm</div>
          <div class="time_Block">8pm</div>
          <div class="time_Block">9pm</div>
        </td>
        <td class="day_Block">
          <div class="d-flex flexbox_Edits" id="M">
            <button class="btn event_Button_Text event_Button event_Button_CS_2" style="height: 12rem; top: 0rem; background-color: rgb(83, 94, 235);">M8:00 - 12:00<br>CS 2<br></button>

            <button class="btn event_Button_Text event_Button event_Button_CS_1" style="height: 21rem; top: 18rem; background-color: rgb(254, 44, 84);">M2:00 - 9:00<br>CS 1<br></button>
            <button class="btn event_Button_Text event_Button event_Button_CS_1" style="height: 21rem; top: 18rem; background-color: rgb(19, 202, 145);">M2:00 - 9:00<br>CS 1<br></button>
          </div>
        </td>
        <td class="day_Block">
          <div class="d-flex flexbox_Edits" id="T"></div>
        </td>
        <td class="day_Block">
          <div class="d-flex flexbox_Edits" id="W"></div>
        </td>
        <td class="day_Block">
          <div class="d-flex flexbox_Edits" id="R"></div>
        </td>
        <td class="day_Block">
          <div class="d-flex flexbox_Edits" id="F"></div>
        </td>
      </tr>
    </tbody>
  </table>
</section>

1 Ответ

0 голосов
/ 01 августа 2020

Я вижу, вы используете дисплей flex, а также top: 18rem. Я думаю, что максимальное значение установлено для отображения в соответствующем временном месте. Это верхнее значение сдвигает их вниз, но их исходное положение находится в первой строке. Я думаю, вы можете разделить кнопки на подразделения в зависимости от временных интервалов, которые они занимают, и добавить к ним гибкость дисплея. 

<div class="d-flex flexbox_Edits" id="M">
  <button class="btn event_Button_Text event_Button event_Button_CS_2" style="height: 12rem; top: 0rem; background-color: rgb(83, 94, 235);">M8:00 - 12:00<br>CS 2<br></button>
</div>
<div class="d-flex flexbox_Edits" id="M">
  <button class="btn event_Button_Text event_Button event_Button_CS_1" style="height: 21rem; top: 18rem; background-color: rgb(254, 44, 84);">M2:00 - 9:00<br>CS 1<br></button>
  <button class="btn event_Button_Text event_Button event_Button_CS_1" style="height: 21rem; top: 18rem; background-color: rgb(19, 202, 145);">M2:00 - 9:00<br>CS 1<br></button>
</div>
Вы можете проверить это ваше модифицированное перо кода. https://codepen.io/rohinikumar4073/pen/MWKNXzP?editors=1100
...