I have a bootstrap tab bar as follows:
<div>
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" style={style1}>
<Tab eventKey="policies" title="Policies" style={style2}>
slakf lsjdflkadsjf lkadkfdksjflk lakdffj lsdjlk lkdfk kldnfkjk lasdfj lksdfjkajfl lkadjflkadlkf ksdjflkajsf
</Tab>
<Tab eventKey="reporting" title="Reporting" style={style2}>
d
</Tab>
<Tab eventKey="dashboard" title="Dashboard" style={style2}>
f
</Tab>
<Tab eventKey="editProfile" title="Manage Profile" style={style2}>
f
</Tab>
<Tab eventKey="community" title="Community" style={style2}>
f
</Tab>
</Tabs>
</div>
I am trying to figure out how to space the tabs evenly across the full width of the div. Currently they are bunched on the left hand side. I can't even force them on the right side.
Reducing the width of the Tabs element also reduces the width of the tab content - which I want to avoid.
Currently, I have tried:
const style1 = {
fontSize: '90%',
marginLeft: 'auto',
textAlign: 'center',
marginRight: 'auto',
float: 'justify',
width: '80%'
}
const style2 = {
textAlign: 'center',
}
I have read other posts where users have given up trying and they suggest to use tables instead of tabs. Is there an option that allows the use of tabs with evenly justified width of tabs?
Just include the words fill and justify within the tab (see below for example):
<Tabs fill justify defaultActiveKey="home" id="uncontrolled-tab-example" className={styles.tabLinkContainer}>
You can try flex to achieve this,
const style1 = {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
margin: 0;
padding: 0;
}
const style2 = {
flex: 1;
text-align: center;
}
Related
The below UI is of antd tabs. I need to expand the tab item but for some reason it doesn't work as expected.
Current UI:
Desired UI:
Code:
const App = () => (
<Tabs
defaultActiveKey="1"
onChange={onChange}
style={{ display: "flex", justifyContent: "space-between" }}
>
<TabPane tab="Details" key="1" style={{ width: "50%" }}>
Content of Tab Pane 1
</TabPane>
<TabPane tab="Updates" key="2">
Content of Tab Pane 2
</TabPane>
</Tabs>
);
Even though I have given justify-content:space-between or custom width it doesn't change.
Codesandbox: https://codesandbox.io/s/basic-antd-4-22-4-forked-hxise4?file=/demo.js
According to the docs you should use tabBarStyle instead of style. You can read more here: https://ant.design/components/tabs/
EDIT:
by applying tabBarStyle the CSS properties are appended to the upper div (the red container). In order to work it should be applied to the bottom div (the blue container):
You can try custom styling via CSS
EDIT #2:
This worked fine for me:
.ant-tabs-nav-list {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.ant-tabs-tab {
width: 50%;
justify-content: center;
}
I have grid from material UI:
Item element
const Item = styled(Paper)(({theme}) => ({
...theme.typography.body2,
padding: theme.spacing(2),
textAlign: 'center',
color: "black",
}));
Structure
<div className="wrapper">
<Typography variant="h3" component="h3">
List of friends
</Typography>
<div className="friends">
<Grid container
direction="row"
rowSpacing={1}
spacing={{xs: 2, md: 3}} columns={{xs: 4, sm: 8, md: 12}}
alignItems="center"
justifyContent="center"
>
{
friends.map((friend, i) => {
return <Grid item xs={4} sm={6} md={6} mt={5}>
<Item className="item"><span>{i}</span>{friend.name}</Item>
</Grid>
})
}
</Grid>
</div>
</div>
With css:
.wrapper{
width: 100%;
position: relative;
align-items: center;
display: flex;
flex-direction: column;
background:#eaeaea
}
.friends{
position: relative;
width: 75%;
}
It looks like this:
However, i would like the number of friend, to be on the left, and highlighted like:
However, how to stile the <span> element to do this? The when i style span to be
span{
position: absolute;
left: 0
width:25%;
height: 100%
}
Then the span is somewhere else, as the material ui uses lot of styling that makes this hell.
when i change it to:
{
countries.map((friend, i) => {
return <Grid item xs={4} sm={6} md={6} mt={5} >
<span> i </span>
<Item className="item">{friend.name}</Item>
</Grid>
})
}
I would need to make adjustments to the Grid elements, adding position relative and such, but im not sure how this would work with responsivity.
Is there simple way to do this?
Or is there any other component i can use instead of Item(Paper) element?
Thanks for help!
You can use display: grid on the Paper element, like so:
<Paper
sx={{
display: 'grid',
grid: 'auto / 25% 75%',
height: 50,
'& > div': {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
},
}}
>
<Box>1</Box>
<Box>Name</Box>
</Paper>
Alternatively, you can do it with flex: 1 and flex: 3, but I think the grid method is easier to set up, since all the logic is in one line.
I need to make fixed my tab bar headers which is opening in a drawer. Here is what I have tried.
Antd recommends react-sticky lib. Somehow it does not work. Maybe the reason is drawer scroll etc. Even if I hide the drawer scroll and create a scroll for tab body, sticky is not worked.
Ant Sticky Referans : https://ant.design/components/tabs/
react-sticky package : https://www.npmjs.com/package/react-sticky
position: -webkit-sticky;
position: sticky;
top: 0;
I also tried hard css but it does not work as well.
I look for Antd how handles the subject : fixed/sticky [sth]. So I find out Header from Layout component. Setting the style position fixed solved my problem. May be this is not a perfect solution but at least now in a drawer Tab Bar Headers are fixed.
Final codes are :
const renderTabBar = (props, DefaultTabBar) => (
<Layout>
<Header style={{ position: 'fixed', zIndex: 1, top: 0, padding: 0, width: '100%',
background: 'white' }}>
<DefaultTabBar {...props} style={{
top: 20,
}} />
</Header>
</Layout>
);
<Drawer
placement="right"
onClose={onClose}
visible={visible}
getContainer={false}
title={<> </>}
style={{ position: 'absolute' }}
width={"25%"}
keyboard={true}
closable={true}
closeIcon={<CloseOutlined />}
mask={false}
maskClosable={false}
headerStyle={{ border: 'none' }}>
<Tabs tabPosition="top"
renderTabBar={renderTabBar}
animated={true}
style={{ paddingTop: 20 }}>
{tabBody}
</Tabs>
</Drawer >
I'm using flexbox, React Material in my React App and i wanted to align the searchbar and the clear button on the same line and with space on each other.
Pls see this link
CLICK HERE
<div className={classes.searchBarSection}>
<Paper component="form" className={classes.searchBar}>
<InputBase
className={classes.input}
placeholder="Search..."
inputProps={{ "aria-label": "search..." }}
/>
<IconButton
type="button"
className={classes.iconButton}
aria-label="search"
>
<SearchIcon />
</IconButton>
</Paper>
<Button variant="contained" size="small" color="primary">
Clear
</Button>
</div>
try this:
searchBarSection: {
display: "flex",
justifyContent: "space-between",
width: "300px"
},
adjust the width for how much space you want between them
this will look like:
add these styles, the width will give the searchBatSection breathing room to space the children. Experiment around with the justifyContent options to find your suit.
searchBarSection: {
width: "50%",
display: "flex",
justifyContent: "space-between"
},
Use grid
searchBarSection: {
display: 'grid',
gridTemplateColumns: '0.8fr 0.2fr',
gap: '12px',
},
https://codesandbox.io/s/material-demo-6w93i
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>