So I have built the script below to take an array, group them by one of the fields, which then generates the accordion headings. The data within the array is then build as rows within the accordion.
What I would like to do is have the containing card be of fixed height, so that which ever accordion is clicked, then has the data scroll within the area of the card....
Bootstrap is standard for the card class.
<div class="card" style="height: 80%; width: 100%">
<div class="card-header">Service History for <?php echo $vesseldata['vesselTag']; echo $own;?></div>
<div id="accordion">
<?php $newArray=array();
foreach($history as $val){
$key=$val['component'];
$grouped[$key][]=$val;
}
foreach($grouped as $group){?>
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#<?php echo str_replace(' ', '',$group[0]['component']);?>">
<?php echo $group[0]['component']; ?>
</a>
</div>
<div id="<?php echo str_replace(' ', '',$group[0]['component']); ?>" class="collapse" data-parent="#accordion">
<div class="card w-100">
<?php foreach ($group as $occurance){?>
<div class="row no-gutters">
<div class="col-md-2 col-lg-2 d-flex">
<input type="text" class="form-control text-primary" disabled value="<?php echo $occurance['date'];?>">
</div>
<div class="col-md-2 col-lg-2">
<input type="text" class="form-control" disabled value="<?php echo $occurance['engineer'];?>">
</div>
<div class="col-md-4 col-lg-4">
<textarea class="form-control" rows="6" disabled ><?php echo $occurance['comment'];?></textarea>
</div>
<div class="col-md-3 col-lg-3">
<textarea class="form-control" rows="6" disabled ><?php echo $occurance['parts'];?></textarea>
</div>
<div class="col-md-1 col-lg-1 d-flex align-items-center justify-content-center">
<a href="#mapModal" role="button" data-toggle="modal" data-lat="<?php echo $occurance['lat'];?>" data-lng="<?php echo $occurance['longitude'];?>"><img src="small-globe.jpg" alt="Map" style="width:20px;height:20px;border:0;"></a>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<?php }?>
</div>
Hope someone is able to help.
Your card has its height set to 80%. You are using relative units which means the card will be 80% of it's parent's height. You have it fixed to be 80% of its parent and I'm not sure if that's what you want.
However, to enable scrolling within your card when content is too big to fit inside the card, add this property within your style attribute:
overflow: scroll;