CODEWITHSUNDEEP
jquerycssjquery-uijquery-mobile
Vinod
Vinod

Reputation: 2311

Issue with adjusting position for grouped buttons in jquery mobile?

I have added the data-type="horizontal" attribute to the controlgroup container. Where I have added one select menu and one plus icon. so that the user select existing category or add new category. Now I want that "+" icon should always fix at right corner to margin remaining space should occupy the select box. My code is as follows,

<div data-role="controlgroup" data-type="horizontal">
                    <select name="select-choice-1" id="select-choice-1">
                     <option value="Select Category">Select Category</select>
                    </select>
                     <a href="" data-role="button" data-icon="plus" data-iconpos="notext">Add</a>
                  </div>

And my screen shot is as follows for above code. I want that "+" symbol should fix at right margin with only icon size. Is it possible ?

enter image description here

Upvotes: 1

Views: 81

Answers (1)

ezanker
ezanker

Reputation: 24738

You could use absolute positioning CSS to accomplish this:

.ui-controlgroup-controls {
    width: 100%;
    margin-bottom: 42px;
}
.ui-controlgroup-controls .ui-select{
    position: absolute;
    left: 15px;
    right: 73px;
}
.ui-controlgroup-controls a.ui-btn{
    position: absolute;
    right: 15px; left: auto;   
}

DEMO

enter image description here

Upvotes: 1

Related Questions