Want joined input tag and icon button on single row

Question

Want joined input tag and icon button on single row

265 Views Asked by AudioBubble At 08 February 2017 at 15:29

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>

Original Q&A

There are 1 best solutions below

**deblocker** · Accepted Answer · 2017-02-10T09:02:11.797000

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:

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.

Want joined input tag and icon button on single row

There are 1 best solutions below

Related Questions in HTML

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-LISTVIEW

Related Questions in JQUERY-MOBILE-BUTTON

Trending Questions

Popular # Hahtags

Popular Questions