试图限制手风琴中动态生成的行列表以显示在带有滚动的固定高度的卡片中

Question

所以我构建了下面的脚本来获取一个数组，将它们按其中一个字段分组，然后生成手风琴标题。然后将数组中的数据构建为手风琴中的行。

我想要做的是让包含的卡片具有固定的高度，以便点击手风琴，然后让数据在卡片的区域内滚动....

Bootstrap是卡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>

希望有人能够提供帮助。

Answer 1

您的卡片高度设置为 80%。您正在使用 relative units，这意味着卡片将是其 parent 高度 的 80%。您已将其固定为 parent 的 80%，我不确定这是否是您想要的。

但是，要在内容太大无法放入卡片时在卡片中滚动，请在您的样式属性中添加此属性：

overflow: scroll;

试图限制手风琴中动态生成的行列表以显示在带有滚动的固定高度的卡片中

Trying to limit a dynamically generated list of rows within an accordion to show in a card of fixed height with scroll

height

scroll

bootstrap-accordion

bootstrap-4