Skip to content

Commit

Permalink
fix responsive 'stacked' view styling issues
Browse files Browse the repository at this point in the history
  • Loading branch information
gregnb committed Dec 29, 2017
1 parent fa8d33d commit 0debb9b
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 8 deletions.
8 changes: 4 additions & 4 deletions src/MUIDataTableBody.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const defaultBodyStyles = {
const defaultBodyRowStyles = {
root: {},
responsiveStacked: {
"@media all and (max-width: 960px)": {
"@media screen and (max-width: 960px)": {
border: "solid 2px rgba(0, 0, 0, 0.15)",
},
},
Expand All @@ -26,11 +26,11 @@ const defaultBodyRowStyles = {
const defaultBodyCellStyles = {
root: {},
responsiveStacked: {
"@media all and (max-width: 960px)": {
"@media screen and (max-width: 960px)": {
display: "block",
fontSize: "16px",
position: "relative",
paddingLeft: "50%",
paddingLeft: "calc(50% - 8px)",
"&:before": {
position: "absolute",
top: "6px",
Expand Down Expand Up @@ -85,7 +85,7 @@ class MUIDataTableBody extends React.Component {
}

let stackStyles = defaultBodyRowStyles;
const breakpoint = "@media all and (max-width: 960px)";
const breakpoint = "@media screen and (max-width: 960px)";

columns.forEach((column, index) => {
stackStyles["responsiveStacked"][breakpoint]["& td:nth-of-type(" + (index + 1) + "):before"] = {
Expand Down
2 changes: 1 addition & 1 deletion src/MUIDataTableHead.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { getStyle, DataStyles } from "./DataStyles";

const defaultHeadStyles = {
responsiveStacked: {
"@media all and (max-width: 960px)": {
"@media screen and (max-width: 960px)": {
display: "none",
},
},
Expand Down
17 changes: 17 additions & 0 deletions src/MUIDataTablePagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,18 @@ const defaultPaginationStyles = {
padding: "0px 24px 0px 24px",
},
},
toolbar: {},
selectRoot: {},
"@media screen and (max-width: 400px)": {
toolbar: {
"& span:nth-child(2)": {
display: "none"
}
},
selectRoot: {
marginRight: "8px"
}
},
};

class MUIDataTablePagination extends React.Component {
Expand Down Expand Up @@ -46,6 +58,11 @@ class MUIDataTablePagination extends React.Component {
<TableRow>
<TablePagination
className={paginationStyles.root}
classes={{
caption: paginationStyles.caption,
toolbar: paginationStyles.toolbar,
selectRoot: paginationStyles.selectRoot
}}
count={count}
rowsPerPage={rowsPerPage}
page={page}
Expand Down
6 changes: 3 additions & 3 deletions src/MUIDataTableToolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const defaultToolbarStyles = {
};

export const responsiveToolbarStyles = {
"@media all and (max-width: 960px)": {
"@media screen and (max-width: 960px)": {
titleRoot: {},
titleText: {
fontSize: "16px",
Expand All @@ -66,7 +66,7 @@ export const responsiveToolbarStyles = {
textAlign: "right",
},
},
"@media all and (max-width: 600px)": {
"@media screen and (max-width: 600px)": {
root: {
display: "block",
},
Expand All @@ -80,7 +80,7 @@ export const responsiveToolbarStyles = {
textAlign: "center",
},
},
"@media all and (max-width: 480px)": {},
"@media screen and (max-width: 480px)": {},
};

export const defaultViewColStyles = {
Expand Down

0 comments on commit 0debb9b

Please sign in to comment.