Scout: Increasing the size of a case page with Chromograph images breaks the layout

[northwestwitch]

See for instance this example: https://scout-stage.scilifelab.se/cust002/F0026339-2

Suggestion: insert chromograph pics into a scrollable div

[northwestwitch]

this is what I see on Chrome, zoom 100% of the page:

[dnil]

Its ok in Safari, at least when the page is not made very narrow, but we did have issues with exactly the above some time back. Scrollable divs sound perfect!

[dnil]

The core thing for both this and the #2451 is the fixed collapsible size div/nav that goes with the relative size columns in the grid. Any other size limitations beyond the navbar really messes causes the column wrap when the viewport is small enough. Try eg resizing your browser window when you have a Madeline svg on there. Same story, only less apparent due to smaller picture.

I've toyed a bit with different layouts for the sidebar; flex is slightly better, going table solves the issue completely, but both also removes some of the responsive aspects so cards don't shrink or restack well. Relative size sidebar also solves the issue, but is rather ugly. I think I'll just try updating the width on the Chromograph image, then we should probably have a discussion about what screen sizes to support / relayout for..

[northwestwitch]

Adding class="img-fluid" to the SVG images should help, but you'd still need a scroller for the div

[dnil]

Right, img-fluid will make one of the widths relative again, so will look much like the table or stretch global layout options!

[northwestwitch]

And there is also that javascript function that arranges the chromosomes into 2 or 3 columns according to the page width . Perhaps adding an additional option to lay them all in one col id the zoom is high?

[dnil]

Yeah, I'll just do that (and add a y-scroll). It will now not be chromograph messing with the layout until somewhere down below 1080px display.

[northwestwitch]

Yeah, I'll just do that (and add a y-scroll). It will now not be chromograph messing with the layout until somewhere down below 1080px display.

Sounds like a good solution. We are going to change these pages in the future anyway!