0

My intentions are to create a schedule layout where each <li> item are placed on the Y axis relative to a timeline on the left. The problem occur when more then one <li> are placed overlapping each other:

Problem example

What I want to achieve is the <li> elements being able to share the width of the list element, <ul>, like this:

Achievement example

Note: The <li>elements still needs to be placed on the vertical axis relative to the timeline shown in first example.

As you can see the elements are placed to share the width of the container and are snapping as far to the left as possible without overlapping anything else.

Here is a snippet from the page I am working on:

::-webkit-scrollbar {
  display: none;
}

.day_div ul {
  width: 100%;
  position: relative;
}

.day_div li,
#info_holder li {
  position: relative;
  /* background-color: red; */
  color: white;
  transition: transform .2s ease-in-out;
  cursor: pointer;
  transform: scale(1) rotate(0deg);
  border-radius: 5px;
}

.day_div li::after,
#info_holder li::after {
  content: '';
  position: absolute;
  /* z-index: -1; */
  width: 100%;
  height: 100%;
  opacity: 1;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  /* opacity: 0;
      transition: opacity 0.2s ease-in-out; */
}

.day_div li.no-after::after,
#info_holder li.no-after::after {
  display: none;
  width: 0;
  height: 0;
}

.day_div li::before {
  border-radius: 5px;
}

.day_div li:hover.rotatable {
  /* transform: scale(0.9) rotate(6deg); */
  transform: rotate(6deg);
}


/* .day_div li:hover::after {
      opacity: 1;
    } */


/* skipping 1st child as it is the timeline */

.day_div li {
  background: rgb(60, 225, 226);
  background: linear-gradient(315deg, rgba(60, 225, 226, 1) 0%, rgba(28, 55, 172, 1) 100%);
}

.day_div:nth-child(3) li,
#info_holder li.three {
  background: rgb(60, 226, 124);
  background: linear-gradient(340deg, rgba(60, 226, 124, 1) 0%, rgba(88, 124, 147, 1) 100%);
}

.day_div:nth-child(4) li,
#info_holder li.four {
  background: rgb(122, 168, 91);
  background: linear-gradient(0deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(5) li,
#info_holder li.five {
  background: rgb(246, 176, 101);
  background: linear-gradient(20deg, rgba(246, 176, 101, 1) 0%, rgba(246, 127, 101, 1) 100%);
}

.day_div:nth-child(6) li,
#info_holder li.six {
  background: rgb(156, 87, 151);
  background: linear-gradient(25deg, rgba(156, 87, 151, 1) 0%, rgba(67, 51, 82, 1) 100%);
}

.day_div:nth-child(7) li,
#info_holder li.seben {
  background: rgb(122, 168, 91);
  background: linear-gradient(30deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(8) li,
#info_holder li.eight {
  background: rgb(60, 226, 124);
  background: linear-gradient(35deg, rgba(60, 226, 124, 1) 0%, rgba(88, 124, 147, 1) 100%);
}

.day_div li a,
#info_holder li a {
  top: 0;
  left: 0;
  position: absolute;
  /* width: 100%;
      height: 100%; */
  padding: calc(0.75* 1.25em);
}

.day_div li div,
#info_holder li div {
  display: block;
  position: absolute;
  padding: calc(0.75*1rem);
  overflow: scroll;
  height: 60%;
}

.day_div li a em,
#info_holder li a em {
  font-size: calc(var(--main-text-size)*0.8);
}

.day_div li.content_cutoff a::before,
#info_holder li.content_cutoff a::before {
  display: inline-block;
}

.day_div li a::before,
#info_holder li a::before {
  content: attr(data-start) " - "attr(data-end);
  display: block;
  color: #f1f1f1;
  font-weight: bold;
  font-size: calc(var(--main-text-size)*0.9);
}

.day_div li a.databefore::before,
#info_holder li a.databefore::before {
  content: attr(data-before);
}

.day_div li a em,
#info_holder li a em {
  font-size: calc(var(--main-text-size)*1.2);
}

