Advertisement
Guest User

Responsive radio-checkbox grids

a guest
Jul 24th, 2014
189
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.94 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Responsive radio-checkbox grids</title>
  5.     <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <style type="text/css">
  7.         /* global */
  8.         * {-moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
  9.         body {font-family: sans-serif; font-size: 13px;}
  10.  
  11.         /* demo only */
  12.         h1 {font-size: 150%;}
  13.         h2 {font-size: 125%; margin: 0.5em 0 .25em;}
  14.         ul {margin: 0;}
  15.         #problems li + li {margin-top: 6px;}
  16.         blockquote {font-family: monospace; margin: 0 20px;}
  17.         form {border-top: 1px solid #ccc; margin-top: 10px; padding-top: 2px}
  18.  
  19.  
  20.         /* layout */
  21.  
  22.         .FieldContainer {display: block; margin: 10px 0 0; white-space: nowrap;}
  23.         .FieldLabelContainer {display: inline-block; font-weight: bold; padding: 5px 4px; text-align: right; width: 120px;}
  24.  
  25.         .FieldControlContainer {border: 1px solid #ccc; border-radius: 8px; display: inline-block; padding: 4px 8px; vertical-align: top;}
  26.         .FieldControlContainer label {float: left; padding-right: 20px;}
  27.         .FieldControlContainer input {margin: 2px 0;}/* cosmetic tweak only */
  28.  
  29.         .ControlGrid_Control {}
  30.         .ControlGrid_Text {display: inline-block; margin: 0 2.25em 6px 0; vertical-align: top; white-space: normal;}
  31.  
  32.  
  33.         /* field-specific "column" width and max-width of whole grid */
  34.         #field1_container .FieldControlContainer label {width: 200px;}
  35.         #field1_container .FieldControlContainer {max-width: 618px;} /* (200 * 3) + (8 * 2) + 2 = (control width  * number of columns) + (L&R padding * 2) + 2px fudge factor */
  36.         #field2_container .FieldControlContainer label {width: 150px;}
  37.         #field2_container .FieldControlContainer {max-width: 768px;} /* (150 * 5) + (8 * 2) + 2 = (control width * number of columns) + (L&R padding * 2) + 2px fudge factor */
  38.     </style>
  39. </head>
  40. <body>
  41.  
  42. <h1>Responsive radio-checkbox grids</h1>
  43.  
  44. <h2>Objectives</h2>
  45. <ul id="objectives">
  46.     <li>No tables</li>
  47.     <li>Controls for a given field lay themselves out on a grid, i.e., they look row and column aligned</li>
  48.     <li>Responsive, i.e., controls stack vertically as needed when the window gets narrower</li>
  49.     <li>Settable width of columns and max width of control grid</li>
  50.     <li>Reasonable appearance</li>
  51. </ul>
  52.  
  53. <h2>In general, it works as designed</h2>
  54. <ul>
  55.     <li>Controls are on a grid (though a sparsely populated one)</li>
  56.     <li>
  57.         They reflow dynamically as you resize the window narrower<br>
  58.         A table-based layout couldn't do that.
  59.     </li>
  60.     <li>Behavior is pretty much identical in current versions of Firefox, Chrome, and IE</li>
  61. </ul>
  62.  
  63. <h2>There are things I don't know how to fix</h2>
  64. <ul id="problems">
  65.     <li>
  66.         The biggest problem is the way the controls wrap down<br>
  67.         Instead of dropping into the next "row", they fall against he next item to the left that comes down that far, logical but pretty odd.<br>
  68.         I'm afraid it's unavoidable, so I'm posting this to learn if if there's a better way.
  69.     </li>
  70.     <li>
  71.         'Wrapping' doesn't happen early enough as the window narrows<br>
  72.         The label texts get obscured, and the control container overflows out of the window.<br>
  73.     </li>
  74. </ul>
  75.  
  76. <form>
  77.     <div class="FieldContainer" id="field1_container">
  78.         <div class="FieldLabelContainer">Subscriptions</div>
  79.         <div class="FieldControlContainer">
  80.             <label>
  81.                 <input checked id="field1_1" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="1"/>
  82.                 <span class="ControlGrid_Text">1 Boys Life</span>
  83.             </label>
  84.             <label>
  85.                 <input id="field1_2" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="2"/>
  86.                 <span class="ControlGrid_Text">2 Life Lorem ipsum dolor sit amet consectetur adipiscing elit. Ut sed dignissim nibh. Integer id nisl ornare dictum arcu id</span>
  87.             </label>
  88.             <label>
  89.                 <input id="field1_3" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="3"/>
  90.                 <span class="ControlGrid_Text">3 Time</span>
  91.             </label>
  92.             <label>
  93.                 <input checked id="field1_4" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="4"/>
  94.                 <span class="ControlGrid_Text">4 Modern Drummer</span>
  95.             </label>
  96.             <label>
  97.                 <input id="field1_5" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="5"/>
  98.                 <span class="ControlGrid_Text">5 Web Worker Daily Blast</span>
  99.             </label>
  100.             <label>
  101.                 <input id="field1_6" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="6"/>
  102.                 <span class="ControlGrid_Text">6 Musician</span>
  103.             </label>
  104.             <label>
  105.                 <input id="field1_7" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="7"/>
  106.                 <span class="ControlGrid_Text">7 New York Times</span>
  107.             </label>
  108.             <label>
  109.                 <input id="field1_8" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="8"/>
  110.                 <span class="ControlGrid_Text">8</span>
  111.             </label>
  112.             <label>
  113.                 <input id="field1_9" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="9"/>
  114.                 <span class="ControlGrid_Text">9</span>
  115.             </label>
  116.         </div>
  117.     </div>
  118.     <div class="FieldContainer" id="field2_container">
  119.         <div class="FieldLabelContainer">Favorite Lizard</div>
  120.         <div class="FieldControlContainer">
  121.             <label>
  122.                 <input id="field2_1" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="1"/>
  123.                 <span class="ControlGrid_Text">1 Gecko lorem ipsum</span>
  124.             </label>
  125.             <label>
  126.                 <input id="field2_2" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="2"/>
  127.                 <span class="ControlGrid_Text">2 Dolor sit amet</span>
  128.             </label>
  129.             <label>
  130.                 <input id="field2_3" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="3"/>
  131.                 <span class="ControlGrid_Text">3 Iguana praesent scelerisque massa at placerat elementum curabitur sit amet venenatis ipsum</span>
  132.             </label>
  133.             <label>
  134.                 <input id="field2_4" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="4"/>
  135.                 <span class="ControlGrid_Text">4 Chameleon</span>
  136.             </label>
  137.             <label>
  138.                 <input id="field2_5" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="5"/>
  139.                 <span class="ControlGrid_Text">5 Morbi id elit massa</span>
  140.             </label>
  141.             <label>
  142.                 <input id="field2_6" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="6"/>
  143.                 <span class="ControlGrid_Text">6 Maecenas fringilla</span>
  144.             </label>
  145.             <label>
  146.                 <input id="field2_7" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="7"/>
  147.                 <span class="ControlGrid_Text">7 Basilisk</span>
  148.             </label>
  149.             <label>
  150.                 <input id="field2_8" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="8"/>
  151.                 <span class="ControlGrid_Text">8 Tuatara  quam enim ornare urna</span>
  152.             </label>
  153.             <label>
  154.                 <input id="field2_9" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="9"/>
  155.                 <span class="ControlGrid_Text">9 Suscipit faucibus nunc dolor vel arcu</span>
  156.             </label>
  157.         </div>
  158.     </div>
  159. </form>
  160.  
  161. </body>
  162. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement