I am using react-virtualized List to render a list of data. When the list is too short (is height is smaller than the "height" prop of List component) there are a lot of empty spaces at the bottom (because the height is fixed). Is there any way to fix this problem?
The fix is to detect when this is the case, and just pass a shorter height value to List.
This is what react-virtualized-selected does for short drop-down lists, for example. You can see the code for that here, although it may be more complicated than what you need because of the fact that it supports variable-height rows.
If your rows are fixed height, then the calculation is much simpler:
const height = Math.min(maxHeight, rowCount * rowHeight);
Related
I'm planning on rendering a list that contains nested tables.
If, for example, a row happens to contain a table containing 100s of items, would react-virtualized break up that row? Or would it render the entire row no matter its height, therefore defeating the purpose of virtualized infinite scroll?
Looks like the answer is a no:
https://github.com/bvaughn/react-virtualized/issues/980
it's pretty tedious working out the dimensions of an image then halving it and adding it on every time I want to check whether something is overlapping.
You likely want to use bbox.
This 'returns the bounding box for all matching items', i.e. the rectangle outline of the picture you want to get the coordinates of.
coords = canvas.bbox(item)
or
coords = canvas.bbox("itemtag")
In the case of multiple items with the same tag, it will use the first item given that tag.
I have a QGridLayout instance in a window, to which I dynamically add a series of widgets, depending on which values are checked on another QListView instance.
For each checked item in the list, I add a slider and two labels (for value and name), on a row of the layout, in positions 0, 1, 2.
for index in range(self.model.rowCount()):
if self.model.item(index).checkState():
slid = QSlider(Qt.Horizontal)
sl_val_lbl = QLabel("--")
sl_val_lbl.setMaximumWidth(150) #(a)
#sl_val_lbl.setSizePolicy(QSizePolicy.Expanding,QSizePolicy.Expanding) #(b)
sl_name_lbl = QLabel(self.model.item(index).text())
#sl_name_lbl.setSizePolicy(QSizePolicy.Expanding,QSizePolicy.Expanding)
self.sliders.addWidget(slid,index,0)
slid.setMaximumWidth(200)
self.sliders.addWidget(sl_val_lbl,index,1)
self.sliders.addWidget(sl_name_lbl,index,2)
self.sliders_dict[sl_name_lbl.text()] = (slid,sl_val_lbl,sl_name_lbl)
Now, the issue I have is that some of the values the label takes, are actually pretty long strings.
My first solution was (a), i.e. set a certain size for the label. Of course, this may or may not work depending on the actual size of the text to be rendered, and when said text is only few chars long as in the case with floats, this is not a very clean solution.
I then went on trying (b), i.e. setting the expanding policy of the Qlabel to Expanding. This works fine for the label itself, however it goes to overlap with the next Qlabel in the Layout (column 2), covering its value.
In other words, I was expecting the underlying layout structure to stretch with the contained Widgets, which is not happening.
How to obtain the desired effect of having the size of the column in the layout to follow/adapt to that of the contained widgets?
Is there any way to use react-virtualized's CellMeasurer with a maximum column width which then made the height expand?
For example, I may have an id field in column one of the grid. This would never grow too large, but I want to size it based on the largest value. Then in column two I have a text field that I am not too sure how large it will be. If it turns out that all of my current data set has a small value in column two, I'd like to size based on the largest value. If it happens to have some larger text (over a certain width) I'd like to use that maximum width, and then expand the row's height to accommodate the lines text.
From what I can see in the docs and code, this type of feature isn't supported. If this is the case, I think my best method would be implementing my own CellMeasurer with a slightly more complex _measure function. Does this sound like the proper course of action?
You should be able to do this by adding a style constraint to your rendered cell. CellMeasurer just measures what the browser reports- and CSS controls the browser's max width.
React might freeze the style object too so use spread rather than directly modifying:
style={{
...style,
maxWidth: 300
}}
I have a Gridview control on an ASP.Net page with fixed width cells. The data coming from the database occasionally comes over as a contiguous string of characters. When there are dashes in the string, it will break so as not to upset the width of the layout. If there are no dashes (specifically, I'm dealing with underscores), the string will not break and forces the cell to widen out, thus upsetting the layout of the page. Is there a way to tell the cell to keep its width and break the string? As it stands, I don't have access to the field's data directly, as the GridView bind its datasource to a dataset object coming from the database. Thanks for any feedback.
If you handle the RowDataBound event you'll be able to break the string "manually". Otherwise it'll only break based on "HTML rules".
First thing to note is that this doesn't have a lot to do with ASP.NET but is rather a pure HTML (and CSS) problem.
A possible solution is to use the css attribute table-layout: fixed and set some fixed width values to all columns. The disadvantage of this approach is that the total table width is fixed so it doesn't scale with the window size.
Another possible approach is to display in columns shorter strings using a utility function that cuts the long strings to a maximum length.