web-dev-qa-db-fra.com

Angular 2 Matériau Défilement horizontal Tableau de données Problème de bordure

J'utilise Angular le tableau de données sur les matériaux dans mon application. Je dois afficher plusieurs colonnes avec une table de défilement horizontale. Je suis confronté à un problème avec la bordure de la rangée de la table. Il n'affiche pas toute la largeur de la ligne. Veuillez vérifier l'image ci-jointe pour votre référence. S'il vous plaît aidez-moi à résoudre ce problème.

S'il vous plaît vérifier le lien pour la référence de code

https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html

 enter image description here

Merci d'avance.

angular-materialangular5angular-material2
3
Hariharan Subramanian

La ligne d'en-tête et la ligne de colonne affichent flex par défaut.

.mat-header-row, .mat-row {
    display: inline-flex;
}
1
vittaljk

Utiliser la grille d'affichage en cas d'écrans d'ipad et d'appareil mobile

mat-table {
   display: -ms-grid ;
   display: grid;
}
1
Aditya Tomar

Vous avez des propriétés de style qui fonctionnent les unes contre les autres. Vous avez défini min-width: 150px; pour chaque colonne et vous avez 13 colonnes qui totalisent 1950px. De plus, vous avez défini width: 1123px; sur chaque ligne, ce qui est (évidemment) inférieur à 1950px. En outre, vous définissez max-width: 1123px; - même largeur que vos lignes - sur le tableau lui-même, mais le tableau doit être plus large que la ligne pour afficher la barre de défilement. Si vous corrigez ces problèmes, la bordure s'affichera correctement. Essayez de définir uniquement la largeur de vos lignes en omettant les paramètres de largeur des tableaux et des colonnes.

0
G. Tranter

Les gars, cela vous aidera à résoudre ces problèmes

Vous devez commencer à utiliser:

largeur: max-contenu;

.mat-row,
.mat-header-row {
  min-width: 1123px;
  width: 100%;
  width: max-content;
}

.mat-table {
  overflow: scroll;
  max-height: 500px;
}

.mat-cell,
.mat-header-cell {
  min-width: 90px;
}
/*unnecessary to make table header fixed*/
.mat-header-row {
  top: 0;
  position: sticky;
  z-index: 1;
  background-color: inherit;
  text-align: center;
}

trouver un support pour les navigateurs: https://caniuse.com/#search=fit-content

0
Hasan Daghash

Cela pourrait aider quelqu'un d'autre car il s'agit d'un ancien post. Veuillez vous référer à https://stackblitz.com/edit/angular-mdxik6-gnpzuh?embed=1&file=app/table-basic-example.css

Ajoutez simplement ce qui suit à votre-comp-composant.css ou à votre-comp-composant.scss

.mat-row, .mat-header-row {
min-width: 2800px;
width: 100%;
}
0
Saqib Raja

Meilleure résolution, j'ai surmonté ce problème.

  1. Tenir la colonne de données dynamique avec css

    columns = [
        {columnDef: 'select', width: 75},
        ...........
]

  2. Recalculer la largeur minimale css si vous implémentez une fonction afficher/masquer

    recalculateCss() {
    let cellWidth = 0;
    for (let i = 0; i < this.selected.length; i++) {
        const cell = this.selected[i];
        const column = this.columns.filter((value, index) => value.columnDef === cell);
        cellWidth += column[0] ? column[0].width : 0;
    }
    this.minWidth = cellWidth;
}

  3. Ajouter des css à la fois dans mat-header-row et mat-row

    [style.min-width.px]="minWidth"
0
Thapld

Vous devez définir ce qui est attendu de la table dans mat-table {min-width} ainsi que les rembourrages gauche et droit de la ligne-mat (24px chacun).

Dans votre cas d'exemple:

.mat-table {
  min-width: calc((13 * 150px) + 48px);
}

ou

.mat-table {
  min-width: 1998px;
}

J'espère que cela t'aides!!!

0
Carlos Cuesta

Material utilise une mise en page flexible de sorte que vous puissiez ajouter align-self: stretch; aux colonnes CSS. Cela devrait permettre d’étirer les éléments à taille automatique pour les adapter à la table.

Modifier

Stackblitz

Enlever votre en-tête et votre élément de largeur de cellule peut vous aider. Vous souhaitez définir une largeur de 100% pour vos lignes, puis définir le minimum souhaité.

.mat-row, .mat-header-row { min-width: 1123px; width:100%; }

0
jnathn