Bootstrap 4 аффикс альтернативная позиция: липкая не работает на картах - PullRequest
Новая
       9

Bootstrap 4 аффикс альтернативная позиция: липкая не работает на картах

1 голос
/ 28 февраля 2020

У меня есть веб-страница для проекта весенней загрузки на основе тимелина, состоящего из разных карт. Вот мой код. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container-fluid">
  <h2>Cards Columns</h2>
  <div class="body-content" id="mainBody">
  
  <div class="row">
                <div class="col-sm-3 mb-3 mb-md-0 fixed-bottom sticky-top" style="padding-left: 50px;padding-right: 20px;padding-top: 10px;padding-bottom: 50px;">
                    <div>
        <!--calendar sample begins -->

            <div class="card ">
                <div class="card-header">
                    <div class="card-title">Welcome</div>
                </div>
                <div class="card-body">
                    <div th:with="todayDate=${#dates.createNow()}">
                        <div>Today's date is: <span th:text="${#dates.format(todayDate, 'MMMMM dd,yyyy')}"></span></div><br>
                        <div>Need help? Call 888.790.2246 or email <a th:href="'mailto: support@clris.com'">support@clris.com</a>.</div><br>
                        <div>Join us for an upcoming e-submission training webinar!</div>
                        <div>Click here to <a th:href="'https://iowalandrecords.ticketbud.com/fall2019webinars'">register</a>!</div>
                    </div>
                </div>
            </div>

        <!--calendar sample ends -->

        <div id="summary" style=" overflow: auto;">
            <div class="card position-sticky">
                <div class="card-header">
                    <div class="card-title">Document Summary</div>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-hover ">
                        <tbody>
                        <tr>
                            <td class="col-xs-3">Group Name</td>
                            <td id="groupName" class="card-text" style="word-wrap:break-word"></td>
                        </tr>
                        <tr>
                            <td class="col-xs-3">Document Type</td>
                            <td id="docType"></td>
                        </tr>
                        <tr>
                            <td class="col-xs-3">Document Number</td>
                            <td id="docNumber"></td>
                        </tr>
                        <tr>
                            <td class="col-xs-3">Submission Date/Time</td>
                            <td id="subDate"></td>
                        </tr>
                        <tr>
                            <td class="col-xs-3">Status</td>
                            <td id="status"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
                </div>
                <div class="col-sm-9" style="padding-left: 20px;padding-right: 100px;padding-top:10px;padding-bottom: 50px;">
                    <div class="row">
                        <div id="groupsListPanel" >
                            <div id="pendingGroupsListPanel" class="card">
        <!--
            Panel title to be shown here.
            Shall have +/- icons so that the panel is expandable/collapsible correspondingly.
            TODO: Non Priority: Currently, when the panel is collapsed, it will loose the custom panel height and when expanded it will default the panel height to show 5 rows max. Is current behavior ok or should it keep the custom panel height??? When the panel is resized and the collapse/expand icon is clicked, it is opening the panel to the full height and then resizing back to default height. Confirm if this behavior needs fixing!!!
        -->
        <div class="card-header">
            <div class="card-title">
                <span data-toggle="collapse" data-target="#pendingGroupsListBody" class="fa fa-minus"></span>
                Pending Groups
            </div>
        </div>

        <div class="marginBottom0">
            <div class="alert alert-success col-sm-12" id="submitGroupSuccess" style="display: none">Group has been submitted successfully.</div>
            <div class="alert alert-danger" id="submitGroupFailure" style="display: none">Oh snap!Change a few things up and try submitting again.</div>
        </div>

        <!--
            Table heading is included in a separate div and table to that of its body to make the Table header fixed while the table body is being scrolled. Otherwise, if we keep it together inside the same div and table, the table header scrolls along with the table body because of the  resizable and scrollable property of the panel body.
        -->
        <div class="paddingSides15 marginBottom0">
        <table class="table marginBottom0">
            <thead>
            <tr>
                <th style="padding-left: 15px;">GroupName</th>
                <th style="padding-left: 30px;">Submission Date/Time</th>
                <th>Organization</th>
                <th>Submitted By</th>
                <th>Group Action</th>
            </tr>
            </thead>
        </table>
    </div>
        <!--
            Table body shall be scrollable. Max 5 rows to be shown by default if there are 5 or more rows of data.
            Need more work here in future.
            TODO: Non Priority: If there are less than 5 rows, do we want to shrink the panel or keep it fixed with blank spaces???
        -->
        <div id="pendingGroupsListBody" class="card-body panel-collapse card-body-resizable card-body-fixed-height paddingTop0">
            <table id="pendingGroupListTable" class="table table-striped table-hover">
                <tbody>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                </tbody>
                <input type="hidden" id="groupObjectId"/>
            </table>
        </div>
        
        <div id="pendingGroupsListBody" class="card-body panel-collapse card-body-resizable card-body-fixed-height paddingTop0">
            <table id="pendingGroupListTable" class="table table-striped table-hover">
                <tbody>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>4875</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">ABC Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                </tbody>
                <input type="hidden" id="groupObjectId"/>
            </table>
        </div>
    
        <div id="pendingGroupsListBody" class="card-body panel-collapse card-body-resizable card-body-fixed-height paddingTop0">
            <table id="pendingGroupListTable" class="table table-striped table-hover">
                <tbody>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>4875</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">ABC Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2" style="word-wrap:break-word"></span>48754_0</td>
                        <td class="col-xs-2">08/14/2009 01:29PM</td>
                        <td class="col-xs-3">Ingeo Systems Inc.</td>
                        <td class="col-xs-3"></td>
                        <td class="col-xs-2">Submit Group</td>
                    </tr>
                </tbody>
                <input type="hidden" id="groupObjectId"/>
            </table>
        </div>
    </div>
                        </div>
                    </div>
                </div>
            </div>
  
  </div>
  </div>
</div>

</body>
</html>

Я хочу переместить карточку «Сводка документа», если мы прокручиваем экран, чтобы всегда видеть значения в нем.

Я попытался добавить класс sticky-top, sticky-bottom.

Также изменил css, как показано ниже, и использовал это: 

   .make-me-sticky {
      position: sticky;
      top: 0;
     }

Ранее у меня был аффикс и он работал нормально, но с тех пор, как я обновился до Bootstrap 4, я не смог заставить его работать. Похоже, он не работает с картой, или я что-то упустил.

Я бы хотел добиться этого через css, а не javascript.

1 Ответ

0 голосов
/ 03 марта 2020

Я также смог исправить перекрытие, используя div с классом col .. 

     <div class="row">
     <div class="col">
     <div class="col-sm-3 col-lg-3  mb-3 mb-md-0 fixed-top sticky-top pt-5" 
     style="position: fixed;">Rest of code here</div>
     <div class="col-sm-9 col-lg-9 " style="margin-left: 330px;padding- 
     top:10px;padding-bottom: 50px;">Rest of code here</div>
     </div></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...