Search code examples
cssangularjscss-positionoverlapping

get rid of overlapping divs

I have a list of appointments and have a collapsible toggle in place to show/hide more details. Along with the collapsible panels, I also wanted to incorporate a plus/minus sign that morphs when clicked upon. I found the code for that in another stackoverflow entry and is represented in the accordion-toggle class below:

<div style="margin-right:auto;">
   <a class="flex accordion-toggle collapsed" data-toggle="collapse" href="#{{item.sys_ID}}" role="button" aria-expanded="false" aria-controls="collapseDetails">
   <span class="h4 m-l-xs" >{{item.id}}: {{item.name}}</span>
   <i ng-if="item.required==true" class="fa fa-exclamation-circle mandatory m-l-xs"></i>
   </a>
   <div>
      <small class="text-muted"><span class="m-l-xs">{{item.description}}</span></small>
      <small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">{{item.duration}} hour(s)</span></small>
   </div>
</div>

.flex {
  display: flex;
  align-items: center;
}

.accordion-toggle {
  position: relative;
}

.accordion-toggle::before,
.accordion-toggle::after {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 4px;
  background-color: #000;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.accordion-toggle::before {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  opacity: 0;
}
.accordion-toggle.collapsed::before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1;
}
.accordion-toggle.collapsed::after {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

My issue here is the positioning of the accordion-toggle overlaps with my list. I've tried all sorts of things, but can't figure out how to push the list over to the right in order to make room for the plus/minus sign. The CSS above is rather advanced for me so I'm not even sure how the plus/minus sign is created. Any guidance is appreciated!

enter image description here

Solution

  • You should just need to add some margin-left to the <span> elements in the accordion.

    This can be done with:

    .accordion-toggle > span {
  margin-left: 20px;
}

    And seen in the following:

    .flex {
  display: flex;
  align-items: center;
}

.accordion-toggle {
  position: relative;
}

.accordion-toggle::before,
.accordion-toggle::after {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 4px;
  background-color: #000;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.accordion-toggle::before {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  opacity: 0;
}

.accordion-toggle.collapsed::before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1;
}

.accordion-toggle.collapsed::after {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.accordion-toggle > span {
  margin-left: 20px;
}
    <div style="margin-right:auto;">
  <a class="flex accordion-toggle collapsed" data-toggle="collapse" href="#{{item.sys_ID}}" role="button" aria-expanded="false" aria-controls="collapseDetails">
    <span class="h4 m-l-xs">{{item.id}}: {{item.name}}</span>
    <i ng-if="item.required==true" class="fa fa-exclamation-circle mandatory m-l-xs"></i>
  </a>
  <div>
    <small class="text-muted"><span class="m-l-xs">{{item.description}}</span></small>
    <small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">{{item.duration}} hour(s)</span></small>
  </div>
</div>

    Note that you might want to play a little with the margin-left value based on your actual font sizes and display. If you want the offset to apply to both lines of text, add the rule to
    .accordion-toggle > .text-muted instead.