Impossible to set layout width in %

Ouverte
#203 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

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

Piste de recherche

Commencez au point d’entrée et reproduisez le premier rendu dans une sidenav avec width: 100% et une hauteur fixe. Suivez pourquoi la mise en page initiale utilise 700px alors que le redimensionnement ou le déplacement de l’axe la corrige ; le travail est terminé lorsque la largeur en pourcentage est respectée dès le premier rendu, sans le contournement displayGraph.

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

Description

Hello,

In my case i updated angular and figured that witdh of my <plotly-plot> is now fixed to 700px.
My graph is displayed in a sidenav, and the 700px is higher than the sidenav width.

Also this is not working in html :
<plotly-plot [style]="{ width: '100%', height: '220px' }" ...></plotly-plot>

The height is correctly set but width:100% is totaly ignored as it's not valid value in px and the default value 700px stay.

Another thing is that after a window resize or a graph axis moove all is correctly set again and graph fit to the container.
So it is just about the first render forcing to 700px;

I used a temporary trick to make the graph fit properly.

  • An event is triggered when the sidenav is opened, this event sets a boolean "displayGraph" to true.
  • This boolean is then used to display the graph via a *ngIf="displayGraph"

Best regards,
CUETO Vincent

Langage dominant
TypeScript
Étoiles
242
Forks
81
Merge moyen
23 h 52 min
PR mergées (30 j)
5

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de plotly/angular-plotly.js

Toutes les issues de plotly/angular-plotly.js

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

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