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

Posted 2023-03-06

【中文标题】试图限制手风琴内动态生成的行列表以滚动显示在固定高度的卡片中

【英文标题】：Trying to limit a dynamically generated list of rows within an accordion to show in a card of fixed height with scroll

【发布时间】：2019-10-18 19:52:23

【问题描述】：

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

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

Bootstrap 是卡片类的标准。

        <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"  style="width:20px;height:20px;border:0;"></a>
                                               </div> 
                                            </div>
                                            <?php  ?>

                                        </div>
                                    </div>
                                </div>
                    <?php ?>
                </div>

希望有人能够提供帮助。

【参考方案1】：

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

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

overflow: scroll;

【讨论】：

jeez...那么简单...将其添加到最顶部的card 及其工作。现在尝试让它在移动设备上更容易使用，因为生成的div 元素不是“可拖动”的，因此滚动card 的唯一方法是在全球范围内保留一些空白区域图片。

没问题！如果答案对您有帮助，请考虑对其进行投票。我不太确定您对全球空白区域的含义。 IMO，我建议将您的样式存储在外部 css 文件中（更易于管理）并使用 device mode in chrome dev tools 模拟移动设备。它应该可以通过滑动来滚动。

这是因为我在元素上使用了“禁用”模式，我猜从技术上讲，这会使它们“不可点击”，因此拖动/滑动只适用于全球的空白区域img......现在排序，因为我已经转移到一个看起来不错并且可以工作的表格格式......也投票了;-)