Search code examples
htmljquery-mobilejquery-mobile-listviewjquery-mobile-button

Want joined input tag and icon button on single row

I've tried various permutations but I my result always splits both tags onto separate lines. Basically I want an input box and along side it, I want a + icon button button (thus the + is not inside the input box, but joined on the right). I suspect some inheriting rules are causing me grief as some examples work as standalone, but fail when inside a grid.

Note, I am fine having the input box and attached plus button being located outside the listview - its just important that the input box and plus are together.

Can anyone help?

Attempt with using controlgroup:

<div class="ui-grid-a">
    <div class="ui-block-a">
        <div class='ui-body'>
            <ul id="base1" class='ui-corner-all' data-role='listview' data-inset='true'>
                <li data-role="controlgroup" data-type="horizontal">
                <input name="name2" id="name2" class="width100" type="text">
                <a href="#" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-notext">+</a>
                </li>
                <li data-role="list-divider">Available Groups</li>
            </ul>                                                    
        </div>
    </div>
    <div class="ui-block-b">something else</div>
</div>

Attempt using fieldcontain

<div class="ui-grid-a">
    <div class="ui-block-a">
        <div class='ui-body'>
            <ul id="base1" class='ui-corner-all' data-role='listview' data-inset='true'>
                <li class="ui-field-contain">
                <input name="name2" id="name2" class="width100" type="text">
                <a href="#" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-notext">+</a>
                </li>
                <li data-role="list-divider">Available Groups</li>
            </ul>                                                    
        </div>
    </div>
    <div class="ui-block-b">something else</div>
</div>
Solution

  • Why your layout breaks? To restyle a listview, JQM searches for a fixed defined markup chain, for example such as

    <ul> <li> <a> <-- main link is restyled as ui-btn <h1></h1> <-- title <p></p> <-- description </a> <a></a> <-- additional link is restyled as split-icon </li> </ul>.

    So i think you should let JQM do the job and then just override the styles you wish. My proposal is following JQM way-of-life, and is using the split-icon as the right input button you need:

    JQM Listview with text input and right button

    Snippet:

    /* Style the text input */
.ui-listview > li > a.ui-btn {
  padding: 0 !important;
}
.ui-listview > li p {
  margin: 0 !important;
  padding: 0 !important;
}

.ui-input-text {
  margin: 10px !important;
}

/* jQM no frills */

.ui-listview > li > a:first-child.ui-btn, 
.ui-listview > li > a:first-child.ui-btn:hover,
.ui-listview > li > a:first-child.ui-btn:focus,  
.ui-listview > li > a:first-child.ui-btn:active,
.ui-listview > li > a:first-child.ui-btn:visited  {
  box-shadow: none !important;
  cursor: default;
  background-color: rgb(246, 246, 246) !important;

}

/* speed-up some android and iOS devices */
* {
    -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div id="page-1" data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>Page one</h1>
    </div>
    <div role="main" class="ui-content" id="page-1-content">
      <ul id="base1" class="ui-corner-all" data-role="listview" data-split-icon="plus" data-inset="true">
        <li data-role="list-divider">Available Groups</li>
        <li>
          <a>
            <p>
              <input name="name1" id="name1" type="text">
            </p>
          </a>
          <a id="btn1"></a>
        </li>
        <li>
          <a>
            <p>
              <input name="name2" id="name2" type="text">
            </p>
          </a>
          <a id="btn2"></a>
        </li>
        <li>
          <a>
            <p>
              <input name="name3" id="name3" type="text">
            </p>
          </a>
          <a id="btn3"></a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

    BTW, just an additional hint: please be aware that IMHO your markup with a listview inside a fieldcontain inside a grid is a performance killer, maybe you should rethink a bit the layout.