plotly / plotly/angular-plotly.js

Impossible to set layout width in %

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

Personne n'a encore pris cette issue.

Langage dominant
TypeScript
Étoiles
242
Forks
81
Merge moyen
8 h 48 min
PR mergées (30 j)
18

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

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

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.

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.

Évaluation

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

Recevez les nouvelles issues par e-mail

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