поместите div рядом с таблицей и добавьте полосы прокрутки - PullRequest
Новая
       2

поместите div рядом с таблицей и добавьте полосы прокрутки

0 голосов
/ 12 февраля 2020

У меня есть таблица, а рядом с ней мне нужно разместить div, как показано на рисунке ниже. Я попытался сделать таблицу с плавающей точкой слева и дать ширину: 75%, а sidediv float-right и ширину: 25%. это работало, но это не отзывчиво. Мне нужно, чтобы это было отзывчивым. поэтому я попытался использовать сетку bootstrap, но у меня не получилось, и мне также нужно добавить полосы прокрутки в таблицу и разделить стороны.

ссылка stackblitz 

.test{
    overflow-y: auto !important; 
    height: 100% !important;
}
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
  <div class="ml-auto">
    <input
      class="form-control"
      name="search"
      [(ngModel)]="search"
      type="search"
      placeholder="Search"
    />
  </div>
</nav>
<br /><br />
<section>
  <div class="w-75 float-left overflow-auto test">
    <table class="table table-hover">
      <tr>
        <th>Date</th>
        <th>List Name</th>
        <th>No. of Entities</th>
    
      </tr>
      <tbody>
        <tr *ngFor="let items of data | filter: search">
          <td>{{ items.date }}</td>
          <td>{{ items.name }}</td>
          <td>{{ items.entities }}</td>
          <td>
            <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
          </td>

          
        </tr>
      </tbody>
    </table>
  </div>
</section>
<br />
<aside>
  <div class="w-20 float-right overflow-auto test">
    <div class="alert alert-dark">+Add Description</div>
    <p>{{s}}</p>
  </div>
</aside>

image

Ответы [ 3 ]

3 голосов
/ 12 февраля 2020

Вот мое решение, я использовал bootstrap, чтобы сделать его отзывчивым.

Я обернул ваш раздел классом .container-fluid, а затем обернул внутренние компоненты классами .row и col-*. Откройте пример в полноэкранном режиме.

Чтобы сделать его 100% высоты, я использовал height: calc(100vh - 54px);

100vh означает, что он принимает высоту вашего окна просмотра.

Вычитание 54px равно сделано, чтобы избежать прокрутки всей страницы 

.test {
  overflow-y: auto !important;
  height: calc(100vh - 54px);
  /*54px is height of navbar*/
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
  <div class="ml-auto">
    <input class="form-control" name="search" [(ngModel)]="search" type="search" placeholder="Search" />
  </div>
</nav>
<br/><br/>
<div class="container-fluid">
  <section class="row">
    <div class="col-md-8 col-12 overflow-auto test">
      <table class="table table-hover">
        <tr>
          <th>Date</th>
          <th>List Name</th>
          <th>No. of Entities</th>

        </tr>
        <tbody>
          <tr *ngFor="let items of data | filter: search">
            <td>{{ items.date }}</td>
            <td>{{ items.name }}</td>
            <td>{{ items.entities }}</td>
            <td>
              <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
            </td>
          </tr>
          <tr *ngFor="let items of data | filter: search">
            <td>{{ items.date }}</td>
            <td>{{ items.name }}</td>
            <td>{{ items.entities }}</td>
            <td>
              <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
            </td>
          </tr>
          <tr *ngFor="let items of data | filter: search">
            <td>{{ items.date }}</td>
            <td>{{ items.name }}</td>
            <td>{{ items.entities }}</td>
            <td>
              <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
            </td>
          </tr>
          <tr *ngFor="let items of data | filter: search">
            <td>{{ items.date }}</td>
            <td>{{ items.name }}</td>
            <td>{{ items.entities }}</td>
            <td>
              <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
            </td>
          </tr>
          <tr *ngFor="let items of data | filter: search">
            <td>{{ items.date }}</td>
            <td>{{ items.name }}</td>
            <td>{{ items.entities }}</td>
            <td>
              <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
            </td>
          </tr>
          <tr *ngFor="let items of data | filter: search">
            <td>{{ items.date }}</td>
            <td>{{ items.name }}</td>
            <td>{{ items.entities }}</td>
            <td>
              <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
            </td>
          </tr>
          <tr *ngFor="let items of data | filter: search">
            <td>{{ items.date }}</td>
            <td>{{ items.name }}</td>
            <td>{{ items.entities }}</td>
            <td>
              <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
            </td>
          </tr>
          <tr *ngFor="let items of data | filter: search">
            <td>{{ items.date }}</td>
            <td>{{ items.name }}</td>
            <td>{{ items.entities }}</td>
            <td>
              <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
            </td>
          </tr>
          <tr *ngFor="let items of data | filter: search">
            <td>{{ items.date }}</td>
            <td>{{ items.name }}</td>
            <td>{{ items.entities }}</td>
            <td>
              <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                Details
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md-4 col-12 overflow-auto test">
      <div class="alert alert-dark">+Add Description</div>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
      <p>{{s}}</p>
    </div>
  </section>
</div>
1 голос
/ 12 февраля 2020

Если вы используете bootstrap, это не может быть проще. Он разработан, чтобы сделать адаптивные макеты тривиальными.

Если вы хотите поместить один div рядом с другим на больших экранах и поверх друг друга, используйте классы col- {size} - {n} CSS внутри структура .container> .row, где размер равен одному из xs, sm, md, lg, xl и 1> = n <= 12. </p>

Вот ваш пример использования col-md-8 и col -md-4. Использование -md- точки останова означает, что при размерах экрана> = 768px элементы div будут располагаться рядом друг с другом и накладываться друг на друга <768px. </p>

https://jsfiddle.net/d5nxwbLj/1/

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- your table here -->
    </div>
    <div>
      <!-- your aside here -->
    </div>
  </div>
</div>

Bootstrap может гораздо лучше объяснить все возможности: https://getbootstrap.com/docs/4.3/layout/grid/

0 голосов
/ 12 февраля 2020

Вместо использования w-75 используйте Bootstrap Grid System Для этого сверните весь код в .container > .row > .col-*-* Надеюсь, это поможет вам 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <table class="table table-hover">
          <tr>
            <th>Date</th>
            <th>List Name</th>
            <th>No. of Entities</th>

          </tr>
          <tbody>
            <tr *ngFor="let items of data | filter: search">
              <td>{{ items.date }}</td>
              <td>{{ items.name }}</td>
              <td>{{ items.entities }}</td>
              <td>
                <button type="button" class="btn btn-outline-secondary" (click)="getdetails(items)">
                  Details
                </button>
              </td>


            </tr>
          </tbody> 
        </table>
      </div>
      <div class="col-md-4">
        <div class="alert alert-dark">+Add Description</div>
        <p>{{s}}</p> 
      </div>
    </div>
  </div>
</section>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...