Plots2: Side Bar Overlap On Transition To Next Device Size

[skilfullycurled]

Hi,

Firefox 65 on macOS here. When making the research note a smaller width, there is sidebar overlap as you switch from a computer screen sized to the next device (what I think is tablet sized?) both in the sidebar and header. So far, the sidebar issue (second image) only happens on the research notes but it does not occur on the home page (for example). The header issue (third image) happens on both. Probably not very important since if I take out a table, I don't see the transition, but even so, there you have it.

See images for steps of transition.

[jywarren]

Hi, and thanks for posting! I believe the image will be on this template:

https://github.com/publiclab/plots2/blob/master/app/views/notes/show.html.erb#L12-L18

A quick fix could be setting "overflow:hidden" on the image, but we may
also want to ensure it has a max-width css property that limits it to the
width of the column. Could even just max-width: 100% work? It'll take some
testing -- making the window wider and narrower to try it out.

Thanks for the helpful screenshots!

On Wed, Mar 6, 2019 at 11:46 AM skilfullycurled [e-mail]
wrote:

Hi,

Firefox 65 on macOS here. When making the research note width smaller, you
have sidebar overlap as you switch from a computer screen sized device to
(what I think is) the tablet size both in the sidebar and header. So far,
the second picture only happens on the research notes (haven't checked
every page) but it does not occur on the home page. The third picture
happens on both. Probably not very important since if I take out a table, I
don't see the transition, but even so, there you have it.

See photos for steps of transition.

[image: screen shot 2019-03-06 at 11 34 37 am]
https://user-images.githubusercontent.com/950291/53897789-df2fa800-4004-11e9-8739-7b91e60d7aad.png

[image: screen shot 2019-03-06 at 11 34 57 am]
https://user-images.githubusercontent.com/950291/53897812-eeaef100-4004-11e9-924b-df8de5511bb1.png

[image: screen shot 2019-03-06 at 11 35 12 am]
https://user-images.githubusercontent.com/950291/53897836-fb334980-4004-11e9-8c82-370a04b0f52f.png

[image: screen shot 2019-03-06 at 11 35 29 am]
https://user-images.githubusercontent.com/950291/53897844-fec6d080-4004-11e9-8686-685fcaa3b182.png

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/4927, or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ7CDA3u_ihSKwY-EP8pyuLGWN-oOks5vT_DCgaJpZM4bhVcm
.

[skilfullycurled]

using max-width:100%on this line...

<img style="max-height:600px;" class="img-rounded hidden-xs hidden-sm" src="/system/images/photos/000/029/664/large/mysql_er_diagram.png">

...works in general. It has the not-at-all-terrible side effect of causing the image to get smaller as you close the width of the page (see second image).

Also, in so far as it is helpful to diagnostics, note that both in the second image of my original post as well as the second image attached to this post, the "Ask related question" button is cut off as well.

Happy to experiment around a bit more, but I am not very good at CSS so the more specific you can make your suggestions, the better. As in, when I use CSS it I am just generally throwing spaghetti on the wall. Could be a good time to get better though...!

[ananyaarun]

Hey @skilfullycurled Can i work on this issue ?

[skilfullycurled]

@ananyaarun absolutely! I was just trying it out because @jywarren made some suggestions but it's completely open. I should have been more specific whether I was actually taking it on or not. I'm terrible with CSS so I look forward to seeing the solution!