Geek asks and answers

JQuery Mobile button lights left and right

I am trying to get a title to have two sets of buttons on the left and right, but I am having problems getting everything to line up and float left / right. Any idea is to make it easy.

     <div data-theme="a" data-role="header" data-position="fixed">
<!-- back button -->                    
       <a style=" margin:5px 0 10px 0;" data-role="button" 
    data-transition="slide" data-theme="b" href="#track_dash" 
    data-icon="arrow-l" data-iconpos="left">
          Back
       </a>

<!-- chart switch -->                    
            <div data-role="fieldcontain" style="float: right;">
                <form action="#" method="POST">
                    <fieldset data-role="controlgroup" data-type="horizontal" >
                       <input name="radiobuttons5" id="radio7" value="radio1" type="radio" />
                       <label for="radio7">
                            List
                       </label>
                       <input name="radiobuttons5" id="radio8" value="radio8" type="radio" />
                       <label for="radio8">
                            Chart
                       </label>
                    </fieldset>
                </form>
            </div>

      </div>

left side design / right side actual coded design

+3
source share
2 answers

Use the button class="ui-btn-lefton the rear panel and class="ui-btn-right"in the control group.

You may also need to put the title between the two elements at least empty <h1></h1>

+16
source

you probably already figured out the solution, but I did it in my footer and it worked for me:

<div data-role="footer" class="ui-bar" data-position="fixed" data-id="myFooter">
    <div class="footerContainer">    
        <a href="index.html" data-role="button" data-mini="true" data-inline="true"class="ui-btn-left">Cancel</a>
        <a href="index.html" data-role="button" data-mini="true" data-inline="true"class="ui-btn-right">Next</a>
    </div>
</div>

, div, ui-btn-left right, , -, .

css

.footerContainer{
    width:97%;
    height:38px;
    border:none;
    position:relative;
    }

97%, 100% : , .

+7

More articles:


All Articles