[list-item] Fixed display problem with Single line checkboxes - Fixes #…

…854
mui · Jun 15, 2015 · 21678b7 · 21678b7
1 parent 1bb3cef
commit 21678b7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx
@@ -406,6 +406,21 @@ class ListsPage extends React.Component {
               Messages
             </ListItem>
           </List>
+          <ListDivider />
+          <List subheader="Hangout notifications">
+            <ListItem
+              leftCheckbox={<Checkbox />}>
+              Notifications
+            </ListItem>
+            <ListItem
+              leftCheckbox={<Checkbox />}>
+              Sounds
+            </ListItem>
+            <ListItem
+              leftCheckbox={<Checkbox />}>
+              Video sounds
+            </ListItem>
+          </List>
         </MobileTearSheet>
 
         <MobileTearSheet>

diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx
@@ -127,7 +127,11 @@ var ListItem = React.createClass({
       },
 
       leftCheckbox: {
-        left: 4
+        position: 'absolute',
+        display: 'block',
+        width: 24,
+        top: twoLine ? 24 : singleAvatar ? 16 : 12,
+        left: 16
       },
 
       rightToggle: {
@@ -170,7 +174,7 @@ var ListItem = React.createClass({
     this._pushElement(contentChildren, rightIcon, this.mergeStyles(styles.icons, styles.rightIcon));
     this._pushElement(contentChildren, leftAvatar, this.mergeStyles(styles.avatars, styles.leftAvatar));
     this._pushElement(contentChildren, rightAvatar, this.mergeStyles(styles.avatars, styles.rightAvatar));
-    this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.icons, styles.leftCheckbox));
+    this._pushElement(contentChildren, leftCheckbox, this.mergeStyles(styles.leftCheckbox));
     this._pushElement(contentChildren, rightToggle, this.mergeStyles(styles.rightToggle));
 
     if (this.props.children) contentChildren.push(this.props.children);