If I set my table to use the layout "fitDataTable" I get the following
This is what I expect and find.
However, if I set the layout to "fitDataStretch" keeping everything else the same I get the following
Its good that it now fits the width how I want, however notice the big gap at the bottom and the way it's not showing all the rows.
Stranger still if I try setting the table height I get the following (redraw() seems to do nothing)
Notice still it still doesnt show all the data but also the header seems to have stretched
Since the containing element is exactly the same, all I am changing is the layout when creating the table, im struggling to find out why the layout looks broken, I can only assume that when Tabulator creates the table it doesnt like something on the containing element, but if you have any pointers between the differences in how the two layouts work I would apriciate it.
Certain layouts in Tabulator don't seem to play nice if the containing element has CSS display: grid -it was possible for me to change to display: block and everything worked as expected. Also, see the comment from #oli Folkerd
Related
I have simple grid layout. 3 columns, 3 rows. Rows are set 400px 400px 100px just for demo.My monitor resolution is 1920x1080 (doesn't matter). On main page there won't content just informations. I'd like remove the empty space under the grid, cuz there is no reason for. I dont know how. It makes my other parts buggy. For better understanding i insert image below.
I checked also <body> but it's not this case.
There is no way to delete it
This is the default HTML and cannot be done unless you override it with an object or change the background color so that it is not white.
The scroll of the list is going crazy when I scroll and it keeps jittering afterwards even if I don't do anything) as you can see here: https://imgur.com/SdgMf7f (sorry embedding that gif doesn't work here)
I made a minimal example where it happens in:
https://codesandbox.io/s/4r2q3omv1w
I did pass the style to the rows.
Also, if you change the height and width of the list to get the values from Autosizer, then the list doesn't appear, even though this looks exactly like in the example.
Any ideas how to fix these two problems?
EDIT: it seems that it works a little better in Firefox, still a little jumpy in my own code though and the codesandbox's scroll still isn't perfect. (it's super jumpy in chrome, even in incognito).
It seems the problem was related to 2 issues:
Not delegating height and width from <AutoSizer> to the <List>
Row height was defined as 50 but the actual rendered height was more -
From the docs: Note that it is very important that rows do not have vertical overflow. It would make scrolling the list difficult (as individual items will intercept the scroll events)
Here's a working example: https://codesandbox.io/s/jppm1mmo83
Has anyone figured out a way to dynamically mutate text on the screen without triggering a render?
A large part of my screen utilizes setNativeProps for moving parts, meaning that the animations become lagged despite using shouldComponentUpdate. I would like to use the Text tag instead of the TextInput tag workaround suggested in this post for stylistic reasons.
Best case scenario is a workaround that involves setNaiveProps as it would follow the pattern of the rest of the screen; however, I currently plan to render all the numbers 0-9 on the screen an move them into place at the moment, so any help would be greatly appreciated!
As it turns out, you can actually format TextInputs the same exact way as Text elements (from what I have tested). For placing text horizontally, you have to set the width (something I had trouble with before). For those still interested in the original question however, you can nest TextInputs inside of a Text Element (one per text element because there is no justification and it automatically places them in a row). Styling applied to the Text Element will apply to the TextInput.
I want to implement something like this with React Native:
... notice how the grey line must run through top to bottom; the height of the 'row' is dictated by the amount of text there is in that step.
This is what I did:
Let's build the circular image node. You can see this running at https://rnplay.org/apps/NRZAFg. So far so good. I've marked the underlying container (which I'll call lhsContainer) with light red. The container flexes to fill the whole row.
Okay, let's try making sure the grey lines flex to fill to both the top and bottom of lhsContainer. Easy: I just add height: 100 to the view that contains it (styles.container). This works fine:
Next, incorporating the text. I want the height of the row (and therefore lhsContainer) to be given by the text. This DOESN'T work fine. The grey line doesn't flex to the bottom of the container! :
Autolayout would have done the right thing here (being a fancy-pantsy constraint solver), but FlexBox doesn't. (You can see this for yourself by uncommenting the code in the playground app).
I believe using row-reverse would be one way to resolve this, but sadly React Native doesn't support it yet.
What's the workaround for this?
I'm trying to make a page with two overlapping div's, one aligned to the left with the float:left attribute, and the other next to it, but overlapping by means of a negative margin.
Despite all this, I just get text as my output when I preview in browser from Dreamweaver. Problem is, it looks exactly how I want it in DW's preview pane.
Here is the jsFiddle, and how it looks in Dreamweaver.
Try swapping positions of the #img div, and the #titlebar div; AND make sure both are set to 'float:left'.
(#img div first, then #titlebar div in the HTML)