Aligning Materialize CSS collapsible horizontally?
Question
I am trying to change the default collapsible behavior in materialize css by aligning them horizontally. I have got partial success in it by using the below code :
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body > <br><br><br><br> <ul style="display: inline" class="collapsible"> <li style="display: inline"> <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li style="display: inline"> <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div> <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li style="display: inline"> <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul> <script> $(".collapsible").collapsible() </script> </body> </html>
But when I click the first collapsible-header, the other two collapsible headers drop below the collapsible-body of first collapsible.
When I click second collapsible-header then the first collapsible header is fixed(fine) but the third collapsible-header drops below the body of the second collapsible.
Clicking on the last collapsible header works fine (as expected).
Can someone give me a workaround for this?
Thanks in Advance, Nikhil
1 answers
solution1
1 ACCPTED 2018-12-23 07:42:22
You have to set position: absolute to collapsible-body but this is not a perfect way to do because as mentioned by @ic3b3rg, this component is not designed to work horizontally so instead of this you can use tabs or any other horizontal accordion.
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body > <br><br><br><br> <ul style="display: inline" class="collapsible"> <li style="display: inline"> <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li style="display: inline"> <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div> <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li style="display: inline"> <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul> <script> $(".collapsible").collapsible() </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.