Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Accordion with a photo in the background doesn\'t produce what\'s shown.

joshusre pro asked 7 years ago


According with a photo doesn't look like what's shown when you use the given html / css example.  Please provide the source the produces the example.
<style>.accordion.accordion-5 .card { border: 0; background-color: transparent; } .accordion.accordion-5 .card .card-header { border: 0; background-color: #f44336; -webkit-transition: .3s; transition: .3s; } .accordion.accordion-5 .card .card-header:hover { -webkit-transition: .3s; transition: .3s; background-color: #455a64; } .accordion.accordion-5 .card .card-header .fa { background-color: #fff; border-top-left-radius: 3px; } .accordion.accordion-5 .card .card-body { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } </style><body><!-- Card --><!-- Card --><div class="accordion accordion-5" id="accordionEx5" role="tablist" aria-multiselectable="true"> <!-- Accordion card --> <div class="card mb-4"> <!-- Card header --> <div class="card-header p-0 z-depth-1" role="tab" id="heading30"> <a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse30" aria-expanded="false" aria-controls="collapse30" class="collapsed"> <i class="fa fa-cloud fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i> <h4 class="font-up white-text mb-0 py-3 mt-1"> Item #1 </h4> </a> </div> <!-- Card body --> <div id="collapse30" class="collapse" role="tabpanel" aria-labelledby="heading30" style=""> <div class="card-body rgba-black-light white-text z-depth-1"> <p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div> <!-- Accordion card --> <!-- Accordion card --> <div class="card mb-4"> <!-- Card header --> <div class="card-header p-0 z-depth-1" role="tab" id="heading31"> <a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse31" aria-expanded="false" aria-controls="collapse31" class="collapsed"> <i class="fa fa-commenting-o fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i> <h4 class="font-up white-text mb-0 py-3 mt-1"> Item #2 </h4> </a> </div> <!-- Card body --> <div id="collapse31" class="collapse" role="tabpanel" aria-labelledby="heading31" style=""> <div class="card-body rgba-black-light white-text z-depth-1"> <p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div> <!-- Accordion card --> <!-- Accordion card --> <div class="card mb-4"> <!-- Card header --> <div class="card-header p-0 z-depth-1" role="tab" id="heading32"> <a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse32" aria-expanded="false" aria-controls="collapse32" class="collapsed"> <i class="fa fa-cogs fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i> <h4 class="font-up white-text mb-0 py-3 mt-1"> Item #3 </h4> </a> </div> <!-- Card body --> <div id="collapse32" class="collapse" role="tabpanel" aria-labelledby="heading32"> <div class="card-body rgba-black-light white-text z-depth-1"> <p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div> <!-- Accordion card --></div><!-- Card -->

Marta Wierzbicka staff answered 6 years ago


Dear joshusre,

could you explain what exactly is wrong with the classic tabs? When I pasted a code of these tabs from our documentation to my MDB package version 4.4.5 (the newest), everything works fine and I can't reproduce the problem. I'd like to help you, so, please, describe your problem in details and tell me what version of MDB you have.

Best,

Marta


joshusre pro answered 6 years ago


Even the copy buttons in the examples don't work.  I sincerely regret purchasing this library.  It was my worst decision of 2017

joshusre pro answered 6 years ago


Here's a similar problem: https://mdbootstrap.com/components/tabs/ Classic tabs ALSO doesn't work as advertised.   Can I have the working code for that now.  

joshusre pro answered 6 years ago


Here's a similar problem: https://mdbootstrap.com/components/tabs/ Classic tabs ALSO doesn't work as advertised.   Can I have the working code for that now.  

Marta Wierzbicka staff answered 6 years ago


Hi, I'm sorry if there are bugs in our accordion documentation but we are during updating our whole documentation and it should be fixed soon. Now, please try this HTML code: <!-- Card --> <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);"> <!-- Content --> <div class="rgba-black-strong py-5 px-4"> <div class="row d-flex justify-content-center "> <div class="col-md-10 col-xl-8"> <!--Accordion wrapper--> <div class="accordion accordion-5" id="accordionEx5" role="tablist"> <!-- Accordion card --> <div class="card mb-4"> <!-- Card header --> <div class="card-header p-0 z-depth-1" role="tab" id="heading30"> <a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse30" aria-expanded="true" aria-controls="collapse30"> <i class="fa fa-cloud fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i> <h4 class="font-up white-text mb-0 py-3 mt-1"> Item #1 </h4> </a> </div> <!-- Card body --> <div id="collapse30" class="collapse show" role="tabpanel" aria-labelledby="heading30" data-parent="#accordionEx5"> <div class="card-body rgba-black-light white-text z-depth-1"> <p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div> <!-- Accordion card --> <!-- Accordion card --> <div class="card mb-4"> <!-- Card header --> <div class="card-header p-0 z-depth-1" role="tab" id="heading31"> <a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse31" aria-expanded="true" aria-controls="collapse31"> <i class="fa fa-commenting-o fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i> <h4 class="font-up white-text mb-0 py-3 mt-1"> Item #2 </h4> </a> </div> <!-- Card body --> <div id="collapse31" class="collapse" role="tabpanel" aria-labelledby="heading31" data-parent="#accordionEx5"> <div class="card-body rgba-black-light white-text z-depth-1"> <p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div> <!-- Accordion card --> <!-- Accordion card --> <div class="card mb-4"> <!-- Card header --> <div class="card-header p-0 z-depth-1" role="tab" id="heading32"> <a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse32" aria-expanded="true" aria-controls="collapse32"> <i class="fa fa-cogs fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i> <h4 class="font-up white-text mb-0 py-3 mt-1"> Item #3 </h4> </a> </div> <!-- Card body --> <div id="collapse32" class="collapse" role="tabpanel" aria-labelledby="heading32" data-parent="#accordionEx5"> <div class="card-body rgba-black-light white-text z-depth-1"> <p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div> <!-- Accordion card --> </div> <!--/.Accordion wrapper--> </div> </div> </div> <!-- Content --> </div> <!-- Card --> Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags