4
votes

Matériau angulaire Colonne collante plus d'une colonne

J'utilise actuellement angular ver 7 avec un cli angulaire et également un matériau angulaire la dernière version

Je vais droit au but en utilisant la table angulaire avec une position de colonne collante

<ng-container matColumnDef="name" sticky>
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

<ng-container matColumnDef="address" sticky>
      <th mat-header-cell *matHeaderCellDef> Address</th>
      <td mat-cell *matCellDef="let element"> {{element.address}} </td>
    </ng-container>

mais quand je le sers dans le navigateur, la colonne collante tout gâchis, il y a un peu d'espace entre eux alors quand je fais défiler vers la droite, l'animation semble tellement décalée

c'est la bonne façon d'utiliser 2 sticky?

angular7

0 commentaires

5 Réponses :

5
votes

Résolu mais d'une manière maladroite. Les colonnes de la table de matériaux Angular 7 nécessitent un positionnement en pourcentage de largeur pour être correctement alignées. Quoi qu'il en soit, j'ai fini par donner une largeur fixe aux colonnes qui sont collantes à partir du fichier .scss * par exemple. * dans votre cas

.mat-col-name 
{
  left: 0px;
  width: 100px 
}
.mat-col-address 
{
  left: 100px;
  width: 100px;
}

Notez que la gauche doit être positionnée exactement. Ceci, associé à une balise collante sur ces deux colonnes du modèle HTML, l'a fait fonctionner correctement pour moi.

1 commentaires

C'est une bonne solution, mais ne fonctionne pas pour les éléments . Au moins pour moi, je ne sais pas pourquoi.

-3
votes

Au lieu d'écrire simplement sticky , préférez écrire [sticky] = "true" aux deux positions, cela devrait probablement le faire. Reste le matériau angulaire s'ajustera automatiquement.

Code ci-dessous: -

<ng-container matColumnDef="name" [sticky]="true">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<ng-container matColumnDef="address" [sticky]="true">
  <th mat-header-cell *matHeaderCellDef> Address</th>
  <td mat-cell *matCellDef="let element"> {{element.address}} </td>
</ng-container>

2 commentaires

Cela ne change rien.

En termes de Angular, "sticky" et "[sticky] = 'true'" sont équivalents. Pas question que cela puisse résoudre le problème.

1
votes

Avait le même problème. Les colonnes persistantes s'effondrent et il y a un espacement étrange entre les colonnes causé par l'attribut sticky. Cela signifie que lorsque vous faites défiler le tableau, il y a un effet d'accordéon sur les tailles de colonnes collantes et le contenu de la colonne de défilement inférieure / non collante apparaît sous les colonnes supérieures / collantes.

Solution:

Définissez min-width et max-width sur chaque colonne collante pour avoir la même valeur - j'ai utilisé px.

1 commentaires

Cela a fonctionné pour les éléments td, mais pas pour le ... c'est très étrange ... y a-t-il un problème de github ouvert pour cela?

0
votes

Je contourne ce problème en remplaçant le css collant et en utilisant également sticky comme attribut. Cela fonctionne pour moi dans mon cas avec ses trois en-têtes collants

<ng-container matColumnDef="name" sticky class="mat-col-name">
  <th mat-header-cell *matHeaderCellDef class="mat-col-name"> Name </th>
  <td mat-cell *matCellDef="let element" class="mat-col-name"> {{element.name}} </td>
</ng-container>

<ng-container matColumnDef="address" sticky class="mat-col-address">
  <th mat-header-cell *matHeaderCellDef  class="mat-col-address"> Address</th>
  <td mat-cell *matCellDef="let element" class="mat-col-address"> {{element.address}} </td>
</ng-container>

css:
.mat-col-name {
  width: 100px;
  top: 56px;
  z-index: 101;
  left: 0px;
  position: sticky;
}
.mat-col-address {
  left: 100px !important;
  width: 100px;
  top: 56px;
  z-index: 101;
  position: sticky;
}

0 commentaires

0
votes

Lors de l'utilisation de sticky pour 3 colonnes, dans le tableau des matériaux angulaires. Je trouvais une vue déformée pour les colonnes collantes avec un espace blanc ajouté à l'intérieur, c'était à cause de la propriété CSS intégrée de l'attribut collant. Dans mon local, je n'ai pas donné de CSS de gauche ou de largeur dans le code, mais en cours de DOM, il prenait de l'espace supplémentaire à gauche.

J'ai donc résolu ce problème en utilisant le CSS ci-dessous en remplaçant le CSS de l'attribut sticky. p>

HTML:

.mat-col-levelDefault {
    left: 200px !important;
    width: 100px;
    top: 56px;
    z-index: 101;
    position: sticky;
}

CSS:

<ng-container matColumnDef="level" class="mat-col-levelDefault " sticky>
    <th mat-header-cell *matHeaderCellDef> Level </th>
    <td mat-cell *matCellDef="let element"> {{element.level}} </td>
</ng-container>

0 commentaires