Question 160352 in CSS Question posted in
Some basic documentation can be found here.

Can CSS make collapse button & dotted line work together?

When I remove the first line in the css display: flex !important;, collapse-expand button works as expected (click on top of set1), but removes the in-between dotted line.

When I keep the first line in the css display: flex !important;, collapse-expand does not work (click on top of set1), but in-between dotted line is shown as expected.

Working fiddle of the same` http://jsfiddle.net/k68frxds/6/

How to keep both dotted lines and collapse expand button to work? Thank you.

<div class="itemDiv">
   <div>
      <a class="accordion-button " data-toggle="collapse" data-target=".lev1"> Set1 </a>
      <p class ="collapse multi-collapse lev1 show">item1 <span class="DataRightAlign"> Set1val</span></p>
      <p class ="collapse multi-collapse lev1 show">item2<span class="DataRightAlign">Set1val</span></p>
   </div> 

   <div>
      <a class="accordion-button " data-toggle="collapse" data-target=".lev3">Set2 </a>
      <p class="collapse multi-collapse lev3 show"> item3<span class="DataRightAlign">Set2val</span></p>
  </div >  
</div >

Css:

.lev1,.lev2,.lev3 {
    display: flex !important;
    align-items: flex-end;
    margin-top: 5px;
    margin-left: 15px;
}

.lev1:after, .lev2:after, .lev3:after {
    content: '';
    flex: auto;
    min-width: 24px;
    margin: 0 6px;
    height: 2px;
    color: lightgrey;
    margin-bottom: 4px;
    background-image: linear-gradient(to right,currentColor 2px,transparent 1px);
    background-size: 4px 2px;
}

.DataRightAlign {
  flex: none;
  word-wrap: break-word;
  white-space: break-spaces;
  max-width: 62%;    
  float: right;
  margin-right: 20px;
  margin-left: 10px;
  color: black; 
}

.DataRightAlign:last-child {
    order: 1;
    text-align: right;
}
Tags:

2

Answers


  1. 0

    Don’t style the Bootstrap element nest your own element for styling.

    I made some changes to your HTML structure:

    <div class="trackBallDiv">

  <div>
      <a class="accordion-button " data-toggle="collapse" data-target=".lev1"> Set1 </a>
      <div class ="collapse multi-collapse lev1 show">
      <p class="flex">
      <span>CableValue</span>
      <span class="DataRightAlign"> Set1val</span>
      </p>
      </div>
      <div class ="collapse multi-collapse lev1 show">
      <p class="flex">
      <span>CableResistance</span>
      <span class="DataRightAlign">Set1val</span>
      </p>
      </div>
  </div>
  
  
  <div>
      <a class="accordion-button " data-toggle="collapse" data-target=".lev3">Set2 </a>
      <div class="collapse multi-collapse lev3 show" > 
      <p class="flex">
      <span>Time</span>
      <span class="DataRightAlign">Set2val</span>
      </p>
  </div >
  
</div >

    These are some styling changes. I also remove redundant styles.

    .flex{
    display: flex;
    justify-content: space-between;
 }
 
.lev1,.lev2,.lev3 {
    position: relative;
    margin-top: 5px;
    margin-left: 15px;
}

 .lev1::after, .lev2::after, .lev3::after {
        content: '';
        position: absolute;
        width: 80%;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 6px;
        height: 2px;
        color: lightgrey;
        margin-bottom: 4px;
        background-image: linear-gradient(to right, currentColor 2px, transparent 1px);
        background-size: 4px 2px;
    }
    
.DataRightAlign {
    word-wrap: break-word;
    white-space: break-spaces;
    margin-right: 20px;
    margin-left: 10px;
    color: black;
 
}
    Login or Signup to reply.
  2. 0

    You need to override .collapse.show‘s display style from your library

    .collapse.show {
    display: block;
}

    to

    .collapse.show {
    display: flex !important;
}

    jsfiddle link

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search