How to dynamically add Elements to div and make sure they are all visible

user_3935035 0
Viewed 70

I am adding <div>s on click dynamically to a container. However, when I have added three divs horizontally, the container is only scrollable to the right. To the left, the divs are cut off. Here is a video where you can see it.

https://embed.api.video/vod/vi1w8DbshyZaleHsgLvBMT50

.shift-selection-button-wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 100%;
  width: 50%;
}

.shift-selection-container {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  margin-top: var(--height-header-line);
  overflow: scroll;
}

.shift-selection-checkmark-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#shift-selection-button-wrapper-time {
  justify-content: center;
}

.shift-selection-shift-time-badge-wrapper {
  position: relative;
}

.shift-selection-shift-time-badge {
  top: -6px;
  position: absolute;
  right: -5px;
  height: 25px;
  width: 25px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: white;
  font-weight: bold;
  border-color: white;
  border-style: solid;
  border-width: 1px;
}

.shift-selection-button-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="shift-selection-container">
  <div class="shift-selection-button-wrapper bring-to-front">
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Dog</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Cat</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Lion</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Shark</button>
    </div>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front">
    <button class="button">AA</button>
    <button class="button">BB</button>
    <button class="button">CC</button>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front" id="shift-selection-button-wrapper-time">
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">1pm</button>
    </div>
    
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">11am</button>
    </div>
    
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">5am</button>
    </div>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front">
    <a class="shift-selection-checkmark-wrapper">
      <button class="button">Go!</button>
    </a>
  </div>
</div>

Here is a fiddle to the mark up and CSS, but without the functionality... The logic behind the clicking etc. is too complex in order to abstract it...

https://jsfiddle.net/bn2wouzg/17/

Why do the divs get cut off to the left?

css html javascript
1 Answers

The problem was the following CSS-line for .shift-selection-container:

justify-content: space-evenly;

You could change it as follows, and it works:

justify-content: flex-start;

Working example:

.shift-selection-button-wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 100%;
  width: 50%;
}

.shift-selection-container {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  margin-top: var(--height-header-line);
  overflow: scroll;
}

.shift-selection-checkmark-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#shift-selection-button-wrapper-time {
  justify-content: center;
}

.shift-selection-shift-time-badge-wrapper {
  position: relative;
}

.shift-selection-shift-time-badge {
  top: -6px;
  position: absolute;
  right: -5px;
  height: 25px;
  width: 25px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  color: white;
  font-weight: bold;
  border-color: white;
  border-style: solid;
  border-width: 1px;
}

.shift-selection-button-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="shift-selection-container">
  <div class="shift-selection-button-wrapper bring-to-front">
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Dog</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Cat</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Lion</button>
    </div>
    
    <div class="shift-selection-button-icon-wrapper bring-to-front">
      <button class="button">Shark</button>
    </div>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front">
    <button class="button">AA</button>
    <button class="button">BB</button>
    <button class="button">CC</button>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front" id="shift-selection-button-wrapper-time">
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">1pm</button>
    </div>
    
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">11am</button>
    </div>
    
    <div class="shift-selection-shift-time-badge-wrapper">
      <button class="button">5am</button>
    </div>
  </div>
  
  <div class="shift-selection-button-wrapper bring-to-front">
    <a class="shift-selection-checkmark-wrapper">
      <button class="button">Go!</button>
    </a>
  </div>
</div>

user_153773550
Related