Geek Answers Handbook

How to align checkbox and text input tag in jQuery-mobile line

Using JqueryMobile, I want to achieve the following layout:

  • Having beautiful scenery for separating input lines
  • The presence of one flag, vertically aligned with the text input field, as on the same line

What I need to achieve

But after many attempts, the only option I could work from is the following: What i am getting

The first attempt looks right using jquerymobile grids , but my checkbox no longer selected and remains checked forever. The second attempt uses fieldset , as suggested by jquerymobile , but I lost the checkbox and I tried to use the css float property without success.

Here is the complete code:

  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Multi-page template</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body style="font-size: 12px;"> <div data-role="page" id="one"> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a" style="width: 20%;" > <div class="ui-bar ui-bar-e" style="height:24px; padding: .4em 4px;"> <div class="ui-checkbox"> <label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on"> <span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span> </span> </label> </div> </div> </div> <div class="ui-block-b" style="width: 80%;" > <div class="ui-bar ui-bar-e" style="height:24px">Block B</div> </div> </div> <div style="height: 200px;"> <fieldset data-role="controlgroup" data-type="horizontal"> <input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" class="custom" /> <label for="checkbox-mini-0" >&nbsp</label> <input type="text" name="texta" id="texta" class="custom" style="width:36px;" /> </fieldset> <div style="height: 30px; border:1px solid lightgray;"> </div> <div style="height: 30px; border:1px solid lightgray;"> </div> </div> </div> </div> </body> </html>

Any help or comments to achieve my goal will be appreciated?

Internet editor: you can also access the html file at http://jsfiddle.net/alain_lavoie/XhsEh/

+7
source share
2 answers

http://jsfiddle.net/XAsyy/110/

Update from Nirmal Patel ans, I found textarea to work with checkboxes, and if you don't want textarea to grow:

 data-role="none" ie. <textarea id="test" data-role="none"></textarea>

http://jsfiddle.net/XAsyy/144/

or, use:

 css resize: none;
+2
source

http://jsfiddle.net/nirmaljpatel/XAsyy/

Output

+2
source

More articles:


All Articles