StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I quickly made some changes to your code to give you an idea. <a href="http://jsfiddle.net/sEunS/3/" rel="nofollow">http://jsfiddle.net/sEunS/3/</a></p> <p>You want your buttons in your buttonset to be ordered because the buttonset gives the outer buttons round corners and the inner buttons get 'squished' margins to be close together. Without the right ordering, the buttonset will always not look right.</p> <p>Floating the radio's labels will cause the radios to be unordered in the buttonset. I suggest floating the radio's containers instead of the labels. </p> <pre><code>#acqMode, #tdiDir { float: right; } </code></pre> <p>and remove the float on the .checkLabels as they are no longer needed</p> <pre><code>.checkLabel { //float: right; } </code></pre> <p>You should also keep your radio's labels together with the radio inputs. This is another ordering issue with buttonsets. </p> <pre><code><div id="acqMode"> <label class="checkLabel " for="area">Area</label> <input type="radio" class="value" name="acqMode" id="area"/> <label class="checkLabel" for="tdi">TDI</label> <input type="radio" class="value" name="acqMode" id="tdi" checked="checked"/> </div> </code></pre> <p>The last issue is you will need has to do with a clearfix. The buttonset is larger than the text on the same line, so the next line will not look straight without a clearfix. JQuery UI has a helper class </p> <pre><code>ui-helper-clearfix </code></pre> <p>I added this class to the line above that was uneven. The class goes on the parent of the last floated element. (try removing this class to get an idea of what I mean).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload