I have successfully created a webpage using Drupal 8 and Bootstrap, featuring a "Learn more" button to expand the details.
However, I am facing an issue where the information blocks overflow when collapsed. The gray line and label are spilling into the upper block.
Could someone please advise on how I can resolve this? Thank you in advance.
Here is an image showing the overflow of the gray line and label:
https://i.sstatic.net/1Hssn.jpg
When the information is expanded, everything looks good:
https://i.sstatic.net/KfrV3.png
Below is the TWIG code:
<div class="card mb-5 p-0 overflow-hidden shadow rounded bg-white">
{{ drupal_view('boutique_professionnel_page_diaporama', 'block_1') }}
<div class="card-body pt-0">
<div id="readmorecollapse">
<div class="collapse" id="collapserm" aria-expanded="false">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 p-0 border-bottom">
<div class="mb-4">
<div class="mr-4 float-left rounded-lg overflow-hidden">
{{ store.field_professionnel_logo }}
</div>
<h1 class="mt-0">{{ store_entity.name.value }}</h1>
{{ store.field_professionnel_description }}
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 bs-left pl-0 mt-3">
<div class="mb-3">
{{ drupal_entity('user', store_entity.uid.target_id, 'store_default') }}
</div>
<div class="mb-3">
{{ store.field_professionnel_ets_id }}
</div>
<div class="mb-3">
<a class="text-decoration-none text-primary" href="mailto:{{ store_entity.mail.value }}">{{ store.mail }}</a>
</div>
<div class="mb-3">
<a class="text-decoration-none text-primary" href="tel:{{ store_entity.field_professionnel_telephone.value }}">{{ store.field_professionnel_telephone }}</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 bs-right pr-0 mt-3">
<div class="mb-3">
<a class="text-decoration-none text-primary" href="geo:{{ store_entity.field_localisation.value }}">{{ store.address }}</a>
</div>
<div class="mb-3">
{{ store.field_professionnel_accueil }}
</div>
<div class="mb-3">
{{ store.field_professionnel_horaires }}
</div>
</div>
</div>
<div class="readmorebutton">
<a role="button" class="collapsed btn btn-default btn-xs" data-toggle="collapse" href="#collapserm" aria-expanded="false" aria-controls="collapserm">
</a>
</div>
</div>
</div>
<div class="card-footer d-flex flex-wrap justify-content-start pt-0">
<div class="mt-3 mr-3">
{{ store.flag_report_store }}
</div>
<div class="mt-3 mr-3">
{{ store.flag_like_store }}
</div>
<div class="mt-3 mr-3">
{{ drupal_block('shariff_block') }}
</div>
</div>
</div>
And here is the CSS code:
#readmorecollapse div.collapse[aria-expanded="false"] {
height: 100px !important;
overflow: hidden;
visibility: visible;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#readmorecollapse div.collapsing[aria-expanded="false"] {
height: 42px !important;
}
#readmorecollapse .readmorebutton a {
width: 100%;
}
#readmorecollapse .readmorebutton .collapsed {
box-shadow: 0px -10px 25px 0px rgba(255, 255, 253, 0.8);
}
#readmorecollapse .readmorebutton a.collapsed:after {
content: 'Show all information';
}
#readmorecollapse .readmorebutton a:not(.collapsed):after {
content: 'Hide';
}