search

VtEcostudies / VAL_Data_Explorers

Other
1 stars 1 forks source link

Double scroll bar #11

Closed MortenHofft closed 2 years ago

MortenHofft commented 2 years ago

The double scrollbar is really annoying. I'm not quite sure how to solve it honestly, but I will look into it. If you want to get rid of it now, then the only option is to remove the footer on the data exploration page.

jloomisVCE commented 2 years ago

I agree it's annoying. I think I won't convince my colleagues to remove headers and footers - we want to capture this data widget in our context. What if we allocate a specific height for the widget's list views (table, gallery, datasets) and include that without scrollbars? Each view would need to have paging like ?view=TABLE does.

Hm... DATASETS doesn't seem to page over all results, it has just one long list?

MortenHofft commented 2 years ago

The header could stay, but the footer is causing the issue. Or rather the issue is the widget, but it can be fixed be removing the footer on the data exploration page. But I fully agree it isn't a good solution

MortenHofft commented 2 years ago

I've changed the widget slightly. But you still need to provide a size. It is currently set to height: calc(100vh - 59px); I would suggest setting it to min-height: calc(100vh - 59px); instead. Perhaps making it dependent on device size? The challenge is that the map (and the table) views need to know how much space they should take. And without specifying a height they will just collapse.

MortenHofft commented 2 years ago

I notice that the header is 80px high. So min-height: calc(100vh - 80px); is probably a better option. Then at least the user can scroll down and still see the whole data explorer.

jloomisVCE commented 2 years ago

Thanks. I was able to remove the footer (commenting inline php in html doesn't work, so i just removed that) finally. I don's see how that helps - the data-widget scrollbar remains and its size is still the min-height, I think .

I also tried the above style suggestion for the data-widget.

MortenHofft commented 2 years ago

When I use the site and change the styling I see a difference

before after
jloomisVCE commented 2 years ago

I was trying to alter style with .css sheets wihout success. I didn't notice the style key in the javascript React element's definition until just recently. I think it's working now.