Skip to content
This repository
Browse code

Fixes #2270 and #2159 - Adjusted grid blocks percentage width to prev…

…ent wrapping on older browsers and set it back for modern browsers. Minor adjustment for grid-a to fix BB5 issue.
  • Loading branch information...
commit a6a0ba4b24d39486237b4e4c2553db9713e7305c 1 parent b322c34
Jasper de Groot authored June 12, 2012

Showing 1 changed file with 12 additions and 10 deletions. Show diff stats Hide diff stats

  1. 22  css/structure/jquery.mobile.grid.css
22  css/structure/jquery.mobile.grid.css
... ...
@@ -1,22 +1,24 @@
1 1
 /* content configurations. */
2 2
 .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
3  
-.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}
  3
+.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px; }
4 4
 
5 5
 /* grid solo: 100 - single item fallback */
6  
-.ui-grid-solo .ui-block-a { width: 100%; float: none; }
7  
-
  6
+.ui-grid-solo .ui-block-a { display: block; float: none; }
  7
+/* Lower percentages for older browsers (i.e. IE7) to prevent wrapping */
8 8
 /* grid a: 50/50 */
9  
-.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; }
  9
+.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.955%; }
  10
+/* -.5px to fix BB5 wrap issue. */
  11
+.ui-grid-a > :nth-child(n) { width: 50%; margin-right: -.5px; }
10 12
 .ui-grid-a .ui-block-a { clear: left; }
11  
-
12 13
 /* grid b: 33/33/33 */
13  
-.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.333%; }
  14
+.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c { width: 33.3%; }
  15
+.ui-grid-b > :nth-child(n) { width: 33.333%; }
14 16
 .ui-grid-b .ui-block-a { clear: left; }
15  
-
16 17
 /* grid c: 25/25/25/25 */
17  
-.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 25%; }
  18
+.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d { width: 24.955%; }
  19
+.ui-grid-c > :nth-child(n) { width: 25%; }
18 20
 .ui-grid-c .ui-block-a { clear: left; }
19  
-
20 21
 /* grid d: 20/20/20/20/20 */
21  
-.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 20%; }
  22
+.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.955%; }
  23
+.ui-grid-d > :nth-child(n) { width: 20%; }
22 24
 .ui-grid-d .ui-block-a { clear: left; }

0 notes on commit a6a0ba4

Please sign in to comment.
Something went wrong with that request. Please try again.