angular / angular/components

CDK overlay auto calculate width when using ConnectedPositionStrategy

Ouverte
#10,393 13 commentaires 22 réactions 0 personnes assignées Voir sur GitHub
area: cdk/overlay feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### Bug, feature request, or proposal:
Feature

#### What is the expected behavior?
That i can somehow configure the popup overlay to change it width to be the same as the parent, without having to add a bunch of custom styling to my popup component.
![good](https://user-images.githubusercontent.com/1499810/37336174-de6f20a8-26b0-11e8-8924-a2df159cceaf.png)

#### What is the current behavior?
![bad](https://user-images.githubusercontent.com/1499810/37336151-cfbf6fb8-26b0-11e8-9fc4-88e4d6adff71.png)

#### What is the use-case or motivation for changing an existing behavior?
I would have to do less custom styling to get a nice dropdown

#### Is there anything else we should know?
In the screenshots we have changed the width using css, however this is suboptimal to having a responsive design, where the input can change their width all the time.
To get around the problem we have to hard-code the width of both the input and the popups, so they look to fit together.

My best suggestion would be able to do something like this:

```typescript
this.overlay.position()
.connectedTo(target, {
originY: 'bottom',
originX: 'start'
}, {
overlayY: 'top',
overlayX: 'start'
})
.immitateWidth();
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’API CDK overlay ConnectedPositionStrategy et reproduisez le cas de largeur responsive décrit dans l’issue. Le travail est terminé lorsqu’une popup connectée peut correspondre à la largeur de son parent au fur et à mesure que celui-ci change, sans style personnalisé sur le composant popup ; aucun fichier source ni test précis n’est indiqué dans le rapport.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.