I am working with React Suite's Grid to display university course data in a calendar format. The grid works great, other than the cell heights not being uniform: An image example of my Grid UI
Here is the code I currently have for the grid:
<Grid
style={{
width: "100%",
height: "100%",
}}
data-testid="grid"
>
{this.state.data.map((c) => (
<Row>
{c.map((e) => (
<Col className="display-linebreak" style={this.formatCell(e)}>{e}</Col>
))}
</Row>
))}
</Grid>
Is there any way to make the height of all cells consistent across their respective row, while still making the grid flexible enough for data intake of a variable number of dates and times? One way I tried to do this is by adding {{ height: "100%" }} as inline style for the Row, but I quickly realized that this or any similar approach will not work, as ultimately it is the cell height that needs to conform to a dynamic row height, based on the automatic heights of the other cells. Another thing I considered is that it may be easier to isolate a cell with respect to a Row if Column is the parent component to Row instead of the other way around, but I don't think this is possible in React Suite Grid.
Basically, my conundrum is, how can the cell know how tall it has to be if there are cells in the row that have not been rendered yet? Is it possible to go back and update the height post-render if a taller cell is found? How does a cell even know which row it is in?
Any tips or insight is greatly appreciated, I am happy to clarify anything or answer questions about it. Thank you in advance!
I did it with adding flex to the rs-row:
.rs-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Then you can add height 100% to the cols or cards elements inside of them.
Related
I am using material ui ,I want to fix the left side fix and right side scrollable but its not working.I am trying in this way....
<Stack direction="row">
<Box sx={{ position: "fixed", width: "25%" }}>Left-side box content</Box>
<Box sx={{ overflow: "scroll", width: "75%" }}>Right-side box content</Box>
</Stack>
Thanks in advance...
It sounds like you are trying to create a layout where the left side of the page is fixed and the right side is scrollable. To do this with Material-UI, you can use the Grid component to create a two-column layout, and set the style property of the left column to { position: 'fixed' } and the right column to { overflow: 'auto' }.
You can also use grid-template-columns: fixed-value auto in CSS to achieve this.
It is important to note that you will likely need to adjust the widths of the columns and the container to make sure everything fits correctly on the screen.
It is also possible that you are facing some other issue, please provide more details about your code and the exact problem you are facing, so i can help you in a better way.
In an antd table I am trying to use the columnWidth property in expandable to set the column width as the minimum. In my table the width for the expandable icon column is very big and by default it's quite large for me. I've tried giving a string | number as said so in the documentation but it doesn't seem to work. Is there any other way to set it to a minimum?
expandable={{expandedRowRender: record => <p style={{ margin: 0 }}></p>,
columnWidth: 1,
expandRowByClick: true,
}}
I've tried to use style and margin as 0 but even that isn't making a difference and columnWidth doesn't seem to work.
i'm working on Kendo react grid and a set reorderable={true} to make the columns reordering.
Now i want to save the new order and i don't found a solution what event should i use to detect when the column move
<Grid
pageable={paginationConfig}
reorderable={true}
sortable
filterable
resizable
style={{ height: '600px', overflow: 'auto' }}
>......</Grid>
can somebody help me please.
See onColumnReorder in the Documentation. Where you store it is the next question... State, store, local storage etc...
I am using flexbox and Microsoft's fluent ui "stack" abstraction of it to display video-cards on a page in my React app. I am using flex-wrap and space-between to keep equal space between each of the items, as the name implies. And this looks perfect when numerous items exist on the page.
However, when you're just starting to add items, and you go to add a second item, instead of placing the item just to the right of the first video-card - which is aligned to the left of the page - the second item gets put on the far right of the row. And then the 3rd item is half the distance of 1 and 2 -- so it's placed in the exact middle of the row.
My question is, how can get that 2nd item -- and then the 3rd, etc. -- to drop in just to the right of the previous item, until the row is full, at which point it wraps to a new row and the same happens again?
This is my code:
<Stack
horizontal
styles={{
root: {
'flex-wrap': 'wrap',
'justify-content': 'space-between'
}
}}>
{this.showNewVideoCard()}
{this.state.videos.map((video, index) => (
<div key={index}>
<VideoCardForm key={video.id}
... more code
/>
</div>
))}
</Stack>
In other words, when I add the second item, what I'm getting is something like this:
... when what I want is something like this:
And I'm guessing the way it would need to work, behind the scenes, is that the space between each item will need to be calculated based on the maximum number of items you can fit in one row?
Is this a scenario flexbox is designed to handle? Or is this more complicated than I'm realizing? Note: in case it's not already obvious, each video-card will be exactly the same dimensions. So, in my use case, I know I can fit 7 video-cards in a row before it wraps to the next row. I'd just rather the items in a row drop in next to each other, rather than on opposite ends of the row initially.
I believe your issue is that you're using justify-content: space-between, when you should be using justify-content: flex-start and giving each item a margin. Since flex-start is the default value for justify-content you can just remove that line all together.
As per doc, I tried fullWidth, centered for tabs, Does not seem to work. How do force tabs to re-adjust to given screen size ?
I am using latest beta v23
I think the easiest way to force the tabs to fit a smaller container width, would be:
<Tab style={{ minWidth: 50 }} label="item" />
The default minimums are 160px for medium-and-up, 72px for small-and-down screen sizes.
Depending on how small the fit should be, you can also do other kinds of overrides on padding and font. I tried out a few techniques on CodeSandbox.
Remember, the more we compact the tabs, the worse usability. There should be other workarounds too! For instance, shortening the label texts, using icons, or restructuring.
I came here when I was looking for how to make the width of the tabs relative to the contained text. So here how i solved it acording to previous answer.
items.map((item) => (
<Tab
style={{
minWidth: `${item.title.length}` + `em`,
paddingInline:'2em'
}}
/>
))