may I ask whether there is a way to make the material-ui Pagination responsive??
From the official API doc, there are only 3 sizes optional, but I want to make it responsive as my other elements.
<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />
I want to make it sth like size="3vw", but it seems not working...
try Mui-selected.
like this:
const useStyles = makeStyles((theme) =>({
root: {
'& .Mui-selected': {
width: 'somethin',
height:'any size you need',
},
}),
);
const classes = useStyles();
return <Pagination
count={10}
className={classes.root}
renderItem={(item)=> <PaginationItem {...item}
classes={{selected:classes.selected}} />}
/>
Sorry #Nafis, I am not using makeStyles in my small react project... So I didn't try your solution, but appreciate your answer!
On the other hand, I kind of worked it out with overwrite the css of material UI which you can find out from developer tool.
This time I just need to make it more compact when the it is in a small screen, so I did something like below:
#media screen and (max-width:512px) {
.css-rppfq7-MuiButtonBase-root-MuiPaginationItem-root{
margin: 0 0;
min-width: 35px;
height: 35px;
border-radius: 17.5px;
}
}
Hopefully it could provide you some hints if you face similar difficulties.
Related
I'm trying to implement an Accordion component with Material UI.
The problem I'm facing is that a gray line is automatically inserted above the component although I prefer white background. How can I remove it? Here is demo code.Material UI accordion component demo
With the release of Material-UI v5.0.0-beta.0, custom styling has become much easier via use of the new sx prop.
The sx prop may be used on all Material-UI components as of v5. In our world, this has eliminated the need for hack-ish style overrides and custom classes.
Here's how to remove the "line above the accordion" with the sx={} prop.
return (
<Accordion
disableGutters
elevation={0}
sx={{
'&:before': {
display: 'none',
}
}}>
<AccordionSummary expandIcon={<ExpandMore/>}>
...your summary here...
</AccordionSummary>
<AccordionDetails sx={{ maxWidth: '480px' }}>
...your details here...
</AccordionDetails>
</Accordion>
);
Note that I've passed the sx prop to <AccordionDetails/> as well.
You must pass an object to sx so you're always going to have a double set of curly braces...
sx={{ borderBottom: '1px solid #dddddd', borderRadius: '4px' }}
To make gray line white you have to override the css classes of Accordion element.
The grey line comes from .MuiAccordion-root:before style. So at first change Accordion props adding classes props like:
...
<Accordion
elevation={0}
classes={{
root: classes.MuiAccordionroot
}}
>
...
And then on your useStyles add:
MuiAccordionroot: {
"&.MuiAccordion-root:before": {
backgroundColor: "white"
}
}
and grey line becames white. Here your code modified.
Try adding some css file and access this class MuiAccordion-root:before and change it's height to 0px. It's the pseudo-element that's showing the gray line above the Accordian.
// in my TS project i did it like this:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
test: {
'&:before': {
display: 'none',
},
);
<Accordion
classes={{
root: classes.test,
}}
expanded={expanded}
>
To remove line between Accordion summary and Accordion details you just need to pass borderBottom='none !important'
const useStyles = makeStyles({
Summary:{
borderBottom:'none !important'
});
const AccordionComp=()=>{
const classes = useStyles();
return(
<Accordion>
<AccordionSummary className={classes.Summary}>
......
</AccordionSummary>
<AccordionDetails>......</AccordionDetails>
</Accordian>
)}
export default AccordionComp;
You can wrap the Accordion component in a div and it will remove the line. It comes from a :before property that I imagine is helpful when you have more than one in a row to visually divide.
I'm trying to configure the style/css of my Antd React app to be mobile ready.
My main menu uses the Reactive Sider Menu seen here.
My issue is when I'm viewing with a mobile viewport it's kinda ugly and it squashes everything outside of the menu. And the little tab to expand/condense the menu covers some of my other components.
I'd much prefer the design that they have in the Ant Design Pro demo.
But I'm not sure how to create this exactly. Has anyone attempted it before? It seems to use a Drawer when it's in a mobile viewport as opposed to using the Sider in the Layout API.
Figured this out.
Essentially my solution (not sure if this is what they actually did in Ant Design Pro) is to use the Reactive Sider Menu example for the desktop and use a Drawer for mobile.
The same Toggle button in the Reactive Sider Menu example can hide/close the Sider (in Desktop) and Drawer (in mobile).
The trick was using CSS Media Queries to hide the Drawer in Desktop and hide the Sider in mobile so each could do their thing.
CSS
.hideOnMobile {
display: none;
}
#media only screen and (min-width: 768px) {
.hideOnMobile {
display: block;
}
}
.hideOnDesktop {
display: block;
}
#media only screen and (min-width: 768px) {
.hideOnDesktop {
display: none;
}
}
App.js
const App = () => {
// sider and drawer toggle
const [isToggled, setToggled] = useState(false);
const toggleTrueFalse = () => setToggled(!isToggled);
const onClose = () => {
setToggled(false);
};
return (
<Layout style={{ minHeight: "100vh" }}>
<Drawer
placement="left"
onClose={onClose}
closable={false}
visible={isToggled}
className="hideOnDesktop"
bodyStyle={{ backgroundColor: "#001529", padding: "0" }}
>
<Navbar />
</Drawer>
<Sider
breakpoint="lg"
collapsedWidth="0"
collapsed={isToggled}
onBreakpoint={(broken) => {
setToggled(broken);
}}
className="hideOnMobile"
>
<Navbar />
</Sider>
<Layout className="site-layout">
<Header
className="site-layout-background"
style={{ padding: 0 }}
>
<Row>
{React.createElement(
isToggled ? MenuUnfoldOutlined : MenuFoldOutlined,
{
className: "trigger",
onClick: toggleTrueFalse,
}
)}
<TopNavbar />
</Row>
</Header>
...
Also per the Antd docs for the Drawer component you can use the bodyStyle prop to set the background color and remove the padding so the menu sits flush to the sides of the Drawer.
I'm building a login Component in React, and trying to add the brand image. When I do this, I'm getting a huge amount of white space underneath it.
I've been working on this for a bit now, and I've discovered that, when I look in the dev tools, I can make headway by modifying this mysterious div that seems to be created by Material-UI, the front-end framework I'm using.
When I look into this in the dev tools, I find that there's a div with the attribute padding-top: calc(100%) which, when modified to something like padding-top: calc(30%), reduces the size of this whitespace underneath the image.
I've also tried some of the basic layout solutions suggested in many of the answers to similar questions here on SO, but none of them make a difference. It seems that this padding issue is at the heart of the problem.
The Problem
Because I don't know what's creating this div, I'm not able to override the padding to work towards a solution. I've tried modifying paddingTop and padding with the !important tag in the styling of both the image, and the parent element of the image.
Code Sample
<Paper variant='outlined' style={{ width: '380px' }}>
<Box m={4}>
<Image
src='../static/images/TextLogo.svg'
imageStyle={{
height: 'auto',
width: '100%',
}}
/>
</Box>
...
Stack
"#material-ui/core": "^4.0.0-alpha.8",
"material-ui-image": "^3.2.3",
"next": "^8.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
Thanks. I'd appreciate your help!
The <div> with the padding-top and other styles is coming from the Image component that you are using from material-ui-image.
Below is the overall structure rendered by that Image component:
<div
style={styles.root}
onClick={onClick}
>
{image.src && <img
{...image}
style={styles.image}
onLoad={this.handleLoadImage}
onError={this.handleImageError}
/>}
<div style={styles.iconContainer}>
{!disableSpinner && !this.state.imageLoaded && !this.state.imageError && loading}
{!disableError && this.state.imageError && errorIcon}
</div>
</div>
padding-top is part of the styles in styles.root.
styles.root:
const styles = {
root: {
backgroundColor: color,
paddingTop: `calc(1 / ${aspectRatio} * 100%)`,
position: 'relative',
...style
},
When padding-top is a percentage, it is a percentage of the width, so it is important to control the width of the container in order to have predictable behavior.
You can modify the padding-top by either explicitly overriding it via the style prop or by specifying the appropriate value in the aspectRatio prop. By default, this Image component is assuming square images (aspectRatio: 1).
Here is a working example demonstrating both ways of controlling padding-top:
import React from "react";
import Image from "material-ui-image";
import Box from "#material-ui/core/Box";
export default function App() {
return (
<>
<Box m={4} width={200}>
<Image
aspectRatio={1.5}
src="https://www.publicdomainpictures.net/pictures/10000/velka/black-monkey-11280155875i3QV.jpg"
/>
Something under image 1
</Box>
<Box m={4} width={200}>
<Image
style={{
paddingTop: "calc(66.7%)"
}}
src="https://www.publicdomainpictures.net/pictures/10000/velka/black-monkey-11280155875i3QV.jpg"
/>
Something under image 2
</Box>
</>
);
}
Slightly related answer (with regard to the use of padding-top): A good way to handle #material-ui Skeleton scaling within a variable height grid row?
I've been following the official course on egghead (https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd and sample working code: https://codesandbox.io/s/52p60qqlpp) and wrote this:
https://codesandbox.io/s/00k3rwq3qn
However, it doesn't actually drag and drop. I've looked through several examples, and I can't spot the issue in my code. I would really appreciate someone feedback on what my mistake is.
Thanks
I don't think using inline styles work that well with Draggable in react-beautiful-dnd. If you want to apply styling to the Task component you should use styled-components, this sample shows it working if you remove the inline style configuration https://codesandbox.io/s/6lq0854m6r.
Rather use the styled-components
import React from "react";
import styled from "styled-components";
import { Draggable } from "react-beautiful-dnd";
const Container = styled.div`
margin: 10px;
border: 1px solid black;
`;
export default class Task extends React.Component {
render() {
return (
<Draggable draggableId={this.props.task.id} index={this.props.index}>
{(provided, snapshot) => (
<Container
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
{this.props.task.content}
</Container>
)}
</Draggable>
);
}
}
EDIT:
It seems you can apply inline styles to the draggable, but then you should extend the DraggableProps.styles within the child function of the Draggable component, see here.
{(provided, snapshot) => (
const style = {
margin: "10px",
border: "1px solid black",
...provided.draggableProps.style,
};
return <div
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
style={style}
>
{this.props.task.content}
</div>
)}
#Ian 's answer did not work well for me.So I checked the react-beautiful-dnd's documents and came up with another workaround to solve the issue:
const styles = {
backgroundImage: `url(${background.MEDIUM})`,
backgroundSize: 'cover',
};
...
{(provided) => {
const otherProps = {
...provided.draggableProps,
style: {
...provided.draggableProps.style,
...styles,
},
};
return (<div
{...otherProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
{this.props.task.content}
</div>)
}}
If you are trying to build draggable list with React functional component using official document and not using styled-components library then it want work. It will give you some error. So apply style using className attribute and then error will go away and also code will start working.
Have a site that I am trying to shrink down the table to fit on a mobile screen and grow when necessary. I am able to get it to shrink and to drop the horizontal scroll bars, however, the footer is giving me issues. The footer content doesn't seem to follow along with the rest. It appears that it is part of their code to have it align right. Is there anyway to change this?
Code:
<TableFooter classes={classes.footer}>
<div className={classes.footer}></div>
<TablePagination
className={classes.footer}
colSpan={1}
count={data.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
ActionsComponent={TablePaginationActionsWrapped}
/>
</TableFooter>
footer:{
justifyContent: 'left',
width: "10px",
textAlign: 'left'
}
Buttons are pushed to the left using a 100% width div spacer. You can override this spacer to have no width. Here is quick-and-dirty:
.MuiTablePagination-spacer {
flex: none !important;
}
A better way is to define a table-specific (or app-wide) override in a theme:
import { ThemeProvider } from "#material-ui/styles";
import { createMuiTheme } from '#material-ui/core/styles';
...
const tableTheme = createMuiTheme({
overrides: {
MuiTablePagination: {
spacer: {
flex: 'none'
}
}
}
});
...
<ThemeProvider theme={tableTheme}>
<Table>
...
</Table>
</ThemeProvider>
For more information on the supported styles, head over here https://next.material-ui.com/es/api/table-pagination/ .
For me it was enough to set width: '10px' in TablePagination style property, however my structure differs a little:
<Paper>
<Table>
<TableHead>
...
</TableHead>
<TableBody>
...
</TableBody>
</Table>
<TablePagination style={{width:'10px'}} .../>
</Paper>
Just write
<TablePagination style={{ display:"flex" }} .../>
If you just want to change alignment on a single pagination instance and not the whole app (using theme overrides as described by Maksym above):
apply a className to your TablePagination:
<TablePagination
count={5}
onChangePage={handleChangePage}
page={page}
rowsPerPage={perPage}
rowsPerPageOptions={[]}
className={classes.pagination}
/>
and define the pagination class like:
const useStyles = makeStyles((theme) => ({
pagination: {
"& .MuiTablePagination-spacer": {
display: "none",
},
},
}));
this assumes you've defined classes inside your JSX.Element:
const classes = useStyles();
Thowing a padding=0px in there resolved it. After throwing in all the stuff above.