.day_div:not(:first-child):not(:nth-child(2)) {
  border-left: none;
}

.day_div:last-child {
  border-right: none;
}

.day_div {
  /* may change to be a 5th of parent */
  border: 1px solid #ebebeb;
  width: 16%;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.day_div span {
  /* this is the day text styling */
  position: absolute;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ebebeb;
}
<div class="day_div">
  <!-- monday -->
  <span style="height: 50px; width: 238px;">Måndag</span>
  <ul style="margin-block-start: 25px;">
    <li data-overlappers="0" data-overlapping="0" class="rotatable" style="top: 25px; height: 100px;">
      <a data-start="08:00" data-end="09:00"><em>Matte</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Göran</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(189px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(307px + 0.9375em);"><em>Ja</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: block;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
    </li>
    <li data-overlappers="2" data-overlapping="0" class="rotatable" style="top: 41.6667px; height: 83.3333px;">
      <a data-start="09:10" data-end="10:00"><em>Spanska</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Lisa &amp; Andy</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(223px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(341px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span></span></div>
    </li>
    <li data-overlappers="2" data-overlapping="1" class="rotatable" style="top: -41.6667px; height: 116.667px;">
      <a data-start="09:10" data-end="10:20"><em>Tyska</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Mackan</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(202px + 0.9375em);"><em>Akvariet</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(297px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Presens som vanligt, glöm inte digilär</span></div>
    </li>
    <li data-overlappers="1" data-overlapping="2" class="rotatable" style="top: -141.667px; height: 83.3333px;">
      <a data-start="09:20" data-end="10:10"><em>Franska</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Esma</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(184px + 0.9375em);"><em>grupprummet</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(327px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span></span></div>
    </li>
    <li data-overlappers="0" data-overlapping="2" class="rotatable" style="top: -158.333px; height: 300px;">
      <a data-start="10:00" data-end="13:00"><em>Lunch</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em></em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(181px + 0.9375em);"><em></em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(271px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span></span></div>
    </li>
    <li data-overlappers="0" data-overlapping="0" class="rotatable" style="top: -158.333px; height: 200px;">
      <a data-start="13:00" data-end="15:00"><em>Mentorstid</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(117px + 0.9375em);"><em>Patrik</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(194px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(312px + 0.9375em);"><em>Nej</em></a>
      <div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
          <metadata></metadata>
          <g>
            <title>background</title>
            <rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
            <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
            </g>
          </g>
          <g>
            <title>Layer 1</title>
            <line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
          </g>
        </svg>
      </div>
      <div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Ta med datorer och inlämmningslapp</span></div>
    </li>
  </ul>
</div>

Here is the jsfiddle: https://jsfiddle.net/Snakehater/6dk84n1y/8/

How can I resolve this?

halfer
  • 19,824
  • 17
  • 99
  • 186
Snakehater
  • 145
  • 1
  • 9
  • 1
    Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. – halfer Aug 02 '20 at 16:31

1 Answers1

1

Use flexboxes. Flexbox Guide . You will require multiple flexboxes to achieve what you want. There will be a slight rework but then it w'd be much easier to do the alignments. You should also learn CSS Grids.

ul{
display:flex;
flex-direction:column;
justify-content:space-between;
}
Vishesh Mangla
  • 664
  • 9
  • 20
  • When adding your code 'columns' and 'space-between' flags as invalid property value. I tried with 'column' instead but not that much of a difference occurs. Is there something more I need to add? – Snakehater Aug 02 '20 at 16:24
  • 1
    Ahh sorry it's singular and another was justify-content. But I think you can read more on that site on how to use flexboxes. – Vishesh Mangla Aug 02 '20 at 16:42
  • https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-direction&preval=column – Vishesh Mangla Aug 02 '20 at 16:48
  • Unfortunately I don't understand and mess up items vs content always. I always have to look up. You can read more here https://stackoverflow.com/questions/48535585/the-difference-between-justify-self-justify-items-and-justify-content-in-css-gr. – Vishesh Mangla Aug 02 '20 at 16:51