трудности по изготовлению панели прокручивать

У меня есть этоттрудности по изготовлению панели прокручивать

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

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

.panel-primary { 
 
    border-color: #b3b3b3; 
 
} 
 
.panel__add-pos { 
 
    height: 400px; 
 
    position: relative; 
 
} 
 
.panel-heading { 
 
    display: flex; 
 
    padding: 5px 15px; 
 
} 
 
.panel-body { 
 
    overflow-x: hidden; 
 
    max-height: none; 
 
    overflow-y: scroll; 
 
} 
 
.panel-title { 
 
    font-size: 14px; 
 
} 
 
.department-actions { 
 
    width: 70px; 
 
    height: 14px; 
 
} 
 
.department-actions a { 
 
    color: #d2d2d2; 
 
} 
 
.department-actions a:hover { 
 
    color: #000000; 
 
} 
 
.panel__add-dept form { 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-bottom: 10px; 
 
    width: 97%; 
 
} 
 
.panel__input-container { 
 
    border: 0; 
 
    border-bottom: 1px solid #cccccc; 
 
    border-radius: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    padding: 0; 
 
    padding-left: 10px; 
 
} 
 
.panel__input-container:focus { 
 
    border-color: none; 
 
    outline: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none); 
 
} 
 
[class*="btn"] { 
 
    border-radius: 0; 
 
} 
 
[class*="col-"] { 
 
    padding: 0 5px; 
 
}

<div class="panel panel-primary panel__add-dept"> 
 
    <div class="panel-heading"> 
 
    <span class="panel-title">LIST OF DEPARTMENT</span> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <table class="table table-striped"> 
 
     <thead> 
 
     <tr> 
 
      <th>Department Name</th> 
 
      <th>&nbsp;</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Accounting Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="1" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="1"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="1" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <form action="http://localhost/" id="list-dept-form" data-panel_name="Department" method="post" accept-charset="utf-8"> 
 
     <div class="form-group add-department"> 
 
     <input class="form-control panel__input-container" id="new_department" type="text" name="new_department" placeholder="Add new department" value=""> 
 
     </div> 
 
     <div class="form-group"> 
 
     <button type="button" class="btn btn-default button--dark pull-right" id="add-department" name="submit_dept">Add</button> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

источник

2017-02-01 Fil

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

.panel-primary { 
 
    border-color: #b3b3b3; 
 
} 
 
.panel__add-pos { 
 
    height: 400px; 
 
    position: relative; 
 
} 
 
.panel-heading { 
 
    display: flex; 
 
    padding: 5px 15px; 
 
} 
 
.panel-body { 
 
    overflow-x: hidden; 
 
    max-height: none; 
 
    overflow-y: scroll; 
 
    height: 100px; /* --- like this --- */ 
 
} 
 
.panel-title { 
 
    font-size: 14px; 
 
} 
 
.department-actions { 
 
    width: 70px; 
 
    height: 14px; 
 
} 
 
.department-actions a { 
 
    color: #d2d2d2; 
 
} 
 
.department-actions a:hover { 
 
    color: #000000; 
 
} 
 
.panel__add-dept form { 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-bottom: 10px; 
 
    width: 97%; 
 
} 
 
.panel__input-container { 
 
    border: 0; 
 
    border-bottom: 1px solid #cccccc; 
 
    border-radius: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    padding: 0; 
 
    padding-left: 10px; 
 
} 
 
.panel__input-container:focus { 
 
    border-color: none; 
 
    outline: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none); 
 
} 
 
[class*="btn"] { 
 
    border-radius: 0; 
 
} 
 
[class*="col-"] { 
 
    padding: 0 5px; 
 
}

<div class="panel panel-primary panel__add-dept"> 
 
    <div class="panel-heading"> 
 
    <span class="panel-title">LIST OF DEPARTMENT</span> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <table class="table table-striped"> 
 
     <thead> 
 
     <tr> 
 
      <th>Department Name</th> 
 
      <th>&nbsp;</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Accounting Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="1" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="1"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="1" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Sales Department</td> 
 
      <td> 
 
      <div class="department-actions pull-right"> 
 
       <a href="http://localhost/" data-id="2" class="click-open"> 
 
       <i class="fa fa-chevron-right pull-right"></i> 
 
       </a> 
 
       <a href="#" data-id="2"> 
 
       <i class="fa fa-close pull-right"></i> 
 
       </a> 
 
       <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits"> 
 
       <i class="fa fa-pencil pull-right"></i> 
 
       </a> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <form action="http://localhost/" id="list-dept-form" data-panel_name="Department" method="post" accept-charset="utf-8"> 
 
     <div class="form-group add-department"> 
 
     <input class="form-control panel__input-container" id="new_department" type="text" name="new_department" placeholder="Add new department" value=""> 
 
     </div> 
 
     <div class="form-group"> 
 
     <button type="button" class="btn btn-default button--dark pull-right" id="add-department" name="submit_dept">Add</button> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

источник

2017-02-01 15:49:01

.panel__add-pos { 
    height: auto; 
    position: relative; 
} 

.panel-body { 
    max-height: 400px; 
    overflow-x: hidden; 
    max-height: none; 
    overflow-y: scroll 
}

Попробуйте, что CSS для кода

источник

2017-02-01 15:51:48 grinmax

Вы можете попробовать это:

.panel { 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y: scroll; 
}

и удалить стили у вас на .panel-body

источник

2017-02-01 15:51:59 Nora

трудности по изготовлению панели прокручивать

ответ

Смежные вопросы