I'm trying to display a CircularProgress centered inside material UI TableBody. The below is what I have tried, but it's not centered as I expected. (Please note that only relevant code has been posted)
const styles = (theme) => ({
progress: {
width: "100%",
display: "flex",
justifyContent: "center",
minHeight: "10vh",
alignItems: "center"
}
})
<TableBody>
<div className={classes.progress}>
<CircularProgress />
</div>
</TableBody>
It looks like this, but I want it to be centered in the TableBody. Currently, it only takes the width of the first column.
Here your div extends 100% to the parent which is TableBody you can make table body 100% or give position: 'absolute' to div
Related
I have a modal component that overlays my page with a form to make some data inputs.
a second component is rendered next to the form when a certain condition is met (try to fetch data, render if anything is found).
When this happens I would like the whole card containing the two items to expand with some effect (horizontally if on desktop, vertically if on mobile), reducing smoothly the width of the first box during the transion.
I have tried to achieve this using a simple combination of the MUI Grid Container and Grid items,
but with this approach the second item always go on a new line or shows on the right but never changing the modal card overall size.
this is the style applied to the modal card:
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
display: 'flex',
flexDirection: 'column',
transitionDuration: '500ms',
minWidth: '30%'
}}
So I thought of wrapping the 2 brothers in some DIV and apply some custom CSS taking advantage of the transitionDuration to apply an effect. But I couldn't make it work.
here is the style applied to the DIV that wraps the 2 brothers:
<div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
this is the div that contains the form grid container (1):
<div
style={{
flexGrow: 1,
minWidth: '30%',
transitionDuration: '500ms',
transitionTimingFunction: 'ease-out'
}}
>
and this is the div that contains the component to be shown when condition is met (2):
<div
style={{
paddingLeft: 10,
transitionDuration: '500ms',
transitionTimingFunction: 'ease-in',
whiteSpace: 'nowrap',
minWidth: condition ? '200px' : '0%',
width: '0%'
}}
>
can anybody point me in the right direction?
I'm new to CSS
Thanks
When you fetch the data you can add a class (.active or something similar)to the parent container as well and add the styles you want to change like
container.active > child{Blahblah styles}
I have the following code (with "#fluentui/react": "^8.33.0",)
import React from 'react';
import { Toggle } from '#fluentui/react/lib/Toggle';
class TestIt extends React.Component {
render() {
return (
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
<Toggle onText="Width Limit Auto" offText="Width Limit Manual"/>
</div>
)
}
}
export default TestIt;
It has the following result where the label text is wrapped. If I remove display: 'flex', flexWrap: 'wrap', the label text is not wrapped.
I don't want to wrap the label text; I don't understand why display: 'flex', flexWrap: 'wrap' (for some reason / other code, I need to keep it) has an effect on that.
For instance, there is no problem with codepen: https://codepen.io/SoftTimur/pen/JjJaRvv.
Could anyone help?
I think the main problem is width of parent element. First you have unnecessary wrapper over Toggle Component because it covers only one element inside flex:
Here you are few Codepen examples.
Note:
Codepen has dynamic width and that's the reason why text wrap doesn't exist. But it shows up when you have overflow or fixed width. Put at your local example some CSS for body and html or at parent element:
body, html {
width: 100%;
height: 100%;
}
I'm working on kanban/Trello clone app with Material-Ui,
I tried to display columns horizontally and keep columns the same width.
All columns are displayed horizontally in the same row.
If display area for columns requires to extend browser width, the display area width is automatically adjusted.
The issue is Material UI doesn't allow me to display columns with side scroll.
If I decided the display area directly, like width:2000. the all columns displayed horizontally,
but there is always redundant space.
Because the width is fixed, and we don't know how many columns users create.
What is the solution for this issue?
these are the code I tried.
1/wrapped child with Grid
<Grid container style={{margin: 0,width: "100%"}}>
{children}
</Grid>
2/set style like this
const useStyles = makeStyles({
root: {
display: "flex",
justifyContent: "flex-start",
alignContent: "center",
width: 20000,
overflowX: "auto"
}
3/use Container and Grid
<Container className={classes.container}>
<Grid container direction='row' justify='flex-start' alignItems='flex-start'>
{children}
</Container >
</Grid >
onst useStyles = makeStyles({
root: {
display: "flex",
justifyContent: "flex-start",
alignContent: "center"
// width: 20000,
// overflowX: "auto"
},
container: {
overflowY: "scroll",
whiteSpace: "nowrap"
}
});
I'm having issues getting my background image to fill the screen, depending on the amount of page content. My app is made up of a main div and a side bar navigation. I have my background image styles set to the main div like so:
const styles = makeStyles(theme => ({
backgroundStyle: {
flexGrow: 1,
padding: theme.spacing(3),
height: '100vh',
textAlign: 'center',
backgroundImage: `url(${Background})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundSize: "cover",
backgroundAttachment: "fixed",
[theme.breakpoints.down('md')]: {
height: '100%'
}
}
height: '100vh' works good until I select a navigation item that stretches beyond the view height, which cuts off the background image. Setting the height to height: '100%' fixes this but for a navigation item that doesn't have much content, the background image does not fill the entire screen. I having the same issues too when switching to a responsive view.
I set up a conditional to handle this:
return <main className={navListItem === 'Topic1' ? backgroundStyle : backgroundStyle2 }>
But it feels like I'm repeating myself because I'm creating another class called backgroundStyle2 that contains all the same styles only height is set to '100%' instead of '100vh'
I'm thinking there has to be an easier way to make the background image change depending on page the content besides using '100%' or '100vh' but I can't figure it out
If you want to have at least 100vh height but also to extend that height according to the content if the content's height is greater than the viewport height, you should use minHeight:100vh; height:100%
const styles = makeStyles(theme => ({
backgroundStyle: {
flexGrow: 1,
padding: theme.spacing(3),
height: '100%',
minHeight:'100vh',
textAlign: 'center',
backgroundImage: `url(${Background})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundSize: "cover",
backgroundAttachment: "fixed",
[theme.breakpoints.down('md')]: {
height: '100%'
}
}
Stack: Meteor + React + MUI
Here's my full code of my 'main' renderer components:
// Sorry for not giving material-UI CSS,
// cause it cannot be served as stand-alone CSS
render() {
return (
<div className = "container">
<AppBar title = "test" />
<Tabs /> // Tab contents goes here
<RefreshIndicator
left={70} // Required properties
top={0} // Required properties
status="loading"
style={{
display: 'inline-block',
position: 'relative',
margin: '0 auto' }} />
</div>
);
},
I want to make Refresh Indicator horizontally center aligned beneath of myTabs like this whirling circle in this picture :
In the document of MUI here, this indicator comes with following styles:
display: 'inline-block',
position: 'relative',
With this styles I cant align it center horizontally, and without this styles, I can`t even locate it where I wanted.
What I have tried :
margin: 0 auto --> failed
text-align: center --> failed
display: flex --> failed
combination of 1 & 2 --> failed
left={$(window).width/2-20} --> This works but I'd like to use CSS only
The solution below centres progress indicator without any hacky calculations that cause element to be offset:
<div style={{display: 'flex', justifyContent: 'center'}}>
<RefreshIndicator status="loading" />
</div>
Here is how I did to ensure it's horizontally centered. Works great for me.
Set the parent component style to position: 'relative'.
Set the refresh indicator style to marginLeft: '50%', and left={-20} (assuming the size is 40).
here is the code (I put it in a CardText component).
...
<CardText style={{position: 'relative'}}>
<RefreshIndicator
size={40}
left={-20}
top={10}
status={'loading'}
style={{marginLeft: '50%'}}
/>
</CardText>
...
In MUI v5, there is a Stack component which serves as a flexbox container. By default the direction is column, to center it horizontally you can set alignItems to center:
<Stack alignItems="center">
<CircularProgress />
</Stack>
Live Demo
circularprocess in material ui and text middle of page stackoverflow
<div style={{ alignItems: "center", display: "flex", justifyContent: "center", height: "100vh", width: "100vw" }}>
<CircularProgress />
<span style={{ justifyContent: "center", position: "fixed", top: "55%" }}>Loading...please wait</span>
</div>[![enter image description here][1]][1]
The Backdrop Component will place the progress indicator in the center and also can add a dimmed layer over your application. This component is available with MUI V5.
<Backdrop open={enabled} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="secondary" /></Backdrop>