Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Responsive radio-checkbox grids</title>
- <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <style type="text/css">
- /* global */
- * {-moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
- body {font-family: sans-serif; font-size: 13px;}
- /* demo only */
- h1 {font-size: 150%;}
- h2 {font-size: 125%; margin: 0.5em 0 .25em;}
- ul {margin: 0;}
- #problems li + li {margin-top: 6px;}
- blockquote {font-family: monospace; margin: 0 20px;}
- form {border-top: 1px solid #ccc; margin-top: 10px; padding-top: 2px}
- /* layout */
- .FieldContainer {display: block; margin: 10px 0 0; white-space: nowrap;}
- .FieldLabelContainer {display: inline-block; font-weight: bold; padding: 5px 4px; text-align: right; width: 120px;}
- .FieldControlContainer {border: 1px solid #ccc; border-radius: 8px; display: inline-block; padding: 4px 8px; vertical-align: top;}
- .FieldControlContainer label {float: left; padding-right: 20px;}
- .FieldControlContainer input {margin: 2px 0;}/* cosmetic tweak only */
- .ControlGrid_Control {}
- .ControlGrid_Text {display: inline-block; margin: 0 2.25em 6px 0; vertical-align: top; white-space: normal;}
- /* field-specific "column" width and max-width of whole grid */
- #field1_container .FieldControlContainer label {width: 200px;}
- #field1_container .FieldControlContainer {max-width: 618px;} /* (200 * 3) + (8 * 2) + 2 = (control width * number of columns) + (L&R padding * 2) + 2px fudge factor */
- #field2_container .FieldControlContainer label {width: 150px;}
- #field2_container .FieldControlContainer {max-width: 768px;} /* (150 * 5) + (8 * 2) + 2 = (control width * number of columns) + (L&R padding * 2) + 2px fudge factor */
- </style>
- </head>
- <body>
- <h1>Responsive radio-checkbox grids</h1>
- <h2>Objectives</h2>
- <ul id="objectives">
- <li>No tables</li>
- <li>Controls for a given field lay themselves out on a grid, i.e., they look row and column aligned</li>
- <li>Responsive, i.e., controls stack vertically as needed when the window gets narrower</li>
- <li>Settable width of columns and max width of control grid</li>
- <li>Reasonable appearance</li>
- </ul>
- <h2>In general, it works as designed</h2>
- <ul>
- <li>Controls are on a grid (though a sparsely populated one)</li>
- <li>
- They reflow dynamically as you resize the window narrower<br>
- A table-based layout couldn't do that.
- </li>
- <li>Behavior is pretty much identical in current versions of Firefox, Chrome, and IE</li>
- </ul>
- <h2>There are things I don't know how to fix</h2>
- <ul id="problems">
- <li>
- The biggest problem is the way the controls wrap down<br>
- 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>
- I'm afraid it's unavoidable, so I'm posting this to learn if if there's a better way.
- </li>
- <li>
- 'Wrapping' doesn't happen early enough as the window narrows<br>
- The label texts get obscured, and the control container overflows out of the window.<br>
- </li>
- </ul>
- <form>
- <div class="FieldContainer" id="field1_container">
- <div class="FieldLabelContainer">Subscriptions</div>
- <div class="FieldControlContainer">
- <label>
- <input checked id="field1_1" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="1"/>
- <span class="ControlGrid_Text">1 Boys Life</span>
- </label>
- <label>
- <input id="field1_2" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="2"/>
- <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>
- </label>
- <label>
- <input id="field1_3" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="3"/>
- <span class="ControlGrid_Text">3 Time</span>
- </label>
- <label>
- <input checked id="field1_4" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="4"/>
- <span class="ControlGrid_Text">4 Modern Drummer</span>
- </label>
- <label>
- <input id="field1_5" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="5"/>
- <span class="ControlGrid_Text">5 Web Worker Daily Blast</span>
- </label>
- <label>
- <input id="field1_6" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="6"/>
- <span class="ControlGrid_Text">6 Musician</span>
- </label>
- <label>
- <input id="field1_7" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="7"/>
- <span class="ControlGrid_Text">7 New York Times</span>
- </label>
- <label>
- <input id="field1_8" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="8"/>
- <span class="ControlGrid_Text">8</span>
- </label>
- <label>
- <input id="field1_9" name="fic_1447_5617" type="checkbox" class="ControlGrid_Control" value="9"/>
- <span class="ControlGrid_Text">9</span>
- </label>
- </div>
- </div>
- <div class="FieldContainer" id="field2_container">
- <div class="FieldLabelContainer">Favorite Lizard</div>
- <div class="FieldControlContainer">
- <label>
- <input id="field2_1" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="1"/>
- <span class="ControlGrid_Text">1 Gecko lorem ipsum</span>
- </label>
- <label>
- <input id="field2_2" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="2"/>
- <span class="ControlGrid_Text">2 Dolor sit amet</span>
- </label>
- <label>
- <input id="field2_3" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="3"/>
- <span class="ControlGrid_Text">3 Iguana praesent scelerisque massa at placerat elementum curabitur sit amet venenatis ipsum</span>
- </label>
- <label>
- <input id="field2_4" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="4"/>
- <span class="ControlGrid_Text">4 Chameleon</span>
- </label>
- <label>
- <input id="field2_5" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="5"/>
- <span class="ControlGrid_Text">5 Morbi id elit massa</span>
- </label>
- <label>
- <input id="field2_6" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="6"/>
- <span class="ControlGrid_Text">6 Maecenas fringilla</span>
- </label>
- <label>
- <input id="field2_7" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="7"/>
- <span class="ControlGrid_Text">7 Basilisk</span>
- </label>
- <label>
- <input id="field2_8" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="8"/>
- <span class="ControlGrid_Text">8 Tuatara quam enim ornare urna</span>
- </label>
- <label>
- <input id="field2_9" name="fic_1447_6631" type="radio" class="ControlGrid_Control" value="9"/>
- <span class="ControlGrid_Text">9 Suscipit faucibus nunc dolor vel arcu</span>
- </label>
- </div>
- </div>
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement