I'm new to Flexbox, Exponent, and React Native, so I'm not certain if I'm doing this correctly. Any help you can provide would be appreciated and I've provided a snack below that could be used as a starting point.
My screen has a header that's 40px tall at the top and a tab bar that's 40px tall on the bottom.
Between them, I'd like to have a full-width, full-height column that has rows of content with charts on the left, and a header (Billing, Budget, Labor) to the right of the chart with variable number of rows of data beneath the header. These rows have a key that's left-aligned (Invoiced, Not Invoiced, Total, etc.) and a value that's right-aligned (500.00, 250.00, 750.00, etc.).
Because the number of rows of data vary (3, 4, 3, etc.), I don't want to hard-code the heights of each chart row. I also don't want these rows to stretch/grow to the height of the center column, but allow for whitespace beneath them).
How can I build this so that:
1. Rows don't fill the height of the center column, but align on the top and leave whitespace below.
2. Charts are left-aligned next to their data.
3. Data figures/values (e.g., 500.00) are right aligned next to their keys (e.g., Invoiced).
Any help would be amazing. If you could provide a snack.expo.io, that'd be even better! Here's a rough example of what I mean, but you can see that the rows are stretching to the height (so there's a lot of wasted space and no empty space at the bottom) and the key/values in the data aren't justified so the key is on the left and the value is right-aligned.
https://snack.expo.io/HknEsZ5uz
I updated a few lines, does this look better? https://snack.expo.io/S1cF5bsdG
flex: 1 allows a view to fill all space available, so if you have two views on the same level of a hierarchy with flex: 1, both views split all vertical space equally. Read more: https://facebook.github.io/react-native/docs/layout-props.html#flex
Related
I would like to make a table with resizable columns, where the columns start out automatically sized so that they are the width they need to be to contain the text that's in that column.
I have been able to achieve these separately, but not together.
It seems that the problem is that react-table requires you to use either FlexLayout, BlockLayout, or AbsoluteLayout to be able to resize the columns, but this causes table elements to be replaced with divs. When the divs are giving an "auto" width, each one individually fits to its contents, which creates a "brick wall" of stacked divs, and not a table where all the cells in a column are aligned.
Here is an example of the brick wall effect: https://codesandbox.io/s/nervous-goldstine-s12pve?file=/src/components/DataTable.js
Commenting out line 11, which sets the column widths to 'auto', will fix the alignment issues, but the columns will be wider than they need to be. If instead you comment out line 30, the column width issue will be resolved, but the columns will no longer be resizable.
Is it possible to have both of these features?
I have an object with keys and values that I want to represent in a responsive way so that are always next to each other, but two k/v entries are stacked because of overflow on the horizontal direction, they will be aligned like a table.
Here is an example of what I am trying to accomplish:
This looks close to what I want, but does not account for the content size. max-content does not work
This also touches on it but recommends flex instead, but flex rows are all calculated independently so that rules that out.
I have the following layout set up in react with a flexbox:
Ideally I'd like them to align themselves left to right and cover the gaps - i.e. from the above example there are two gaps under the smaller boxes and two smaller boxes below them, would like those boxes to flyp up and fill in the last two spots.
Not sure what sort of algorithm or idea I'm looking for here, it also has to work for arbitrary boxes (though I can control for alimited range of sizes)
I have a series of buttons that I want to appear in columns at the bottom of my QML page. The number of columns across should depend on the width of the window, as the window width increases I want more columns to be added. (And fewer rows as a result as components are pulled up to the previous line)
This is sort of like a Flow component, but I want the items to appear in columns, evenly spaced across the page, in rows and columns (columns centered vertically, at the bottom of the page). Sort of like GridLayout.
I can't figure out what QML component(s) to use to achieve this.
I think what you're looking for is a GridView. See the layout documentation.
I'm not positive, but based on your description I think you would just need to set the flow property to GridView.FlowTopToBottom.
I'm using material-ui's Grid component, inside a ListItem. I'm trying to work out how to spread three columns worth of content across four columns of the material-ui layout, as follows:
Green lines indicate five of the twelve columns. In the first one is the red icon (ignore the margin to its left). That's clear. But then there are three pieces of content - Name, DOB, and an ID -- that are spread across the remaining four columns shown. The yellow lines indicate spacing between the three content pieces, which is supposed to be 1.5 rem.
I've forked a relevant material-ui demo here
If Grid items are the elements to be placed inside a Grid container, how do you handle spacing content inside an item?
EDIT: I've realized that a Grid container can indeed be nested inside a grid item, and have updated the codepen link to reflect that. What I now need to know is how to specify 1.5 rem in between each of the three content pieces. Their widths should be fixed such that the columns are respected even if the content piece is missing (e.g. there is no date -- the columns still need to stay in alignment)
Any help appreciated!