Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Impossible to set layout width in % #203

Open
pitchan opened this issue Jul 20, 2022 · 1 comment
Open

Impossible to set layout width in % #203

pitchan opened this issue Jul 20, 2022 · 1 comment

Comments

@pitchan
Copy link

pitchan commented Jul 20, 2022

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

@pitchan pitchan changed the title Impossible to set layout with in % Impossible to set layout width in % Jul 21, 2022
@mohitchauhan4u
Copy link

mohitchauhan4u commented Oct 1, 2022

As per me, it is not possible, but you can do this by using window object just simply write
width = window.innerWidth*((how much percentage width you want to give it )/100);
But you have to give % relative to the screen size, not as per parent div of plotly component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants