When using react-virtualized's Table class with a table with many columns, it is necessary to scroll horizontally to the very end of the columns in order to be able to see the vertical scrollbar.
(you can see an extremely similar question about React-Table here, it is not clear to me if react-virtualized's table code uses React-Table's code at all, but in any case I am having an identical problem)
in the linked issue someone commented that:
.ReactTable .rt-tbody{
overflow: initial !important;
}
fixed their issue. I checked this solution with react-table and got the desired behavior.
However, as far as I can tell react-virtualized table doesn't have tbody class available for css. (The docs do list a bunch of available class names, but a body class name doesn't seem to be on that list).
I've messed around with the css trying to set different overflow options in different ways to no avail. I have not been able to get the vertical scrollbar to display without needing to horizontally scroll all the way to the end. What can I do to make that happen?
(Edit: I've also tried to figure out some way to make this work with react-floating-scroll but it seems like the ref passed back by virtualized table isn't the kind of ref the scroll code needs...)
This will move the scroll bar to the left side instead of right side.
.ReactVirtualized__Table {
.ReactVirtualized__Table__Grid {
direction: rtl !important;
.ReactVirtualized__Grid__innerScrollContainer {
direction: ltr !important;
}
}
}
Related
I'm trying to render my list of data using the WindowScroller and List from react-virtualized, but for some reason, only a portion of my data is rendering. I've read over the docs and I believe I have all the necessary props...help is appreciated!
Taking my List out of the WindowScroller renders everything correctly, but I'd like to keep the WindowScroller to give scrolling controls to the parent element.
There are 100 items in my data set, but only a portion of them are rendering.
Here is a sandbox with an example: https://codesandbox.io/s/jolly-gagarin-vczki1?file=/src/App.js
UPDATE #1:
I believe I've found the cause of my error! It seems that the height in the List element is the issue; it's not large enough thus cutting off my data. Because my List has no fixed height to begin with (height depends entirely on the number of children), I think I need a way to dynamically calculate the height of the List. I did find a method for List elements called measureAllRows, but I can't get it to work :( (see my sandbox above)
UPDATE #2:
I found a really hacky way to do it; by setting the List element's height prop to Infinity, I can get all of my items to render. This doesn't feel like a good way to solve the problem, but it does fix my issue with a dynamic list height.
UPDATE #3:
The answer below helped when just using AutoSizer, but I was curious... if I were to put my AutoSizer into a WindowScroller like so: https://codesandbox.io/s/ecstatic-sunset-g4k3ly?file=/src/App.js, how could I achieve a similar fix for displaying all of my data?
I can say that the problem lies in one of the parent div for WindowScroller component which is causing this behaviour.
The overflow property cannot be set to auto for WindowScroller to work. If you try executing only the windowScroller part without modal window it works as expected.
https://codesandbox.io/s/elastic-ritchie-k938m0?file=/src/App.js
I was also stuck with similar problem and this worked for me, in your code try removing the autoheight parameter and get the height from the autosizer.
Reference:
https://codesandbox.io/s/recursing-pine-2w2m8f?file=/src/App.js
This code appears in a siteorigin layout builder in the header widget area. There are four elements, and #4 is a search box. When you type anything into the box, the suggested results appear under the content below.
I tried a z-index on the header, the widget, assigning a special class to the widget with a high z-index, and got nothing.
https://www.carmelchamber.org/
Any thoughts please, because I'm stuck.
Thank you!
Luke
This was a tough one to locate. Please, try adding to Custom CSS:
.panel-row-style,
.elementor-section {
-webkit-transform: none !important;
}
That's to override a rule in the parent stylesheet.
I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
Is it possible to set a x-scrolling in react-virtualized? I have a table with a fixed width, and more columns to display than I got space in my table, so I need a x-scrollinig. In my tests if i did it, the table just shrinked up and did just display '...''s for content if the table runs out of space.
Intro paragraph for react-virtualized Table docs (emphasis added):
Table component with fixed headers and windowed rows for improved
performance with large data sets. This component expects explicit
width and height parameters. Table content can scroll vertically but
it is not meant to scroll horizontally.
You might be able to hack it, but it isn't meant to support horizontal scrolling so it probably won't work. Consider using Grid or MultiGrid instead if this is a requirement for your app.
I was struggling with this myself for a while. I did it by by setting the width of the table to width={Object.keys(rows[0]).length*150} and set each column min width to 150 (or whatever you choose just make sure it is the same in your table).
Then wrap it in a Paper and give it a width and overflowX:'auto'
something like this:
const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
export default function DataPreview(props) {
const rows = [{ One: 'one', Two: 'Two',Three: 'Three',Four:'Four', Five:'Five', Six:'Six'}]
return (
<Paper style={{ height: 400, width:700, overflowX: 'auto'}}>
<VirtualizedTable
width={Object.keys(rows[0]).length*150}
rowCount={rows.length}
rowGetter={({ index }) => rows[index]}
columns={Object.keys(rows[0]).map(head=>{return(
{
minWidth:150,
label:head,
dataKey:head
}
)})}
/>
</Paper>
);
}
Building on bvaughn's accepted answer, the hack for a horizontally scrollable table could look something like this, however, beware of the following caveats that come with this hack:
Your overflowing Table columns will not be virtualized
The scrolling focus gets captured by the wrapper's x-axis scrolling and you will need to click within the internal Table component to refocus and regain y-axis scrolling. This is incredibly frustrating to use especially on mobile devices.
This is a cached map from the software: ogmaps
Please look carefully at the tiny shades below the address bar in the main window here.
On once clicking the minimize/maximize button, it gets showed up fully. Tested on firefox, and google chrome.
Can't say that this is the browser problem, since when I loaded this cached map on the Qt widget, I still had to click the minimize/maximize button, to get it gets showed up fully.
The html for the map is too long to be posted here. If there is any relevant section that you know of, then please tell me and I'll post it here.
EDIT 2
Finally I have managed to upload that html code here: http://code.google.com/p/earthhtml/source/browse/trunk/ogmap.html
Please have a look about the div tags.
Although this may seem like something trivial, it worked out for me. I had the exact same problem (among other GM problems) using GMv3 and couldn't figure it out.
I added a min-height to the div containing the map (with !important)
I removed ALL max-height & max-widths from the CSS
This fixed the 'small map' problem plus an additional problem I had with the GM pins and infowindows.
On top of that, make sure that there are NO divs with a high z-index on your page, as GM will resize the containing div not to interrupt with the top div. Another div with a higher z-index will also mess up the map and make the height and the width go crazy.
div#map{
min-height:600px !important; /* or any value that suits you */
position:relative;
margin-left:0;
margin-right:0;
left:0;
border:1px solid #979797;
}
I hope this works as good for you as it worked for me. If not, good luck!