7

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/

Alain
  • 1,450
  • 3
  • 20
  • 37
  • its not clickable, because you don't have checkbox now, Jquery-mobile use custom javascript to show checked/unchecked of checkbox. I did try, but seems really hard. – Nachiket Jun 26 '12 at 17:16
  • Hi, what is "checkbox now" mean. Do you mean, that I miss an element, a class or an inline style to correct this behavior ? Or did I disabled the checkbox behavior by the way I nested the elements ? – Alain Jun 26 '12 at 17:23
  • 1
    Meaning, that now you do not have in ui-block-a, where you have correct rendered checkbox, using
    . First row checkbox (correct rendered in your screenshot) wont work, as it doesn't have associated javascript, which check/uncheck it.
     – Nachiket Jun 26 '12 at 17:32
  • 1
    Try setting the line-height on .ui-bar.ui-bar-e to 24px. – j08691 Jun 26 '12 at 17:38
  • @j08691; Being new to jquerymobile, how can I add the line-height to an existing css class without maybe disturbing the overall themes, should I add them inline ? – Alain Jun 26 '12 at 18:00
  • @Nachiket, Ok, I added it online on the jsfiddle [link](http://jsfiddle.net/alain_lavoie/XhsEh/3/). Now I see the checkbox working. Thanks. Is there a way to eliminate the line surrounding the checkbox ? – Alain Jun 26 '12 at 18:05
  • @j08691; I have posted your suggestion on jsfiddle [link](http://jsfiddle.net/alain_lavoie/XhsEh/4/). It does not seem to work. – Alain Jun 26 '12 at 18:09
  • @Nichiket, your suggestion works on Chrome, but not on Chrome (Mac version). Maybe become of the size of the windows, some elements are made visible when moved around due to css rules. In fact I see two checkboxes. Is there a way to avoid this ? Is there a good tutorial somewhere on deal with this kind of issue ? – Alain Jun 26 '12 at 18:33
  • I'd swear I posted this earlier, but either I didn't or it somehow got removed. Anyway, http://jsfiddle.net/j08691/XhsEh/6/ – j08691 Jun 26 '12 at 19:01
  • Yes, you are right, this make the checkbox and the text aligned perfectly. Thanks. Now Can you indicate me what to add to keep the same view, but with a valid checkbox (javascript event handled) ? – Alain Jun 26 '12 at 19:30

2 Answers2

3

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

Output

Nirmal Patel
  • 5,128
  • 8
  • 41
  • 52
  • @nirmaljpatel This look great, however, I am trying to have an input field "text" in place of the "Option A" text. I am starting to believe that it is not possible to combine different element type (in a group), like checkbox and input text. What do you think ? – Alain Jun 27 '12 at 17:38
  • My first question was not clear enough. I mentionned a 'text' area. I intended to meant a textarea where the user can edit it to insert any text. This last answer, does correspond to one valid interpretation of the question. Thanks, regards to all. – Alain Jul 08 '12 at 16:11
3

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;
Littm
  • 4,923
  • 4
  • 30
  • 38
Edwin Chia
  • 46
  • 3