0
votes

placez un div à côté d'une table et ajoutez des barres de défilement

J'ai une table et à côté de cette table, je dois placer un div comme indiqué dans l'image ci-dessous. J'ai essayé de faire un tableau flottant à gauche et en donnant la largeur: 75% et le côté flottant à droite et la largeur: 25%. cela a fonctionné mais ce n'est pas réactif. j'en ai besoin pour être réactif. j'ai donc essayé d'utiliser le système de grille bootstrap mais j'ai échoué et j'ai également besoin d'ajouter des barres de défilement à la table et au côté div.

le lien stackblitz

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

.test{
    overflow-y: auto !important; 
    height: 100% !important;
}

javascript angular html css bootstrap-4

5 commentaires

avec le mot responsive , vous voulez dire que le côté div doit se cacher sur les petits écrans? pouvez-vous également ajouter un stackblitz pour votre code jusqu'à présent.

pour les petits écrans, le sidediv devrait venir sous le tableau

pouvez-vous ajouter un stackblitz

oui je l'ajoute au stackblitz

Pourquoi n'utilisez-vous aucune colonne Bootstrap et classe de conteneur?

3 Réponses :

3
votes

Voici ma solution, j'ai utilisé le bootstrap pour le rendre réactif.

J'ai enveloppé votre section avec la classe .container-fluid , puis les composants internes avec .row code > et les classes col- * . Ouvrir l'exemple en plein écran.

Pour obtenir une hauteur de 100%, j'ai utilisé height: calc (100vh - 54px);

100vh signifie qu'il faut le hauteur de votre fenêtre.

La soustraction de 54px est effectuée pour éviter le défilement de la page entière

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

.test {
  overflow-y: auto !important;
  height: calc(100vh - 54px);
  /*54px is height of navbar*/
}

0 commentaires

1
votes

Si vous utilisez bootstrap, rien de plus simple. Il est conçu pour rendre les mises en page réactives triviales.

Si vous voulez placer un div à côté d'un autre sur des écrans plus grands et les uns sur les autres, utilisez les classes CSS col- {size} - {n} dans un .container>. structure de ligne, où size est l'un des xs, sm, md, lg, xl et 1> = n

Voici votre exemple utilisant col-md-8 et col-md-4 . L'utilisation du point d'arrêt -md- signifie que dans des tailles d'écran> = 768px, les divs seront côte à côte et empilés les uns sur les autres

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 peut aller loin meilleur travail pour expliquer toutes les possibilités: https://getbootstrap.com/docs/4.3/ layout / grid /

0 commentaires

0
votes

Au lieu d'utiliser w-75, utilisez Bootstrap Grid System Pour cela, enveloppez tout le code dans .container> .row> .col - * - * J'espère que cela vous aidera

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

0 commentaires