I am having trouble getting the Image inside of a semantic-ui-react Grid Column to be centered. The Message I have below the Image is being centered correctly by using
textAlign='center'
on the Column, but if I try use for example:
<Grid>
<Grid.Row>
<Grid.Column centered textAlign='center'>
<Image src={imgsrc} />
<Message size='small'>Image Title</Message>
</Grid.Column>
</Grid.Row>
</Grid>
The Image keeps to the left. I can CSS/Flex to position the Image where I want it in the Column, and it may be the correct way to do it, but Should I not be able to simply position the Image in the center of the Grid Column without CSS?
Make a div inside <Grid.Column> with class ui segment. Then set class="ui centered medium image" in Image tag. You can avoid another div just set a class ui segment in <Grid.Column>. See more Image property in Sementic-ui.
<Grid>
<Grid.Row>
<Grid.Column>
<div class="ui segment">
<img class="ui centered medium image" src={imgsrc}>
</div>
</Grid.Column>
</Grid.Row>
</Grid>
Use the react.semantic-ui Image component with "centered" prop like this:
<Grid>
<Grid.Row>
<Grid.Column>
<Image centered src="" />
</Grid.Column>
</Grid.Row>
</Grid>
Related
I am new to NextJS and was using its Image tag to have an image in my application. But the image size only changes if I change its width value, changing height's value does not impact it at all.
Here is the image:
<Image src="/Logo.png" alt="Logo" height={10} width={100} />
Here the image is taking the width's value and coming out to be big. If I replace the values in height and width, then also it takes the width's value and becomes small. I have even tried to put height property after width but nothing changes.
What am I doing wrong here?
You can wrap the Image component inside a div and style it like this:
<div style={{ position: "relative", width: `${100}px`, height: `${10}px` }}>
<Image
src="/Logo.png"
alt="Logo"
fill
style={{ objectFit: "contain" }}
/>
</div>
Note that:
The wrapper div has a relative position since fill Images are absolute positioned inside the DOM
fill is a prop in next 13 (older versions use layout="fill")
objectFit is passed inside the style object (with optional objectPosition) and those properties will be added to the rendered span element style properties
Wrap tag in a with the height and width you want your image to be
Add layout="fill" in the tag
<div style={{width: '100px', height: '100px'}}>
<Image
src="/Logo.png"
alt="Logo"
layout='fill'
objectFit='contain'
/>
</div>
I am using React and Material UI React for my application. I want the site to utilize the AppBar component with content below, but I don't want the content to cause scrolling on the entire page; I want my content to take up the maximum remaining height and the page width.
Layout.tsx:
<AppBar position="static" component="header">
<Toolbar>
<Logo className={classes.logo} />
<div className={classes.grow} />
<IconButton className={classes.avatar} edge="end">
<Avatar />
</IconButton>
</Toolbar>
</AppBar>
<Container className={classes.content} component="main">
{props.children}
</Container>
I've been trying different combinations of the available position for the AppBar, which are "static" | "fixed" | "absolute" | "sticky" | "relative" | undefined, along with different heights and widths for the content, but no combination seems to work.
You can try MUI's scroller hook to anchor the bar: https://next.material-ui.com/components/app-bar/#elevate-app-bar, or constraint the container to the window like I did with your code here: https://codesandbox.io/s/mui-full-page-no-scroll-whecl?file=/demo.js.
You can use sx={{maxHeight: 20vh for appBar and 80vh for the content}}
<AppBar position="static" component="header" sx={{maxHeight:20vh}}>
<Toolbar>
<Logo className={classes.logo} />
<div className={classes.grow} />
<IconButton className={classes.avatar} edge="end">
<Avatar />
</IconButton>
</Toolbar>
</AppBar>
<Container className={classes.content} component="main" sx={{maxHeight:80vh}}>
{props.children}
</Container>
I would to like align the button vertically center within this grid. I have tried vertical-align but there is no effect. I am able to adjust the vertical position of the button using top: "30%" but I don't think that is the best way to center the button.
<form className={classes.container} noValidate autoComplete="off">
<Grid container spacing={1}>
<Grid item xs={5}>
<TextField
id="standard-name"
label="AWS account"
className={classes.textField}
margin="normal"
/>
</Grid>
<Grid item xs={7}>
<Button variant="contained" color="primary" className={classes.button}>
Link AWS account
</Button>
</Grid>
</Grid>
</form>;
Here is what you need Grid API . Prop alignItems with center value. Read about flexbox in CSS and always check the docs first.
I'am trying to make a custom bullet graph with material UI, my idea is 2 MuiLinearProgress bar next to each other with a vertical Divider in between. I can't seem to find a way to display them next to each other.
<div className={classes.bulletGraph}>
<div>
<LinearProgress
className={classes.firstBar}
value={80}
variant="determinate"
title="test"
/>
</div>
<div>
<LinearProgress
className={classes.secondBar}
value={0}
variant="determinate"
/>
</div>
</div>
I tried using display flex on the parent but it makes them disappear, I also tried inline block and I got the same result.
Wrap your <LinearProgress> with <Grid> component.
<Grid spacing={1} container>
<Grid xs item>
<LinearProgress value={80} variant="determinate" title="test" />
</Grid>
<Grid xs item>
<LinearProgress color="secondary" value={0} variant="determinate" />
</Grid>
</Grid>
Live demo
You can set different spacing and ratios beetween items.
You can get the LinearProgress component working with Flexbox as follows:
<div style={{ display: "flex", flexDirection: "row" }}>
<LinearProgress
value={80}
variant="determinate"
title="test"
style={{ width: "100%", marginRight: "4px" }}
/>
<LinearProgress
color="secondary"
value={0}
variant="determinate"
style={{ width: "100%" }}
/>
</div>
Setting the width to 100% fixes the issue with this component disappearing when used with Flexbox. Note that I'd typically put these styles in a CSS file, but put them in a style property here to keep this snippet simple.
You can see this working here:
you can just add flex-grow to each LinearProgress when the parent has display flex:
sx={{flexGrow:1}}
I am trying to make a Semantic UI React grid full screen with a particular layout.
In my component I have the following render method:
render() {
return (
<Grid celled>
<Grid.Row stretched>
<Grid.Column width={10}>
<p>One</p>
</Grid.Column>
<Grid.Column width={6}>
<p>Two</p>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column width={10}>
<p>Three</p>
</Grid.Column>
<Grid.Column width={3}>
<p>Four</p>
</Grid.Column>
<Grid.Column width={3}>
<p>Five</p>
</Grid.Column>
</Grid.Row>
</Grid>
);
}
The widths of the columns are correct but the heights are not. This is what the above code gives me:
How do I stretch the top row to fit 70% of the screen and the bottom the remaining 30%? Or how can I set the top row to 600px and the bottom row the remainder of the screen? Either way would be ok with me.
I have tried giving the component an id and setting that id to 100% in the style.css but the height is unchanged.
I don't think stretched does what you are trying to do. Read the docs on Stretched to see their example.
You can set the height of the grid to 100vh, the height of the first row to 70%, and the height of the second row to 30%. Here's a jsfiddle example I put together.
render() {
return (
<Grid celled padded style={{height: '100vh'}}>
<Grid.Row style={{height: '70%'}}>
<Grid.Column width={10}>
<p>One</p>
</Grid.Column>
<Grid.Column width={6}>
<p>Two</p>
</Grid.Column>
</Grid.Row>
<Grid.Row style={{height: '30%'}}>
<Grid.Column width={10}>
<p>Three</p>
</Grid.Column>
<Grid.Column width={3}>
<p>Four</p>
</Grid.Column>
<Grid.Column width={3}>
<p>Five</p>
</Grid.Column>
</Grid.Row>
</Grid>
);
};