So basically I am using material ui to set up a grid system to display videos in 2 rows. I have achieved the general layout but I can't seem to remove the white space/padding between the elements. I tried nowrap as the docs suggest but it doesn't work as intended. Here is my component:
<Grid
container
spacing={1}
direction="row"
justify="center"
alignItems="center"
>
{media.map((media) => (
<Grid item xs={6} key={Math.random()}>
<video
className="media__object"
autoPlay
loop
src={media.mp4}
/>
</Grid>
))}
</Grid>
Here is some of the css of media__object
.gif__object {
border-radius: 5px;
height: 100%;
width: 100%;
object-fit: cover;
}
Here is what the current situation looks like. I added some background color to make the space easily visible.
Thank You!
As far as I'm aware, you're not going to be able to get rid of that vertical space with CSS alone - you'll need some JS. The design style I understand you want is called 'masonry'.
What you're seeing is two rows with two columns in each. The row will be the height of the tallest column within it, then after the page width is filled (two half-width columns), it drops down to a new row. That's a limitation of CSS (there are some CSS-only workaround attempts for the desired layout, but they're not well supported). An alternative would be to create two columns and fill them separately, then they're not occupying the same 'row' as the item next to it. But I don't think that's what you want to do either since the order of elements will be off and you'll have to work out how to fill them evenly.
Try something like this JS masonry library.
Related
So I have a component which renders out multiple items inside of a <PerfectScrollBar></PerfectScrollBar>. And since there are a lot of items, it overflows where overflow-y would be set to scroll. However, I'm confused on how to use overflow-behaviour: contain so that when I scroll all the way to the top/bottom, it won't chain scroll to the parent element? What I have is roughly something like this but it isn't working:
<div style={{ overflowBehvaiour: "contain" }}>
<PerfectScrollBar>
{items.map...}
</PerfectScrollBar>
</div>
The following sandbox shows code that works perfectly well for a Material UI Table placed within a Paper component with a sticky header: https://codesandbox.io/s/2n40y
I would like the scrollbars (horizontal and vertical) to appear at the edges of the browser page, bottom and right respectively, yet still control the scrolling of the Table itself.
Currently I am only able to do this when removing the table from the Paper and making it a child of the page directly -- or a child of a main div that would span the full page height. Yet I need the Paper component to remain there, where other components will be placed above and below it.
Any ideas on how to achieve this?
UPDATE: in the attached sketch, the browser border appears in black and the scrollbars where they should ideally be appear in green. There is a container div in the middle of the page that contains the table in red. The table's headers should be sticky and the table shouldn't appear beyond the container div which acts as an aesthetic wrapper around it. Ideally, the browser vertical scrollbar would scroll the whole page down while leaving the page header (title + subtitle) and the table headers sticky. Also, when horizontally scrolling, the table should scroll within the container div. This is why I marked the parts that should not ideally appear in dashed lines.
All the changes we need to make are on demo.js
Firstly, we need to use a custom MUI TableContainer as the containerComponent for your #devexpress/dx-react-grid-material-ui Table. Basically, the purpose of this is so we can remove the overflow properties of the Table so that the scrolling is primarily for the body to address the requirement of
the scrollbars (horizontal and vertical) to appear at the edges of the
browser page, bottom and right respectively
import TableContainer from "#material-ui/core/TableContainer";
import makeStyles from "#material-ui/core/styles/makeStyles";
const useStyles = makeStyles({
tableContainer: {
overflow: "initial"
}
});
const MUITableContainer = ({ children, ...rest }) => {
const classes = useStyles();
return (
<TableContainer classes={{ root: classes.tableContainer }} {...rest}>
{children}
</TableContainer>
);
};
Secondly, at your MUITableContainer, get rid of the height: 400px so that the table's height will respond to the content. Again, the browser body bottom & right scrollbars will now control the document's scroll positions - this includes the table. Take a look at the Table containerComponent prop as well - we have assigned the custom TableContainer we created earlier.
<Paper>
<Grid rows={rows} columns={columns} rootComponent={GridRoot}>
<Table
containerComponent={MUITableContainer}
tableComponent={StickyTable}
/>
...
Lastly, to test this requirement:
there will be other objects before and after it.
Just render sample components before & after the Paper component
I cannot see the design spec you have referenced, but going off the sample in the comment on the first answer, I think you are trying to keep the header and footer from going off the left edge of the viewport when the user scrolls. But using just CSS, no JavaScript.
I took the entirety of the HTML (only the HTML) from your original code at https://codesandbox.io/s/2n40y (specifically <div id="root">) and dropped that into a Codepen.
Then I added a few visual design styles from your example so it looks kinda close.
Then I added the following CSS to make the column headers sticky:
th {
position: -webkit-sticky;
position: sticky;
top: 0;
}
I dropped in the following HTML as the first child and last child of <div id="root">, though it really doesn't matter where they live as long as they are not in the table.
<div class="stuckHeaderFooter">
[...]
</div>
To keep those from scrolling off screen when I scroll to the right, I made them sticky to the left (for RTL content you would need to make it sticky to the right):
.stuckHeaderFooter {
position: -webkit-sticky;
position: sticky;
left: 0;
padding: 0 1em;
display: inline-block;
}
The padding just makes it look less ugly. The inline-block is there to keep the block-level elements from filling the entire document width, which would keep them from being properly sticky since they would be wider than the viewport. You will probably have to set a max-width using vw units, but without knowing your content, target sizes, etc., I cannot say what would be best.
Finally, you have to remove the inline height: 400px on the first <div> under the root (<div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" style="height: 400px;">). If you cannot override it because something injects it, then this style will override it for you but it brittle without knowing what else may be going on:
#root > div {
height: auto !important;
}
CSS only, no JavaScript in this approach at all, which is what I think you wanted.
Pen: https://codepen.io/aardrian/pen/PoNMopM
Debug view: https://cdpn.io/aardrian/debug/PoNMopM
Update: 5 October 2020: Looking at the sketch provided with the question, it is important to note that the container that does the clipping is the one that gets the scrollbar. So your options for a CSS-only solution are limited:
Add a fake block to make a visible border on the right (I updated the pen to add one; look at #root::after for an example but you will still need JS to make sure that does not appear until the table starts to get covered).
Yeah, I ran out of ideas.
In conclusion, I don't believe there is a CSS-only solution here because of how clipped areas work.
You can achieve this by setting the height and width to be equal to the viewport:
<Paper style={{ height: "100vh", width: "100vw" }}>
Example modified: https://codesandbox.io/s/table-sticky-header-forked-l77is?file=/demo.js
I found many ui library or framework's grid system has no easy way to merely center vertically a block with width. I just want says a block with max-width of 200px in the center, how can I avoid using custom css to style it?
https://codesandbox.io/s/antd-layout-ch745
doc: https://ant.design/components/grid/
To achieve the centering is easy. In a 24 column grid you can use the Col component and play around the span numerics to make sure width is same left and right. For example, these are all column settings that would get you centering:
<Col span={12} offset={6}>
<Col span={10} offset={7}>
<Col span={8} offset={8}>
<Col span={6} offset={8}>
Simply pick a span that is an event number, and the offset equals (24 - span) / 2.
The problem is the max-width: 200px. To restrict the max width to a value no matter what screen size it is, I am afraid you're going to have to write custom CSS for it, simply because there is nothing that will get you a specific value without you specifying what that value is.
In that case, I suggest creating one row and one column that spans that entire row, and use flex to center your element:
<Col span={24}>
<div style="display: 'flex'; justify-content: 'center';">
<div style="flex: 1; max-width: '200px'">
</div>
</div>
</Col>
I am using react bootstrap, I am trying to align items vertically within a row but with no luck. My problem is I have a button in one of the columns, so for the other columns all the texts are shifted up a bit while the button and its content have a larger height.
My question is how can I make all columns within a row to have the same height and to all align in the middle vertically?
The only solution I managed to find so far is using CSS:
tranform: translateY(-50%)
this does the trick, but I was looking for a better more dynamic solution as this needs to be applied for every column excepts for the button column
EDIT: When I say columns and rows, I'm talkign about bootstrap's Col and Row, not actually a table or rows and columns; sorry for the misunderstanding
You can apply any of Bootstrap's classes to a React Bootstrap component. So, per the Grid System docs, the following columns will both be centered vertically:
<Row className="align-items-center">
<Col>
<h1>{title}</h1>
<p>{details}</p>
</Col>
<Col>
<button>{callToAction}</button>
</Col>
</Row>;
If you are using table rows, you can wrap contents within a <div>..</div>
like:
<tr>
<div classname="align-me"></div>
</tr>
and then you can use flexbox to align them dynamically:
tr .align-me {
display: flex;
align-items: center;
}
I had the same problem, and I found this:
<td className="align-middle"></td>
ref: https://www.codegrepper.com/code-examples/html/bootstrap+table+text+vertical+align+center
I tried the snippet in #kburgie's answer, but it did not work for me, my Row wouldn't budge an inch. So, I drew a border around that Row, to figure out what was happening.
Seems that Row has just enough height to fit its children, not an inch more, and that's why it can't move vertically. Gave the row some height, and it worked effortlessly.
.viewport-height {
height: 100vh;
}
<Row className="align-items-center viewport-height">
<Col>
<h1>{title}</h1>
<p>{details}</p>
</Col>
<Col>
<button>{callToAction}</button>
</Col>
</Row>
Could've added this as a comment to #kburgie, but I lack reputation.
I'm trying to create a custom collapsable legend for my data visualization app. It uses react and recharts. the component renders nicely the first time. But when I collapse the legend and reopen it, the responsive container doesn't shrink to fit. This would be easier if I knew the size of the parent container in pixels but I don't have that information on render. Is this a bug with recharts or flex box or am I doing it wrong?
Heres the code: https://codesandbox.io/s/8krz9qjk52
Clarification: The problem is that when I close and then open the legend, the legend component gets pushed out of the viewing area and the chart does not shrink back to the original smaller size.
It seems rather hacky but a viable fix is to set width to 99% with a height or aspect ratio.
<ResponsiveContainer width="99%" aspect={3}>
See this issue:
https://github.com/recharts/recharts/issues/172
I know this is a really old issue, but I'm posting here just in case somebody else lands here via Google.
I don't know why this works, but setting position: absolute on .recharts-wrapper will fix this issue entirely. So far I have found no downsides to this, but YRMV.
Since I'm having similar problems in my project, I decided to stick with this question. I was finally able to get a working solution!
codesandbox
I'll list the changes I made from biggest to smallest:
I lifted state up
from CustomLegend to CustomChart.
Now, CustomChart is in charge of what happens. It passes visibility information to CustomLegend as a prop. How does CustomChart know when to change state?
CustomChart has a member function called handleButtonClick that sets its state. handleButtonClick is sent to CustomLegend as a prop. So CustomChart renders CustomLegend like this:
<CustomLegend
items={legendData}
onClick={this.handleButtonClick}
legendVisible={this.state.legendVisible}
/>
Now in CustomLegend, we can include this in the button definition: onClick={this.props.onClick} Note that this pattern only works if the original function is bound to the parent since it alters the parent's state.
chart-container is now a CSS
Grid container.
It renders an inline style handling the column width based on state.
<div
className="chart-container"
style={{
gridTemplateColumns: this.state.legendVisible
? "80% 1fr"
: "1fr min-content"
}}
>
Note that 1fr is a fractional unit which, in this case, serves to fill the remaining space.
In styles.css, grid-auto-flow is set to column which allows things to be placed in the grid as columns. The things we place into the grid are SampleChart and CustomLegend, so SampleChart is the left column and CustomLegend is the right column.
gridTemplateColumns: 80% 1fr: When the legend is visible, we want the left column to take up 80% of the width and the right column to fill the rest.
gridTemplateColumns: 1fr min-content: When the legend is invisible, we want the right column to take up the minimum amount of space which its elements fill and the left column to fill the remaining space.
CustomLegend has only a single render method.
Instead of renderVisible and renderHidden, there is one method which conditionally renders the legend-list based on props (dependent on CustomChart's state).
The legend-container always renders now (it is a grid item).
Other small changes:
In SampleChart: <ResponsiveContainer width="100%" height="100%" className={props.className}> This has been changed because <SampleChart className="chart-area" data={data} /> actually sends className as a prop. Be careful with this! You need to set className directly on the parent tag in SampleChart's returned hierarchy (in this case the ResponsiveContainer). Try going back to your original codesandbox and changing the background-color on chart-area in styles.css (nothing happens!).
overflow: scroll in all instances from styles.css because we no longer need it.
You'll notice that if you attempt a grid layout using only fr units or any flex layout on chart-container, that the chart doesn't resize properly. Unfortunately, Recharts' ResponsiveContainers just don't play nicely with Grid or Flexbox (the project's main contributors are gradually tapering off support – no commits in 3 months as of now).
try this, it resolved the responsiveness (resizing) for both width and height
<div style={{position: 'relative', width: '100%', paddingBottom: '250px'}}>
<div
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
top: 0,
}}
>
<ResponsiveContainer>
<YourChartGoesHere />
</ResponsiveContainer>
</div>
</div>
The Best bet is to give it a width of 100% then play around with the aspect ratio till if satisfys you. I did this to adapt to different screen sizes
const theme = useTheme(); //this is from mui
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
<ResponsiveContainer width="100%" aspect={isMobile?1.5:1.8}>
Works like a charm
Add the following to your styles.css:
html, body, #root {
width: 100%;
height: 100%;
}
otherwise .chart-container, even though its width and height are set to 100%, will not take up the entire viewport. Then in SampleChart.jsx, change this:
<ResponsiveContainer width="100%" height={400}>
to this:
<ResponsiveContainer width="100%" height="100%">
to make your ResponsiveContainer's height... well, responsive.