Попытка ограничить динамически генерируемый список строк в аккордеоне, чтобы показать на карте фиксированной высоты с прокруткой - PullRequest
Новая
       22

Попытка ограничить динамически генерируемый список строк в аккордеоне, чтобы показать на карте фиксированной высоты с прокруткой

1 голос
/ 03 июня 2019

Итак, я построил приведенный ниже скрипт, чтобы взять массив, сгруппировать их по одному из полей, после чего генерируются заголовки аккордеона.Затем данные в массиве строятся в виде строк внутри аккордеона.

Я хотел бы, чтобы содержащаяся карта имела фиксированную высоту, чтобы при щелчке по любому аккордеону прокрутка данных находилась в пределахобласть карты ....

Начальная загрузка является стандартной для класса карты. 

        <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>

Надеюсь, что кто-то сможет помочь.

1 Ответ

1 голос
/ 03 июня 2019

Высота вашей карты установлена ​​на 80%. Вы используете относительные единицы , что означает, что карта будет составлять 80% от ее высоты родителя . Вы установили его на 80% от своего родителя, и я не уверен, что вы этого хотите.

Однако, чтобы включить прокрутку внутри карты, когда содержимое слишком велико, чтобы уместиться внутри карты, добавьте это свойство в свой атрибут стиля: 

overflow: scroll;
...