react-virtualized List component extend height of last row - react-virtualized

I have a List component from react-virtualized where I am using the height prop to set its row height. However, the horizontal scrollbar is overlapping with the last row, making it hard to see the text content of the last row. Is there a way to increase the height of the last row so that the horizontal scrollbar doesn't overlap with the text. Doing this dynamically in code messes things up when one is dealing with a dynamic List growing in real-time. I tried using the last-child selector but had no success. Any insight would be appreciated.

The react-virtualized Grid component accounts for horizontal and vertical scrollbar size to avoid this problem. (You can see this on the Grid demo page.) However it's expected that the List component will not scroll horizontally so it will only account for the vertical scrollbar size.
If your UI needs to scroll horizontally, you may have better luck using a 1-column Grid.

Related

Scrolling Not Working with Long Content in Tabulator

I have noticed that when I have cells with a lot of text, the table will not scroll vertically. As I scroll down, the table jumps back to the top. The behavior is a function of the amount of content and the width of the column. A wider column can handle more content before this behavior is seen.
I thought this was due to my own custom formatter, but it also happens for the textarea and html formatters.
This can happen if the row content is significantly longer than the height of the table.
In this case you can improve the scroll stability by increasing the size of the virtual dom render buffer on the table. this is the amount of space that the table renders above and below the table to allow smooth scrolling.
It is be default set to 2 times the height of the table. You should make sure it is at least 5 times the height of your tallest row.
This can be done using the virtualDomBuffer option in the table constructor:
var table = new Tabulator("#example-table", {
virtualDomBuffer:300, //set virtual DOM buffer to 300px
});
More information on this can be found in the Virtual DOM Documentation
Though from a user experience perspective i would query whether a table is the best way to layout data if it takes up a large vertical space. It would probably be clearer to display summary information in rows, and then use either a rowFormatter to toggle a details section under the row, or a modal to show more detail

How to align the button horizontally and vertically in Document?

I want to align the button horizontally and vertically in Document, i now ho to align horizontally, but i can`t undestand how to align vertically?
In picture bellow, button align horizontal, but how align vertically, in option button i don`t find something about align vertically.
Vertical align is possible in tables only.
Create a table with one row and one column. Set wanted height as "Minimum height" and "Vertically align" to "Center". Content will be centered vertically this way.
I know, it is just a workaround, but it works. Of course, set "Cell Border Thickness" all to 0 so table border is invisible.
If those are 2 buttons, why don’t you just put a ‘return’ (CR) between them. The 2 buttons will be positioned one below the other.
If need be, you can size the buttons, so they have the same width via the properties.
There is no option to "fit to window" vertically in normaal Notes form and document display. It assumes an infinitely long document consisting of paragraphs.
There is, however, the option of displaying a document using the #DialogBox formula or the NotesUIWorkpace.DialogBox method. Both of those have an auto vertical fit argument that you can provide. This will likely require you to redesign your application a bit, but I think it's the only way to do what you want.

How to make a vaadin combobox overlay wider than container element?

I have a vaadin-combobox inside a slim grid cell/column, when I open the combobox the contents is restricted horizontally to the space in the cell and I can't see the values. Vertically it overlaps correctly. I have been searching for some CSS to make the overlay of values wider like you do with a normal HTML picklist but I couldn't find it.
Thanks for any pointers.

Always show horizontal scrollbar in JavaFX-2 TableView

I have a TableView in JavaFx-2 that's inside a SplitPane and I would like to always show the horizontal scrollbar for the TableView.
The TableView has multiple columns that are wider than the width of the entire table. When the TableView has at least one row filled, the scrollbar is displayed and I can scroll across the table. However, when the table is empty, the scrollbar does not appear and I'm stuck on whichever columns were last visible.

Which android layout to use for distributing variable width buttons to fill a screen?

I am getting started with Android, trying to write a "concentration" game for kids where a screen full of text is separated into buttons, filling the screen (one word per button)
The buttons should wrap to the contained text, so longer words will have longer button widths.
Once a row fills up, the next button should flow to the next row, and so on, until the whole screen is filled with evenly spaced variable width buttons.
The number of rows and number of buttons per row varies based on screen size (and as mentioned, button width)
I could use a vertical linear layout, then insert horizontal linear layouts to contain the row text. However I don't see how to make those widths and number of rows vary based on the screen size and text size.
I presume I need to create my own custom layout, something like FlowLayout in Spring - if so, can you recommend a tutorial for how to do so?
Check android's API Demos
Animation->DefaultLayoutAnimation (for example)
LayoutAnimationsByDefault.java & layout_animations_by_default.xml (for source)
It uses GridLayout and with a bit of modifications of mentioned example, it will be useful for your case..It's flexible, it's available since API Level 14, but it's available trought support/compatibility library or 3rd party library .
Hope this will help.. Cheers ;)

Resources