I have a plot that updates the layout (padding, annotations, font size, etc) across some window size breakpoints. I’m now adding updatemenu buttons with the “update” method to change which data are visible and layout parameters (axes range, title, etc). This works great unless I switch to the non-default button (changing the layout) and resize the screen across a breakpoint. A relayout is triggered, and all layout parameters are switched back to their initial values.
I can add in some IF statements to check the y-axis title and set all the layout parameters to the appropriate value. But is there a better/more elegant way to do this? Maybe access the layout parameters in the updatemenu buttons? I’m not sure how to make that work.
CodePen link: https://codepen.io/gschivley/pen/dvQoPg
I solved most of the issue by learning a bit more javascript. My three frames are now in an array, and two different functions each assign the necessary layout values.
My remaining issue is that the active button changes when I go across a breakpoint. I’ve tried setting the ‘active’ parameter of the graph object, the frames, or the update_menu objects, both in the layout_functions and directly. Nothing seems to work. When I resize across a breakpoint the button flips to the original value.
CodePen has been updated, some example code is below.
'var y_label = my_Div_ai.layout.yaxis.title
if (y_label.indexOf(“kg”) >=0) {
frames_ai.forEach(si_layout_function);
update_menu.active = -1;
update_menu_small.active = -1;
} else {
frames_ai.forEach(imperial_layout_function);
update_menu.active = 0;
update_menu_small.active = 0;
}`
There must have been a conflict with trying to have 2 different update_menu objects (one for mobile screens with small borderwidth). I just need to figure out an appropriate design/layout across all screen sizes.