How to align a checkbox and a text input tag into a jquery

2018-06-21 17:39:39

Using JqueryMobile, I wish to achieve the following layout:

Having nice decorations boxes to separate my input lines

Having one checkbox aligned vertically with an input text field, both on the same line

我需要实现的

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

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/

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;

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

链接地址: http://www.djcxy.com/p/61026.html

上一篇: Django根据其他字段动态设置字段值

下一篇: 如何将一个复选框和一个文本输入标签对齐到一个jQuery中