Home/ Questions/Q 8605947
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T02:58:20+00:00

Using JqueryMobile, I wish to achieve the following layout: Having nice decorations boxes to

  • 0

Using JqueryMobile, I wish to achieve the following layout:

  1. Having nice decorations boxes to separate my input lines
  2. Having one checkbox aligned vertically with an input text field, both on the same line

What I need to achieve

But after many attempts, the only layout I could come from with is the following:
What I am getting

The first attempt looks kind of right using jquerymobile grids, but my checkbox is not selectable anymore and remains checked forever. The second attempts uses the fieldset as proposed by the jquerymobile, but, I loose the checkbox and I tried using the css float property, without success.

Here is the full 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 would be appreciated ?

Online editor: You can access the html file also on http://jsfiddle.net/alain_lavoie/XhsEh/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    Updating from Nirmal Patel ans, I found textarea to work with checkboxes and if you do not want the textarea to grow: 

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

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

    or, use:

    css resize: none;
    • 0