CODEWITHSUNDEEP
javascripthtmljquery-uiuser-interface
NindzAI
NindzAI

Reputation: 580

JQuery UI buttonset misbehaving

I am building a UI app using JQuery UI elements. I need radio buttons as part of the functionality. While using JQuery buttonset by itself works, once I try to incorporate it with the rest of UI elements they don't align properly:

http://jsfiddle.net/sEunS/2/

Including code here:

$(document).ready(function()
{
    $("button").button();
    $("#tdiDir").buttonset();
    $("#acqMode").buttonset();
});

<div id='primaryLatestControl'
class="ui-corner-top pacontainer"
style='padding: 4px; display: inline-block; '>

    <button id="setGain" class="button">Set</button>
    <span class="label">Gain Value</span>
    <input type="text" id="gainValue" class="value" value="2"></input> 

    <button id="setLineRate" class="button">Set</button>
    <span class="label">Line Rate, HZ</span>
    <input type="text" class="value" id="lineRateValue" value="3750"></input> 

    <button id="setExposeTime" class="button">Set</button>
    <span class="label">Exposure Time(ms)</span>
    <input type="text" class="value" id="exposeTimeValue" value="100"></input> 

    <button id="setTDI" class="button">Set</button>
    <span class="label">TDI Direction</span>
    <form>
        <div id="tdiDir">
            <label class="checkLabel" for="forward">Forward</label>
            <label class="checkLabel" for="reverse">Reverse</label>
            <input type="radio" class="value" name="tdiDir" id="forward" checked="checked"/>
            <input type="radio" class="value " name="tdiDir" id="reverse"/>    
        </div>
    </form>

    <button id="setAcqMode" class="button">Set</button>
    <span class="label">Acquisition Mode</span>
    <form>
        <div id="acqMode">
            <label class="checkLabel" for="tdi">TDI</label>
            <label class="checkLabel " for="area">Area</label>
            <input type="radio" class="value" name="acqMode" id="tdi" checked="checked"/>
            <input type="radio" class="value" name="acqMode" id="area"/>
        </div>
    </form>


.pacontainer {
    position: relative;
    width: 80%;
}

.label {
    float: left;
    margin: 10px;
}

.checkLabel {
    width: 100px;
    float: right;
    margin: 10px;
}

.endLine {
    clear: right;
}

.button {
    float: left;
    margin-left: 10px;
    clear: left;
}

.value {
    float: right;
    width: 45px;
    height: 20px;
    margin: 5px;
    background-image: none;
}

Upvotes: 0

Views: 517

Answers (1)

jcbelanger
jcbelanger

Reputation: 549

I quickly made some changes to your code to give you an idea. http://jsfiddle.net/sEunS/3/

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.

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. 

#acqMode, #tdiDir {
  float: right;
}

and remove the float on the .checkLabels as they are no longer needed

.checkLabel {
    //float: right;
}

You should also keep your radio's labels together with the radio inputs. This is another ordering issue with buttonsets. 

<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>

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 

ui-helper-clearfix

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).

Upvotes: 1

Related Questions