Impossible to set layout width in %

Aberta
#203 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
angular, typescript
Domínio
frontend, web-dev

Direção de pesquisa

Comece no ponto de entrada e reproduza a primeira renderização dentro de uma sidenav com width: 100% e uma altura fixa. Rastreie por que o layout inicial usa 700px enquanto o redimensionamento ou o movimento do eixo o corrige; está concluído quando a largura percentual é respeitada na primeira renderização sem o workaround displayGraph.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
TypeScript
Estrelas
242
Forks
81
Merge médio
8h 48min
PRs com merge (30d)
18

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de plotly/angular-plotly.js

Todas as issues de plotly/angular-plotly.js

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.