search

geneontology / ribbon

(DEPRECATED) Short form matrix view of all GO annotations for a given gene
BSD 3-Clause "New" or "Revised" License
4 stars 7 forks source link

Evidence filter can be cut off when ribbon is hosted inside scrolling viewport #66

Closed paaatrick closed 6 years ago

paaatrick commented 6 years ago

On the Alliance site we host all of our page sections in horizontal scrollable panels to accommodate narrow viewports (especially on mobile) without having the entire page scroll horizontally. This causes a problem when there is only, say, one row in the associations table and you open the evidence filter. The dropdown of filter options gets clipped by the scrolling panel.

This can be simulated in the demo by wrapping the RibbonDataProvider element with a few divs:

<div style={{border: '1px solid black', width: '600px', height: '100%', position: 'relative', overflowX: 'auto', overflowY: 'hidden'}}>
  <div style={{minWidth: '800px'}}>
    <RibbonDataProvider>
      ...
    </RibbonDataProvider>
  </div>
</div>

The result looks like this:

image

paaatrick commented 6 years ago

I created a branch in my fork (https://github.com/paaatrick/ribbon/tree/scrolling-panel-bug) which uses popper.js (via react-popper) to solve the problem. On that branch the same demo looks like this:

image

If you like the fix I'd be happy to open a PR.

lpalbou commented 6 years ago

Hi @paaatrick , sorry for the delay but with the GO meeting in Montreal, we didn't had much time. Looks nice, yes please do a PR when you have time and I'll merge it