Opened 2 years ago

Closed 6 months ago

#6179 closed defect (bug) (fixed)

In responsive content overflow on the page :-

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by: coffee2code's profile coffee2code
Milestone: Priority: lowest
Component: Theme Directory Keywords: needs-patch


Because of that graph the page is having overflow in responsive and not looking proper.
I have attached screenshot for better understanding.

Attachments (1)

Screenshot at Mar 11 14-55-19.png (97.3 KB) - added by nidhidhandhukiya 2 years ago.

Download all attachments as: .zip

Change History (3)

#1 @coffee2code
6 months ago

  • Component changed from Theme Review to Theme Directory
  • Priority changed from normal to lowest

Thanks for the report! I believe this only happens when the page is resized after loading. The JavaScript that outputs the chart does so in a way that fits the available space for the chart when the page is loaded.

If the initial pageload was narrow and then the page is resized after the fact to be wider, the chart will remain narrow. However, if the initial pageload was wide (which appears to be the reported scenario), the chart will initially be output wide/full-width. If the viewport is then resized to be narrower, the chart will overflow.

The code responsible for the chart is embedded from Google Charts and is not in our direct control. However, we can make the container for the chart scroll horizontally when it would overflow the container when resized.

Note that the original dimensions of the chart will remain unchanged, so resizing the page won't cause the chart to automatically expand or shrink to fit the new available width. This is known, accepted, and unlikely to be addressed.

#2 @coffee2code
6 months ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from new to closed

In 13049:

Theme Directory: Prevent Downloads Per Day chart from overflowing container when page is resized to be narrower.

Props nidhidhandhukiya, coffee2code.
Fixes #6179.

Note: See TracTickets for help on using tickets.