fix responsive 'stacked' view styling issues

gregnb · Dec 29, 2017 · 0debb9b · 0debb9b
1 parent fa8d33d
commit 0debb9b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/src/MUIDataTableBody.js b/src/MUIDataTableBody.js
@@ -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)",
     },
   },
@@ -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",
@@ -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"] = {

diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js
@@ -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",
     },
   },

diff --git a/src/MUIDataTablePagination.js b/src/MUIDataTablePagination.js
@@ -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 {
@@ -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}

diff --git a/src/MUIDataTableToolbar.js b/src/MUIDataTableToolbar.js
@@ -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",
@@ -66,7 +66,7 @@ export const responsiveToolbarStyles = {
       textAlign: "right",
     },
   },
-  "@media all and (max-width: 600px)": {
+  "@media screen and (max-width: 600px)": {
     root: {
       display: "block",
     },
@@ -80,7 +80,7 @@ export const responsiveToolbarStyles = {
       textAlign: "center",
     },
   },
-  "@media all and (max-width: 480px)": {},
+  "@media screen and (max-width: 480px)": {},
 };
 
 export const defaultViewColStyles = {