CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
user2233706
user2233706

Reputation: 7225

Cannot place anchor tag on same line as text input

I am unable to place an anchor tag next to a text input:

// Having this does not make a difference
//$( "#id_test" ).textinput( "option", "wrapperClass", "input-width" );
.input-width {
  width: 200px;
}
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div class="ui-field-contain">
  <input id="id_test" maxlength="7" name="test" placeholder="Enter input" type="text" />
  <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>
  
  <!-- Having this instead of the above a and div tags makes no difference -->
  <!-- <a href=#>Learn more</a> --> 
</div>

Even if the JS code is uncommented and the field width is 200px, the anchor tag is still on the next line. It also does not matter if I don't have the anchor tag and div combination there and instead have the uncommented anchor tag included.

Upvotes: 1

Views: 750

Answers (2)

DaniP
DaniP

Reputation: 38262

Jquery mobile creates a wrapper around the input elements, so you need to change the style of those containers to remove the block behavior:

.ui-input-text {
  display: inline-block;
}
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div class="ui-field-contain">
  <input id="id_test" maxlength="7" name="test" placeholder="Enter input" type="text" />
  <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>

Update

Using flexbox you can make the input take all available space like this:

Note you don't need the !important it's just here the snippet that requires it

.ui-field-contain {
  display:flex !important;
}
.ui-input-text {
  flex:1 1 auto;
}
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div class="ui-field-contain">
  <input id="id_test" maxlength="7" name="test" placeholder="Enter input" type="text" />
  <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>
</div>
<div class="ui-field-contain">
  <input id="id_test" maxlength="7" name="test" placeholder="Enter input" type="text" />
  <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>
</div>

Upvotes: 1

deblocker
deblocker

Reputation: 7697

Try this:

.controlgroup-textinput {
  border-width: 1px !important;
  padding: .25em 0 !important;
  border-bottom-style: solid !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.controlgroup-textinput.ui-input-text {
  background-color: #ffffff !important;
}
.controlgroup-textinput input {
  background-color: #ffffff !important;
}
<!DOCTYPE html>
<html>
<head>
  <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 data-role="page">
  <div data-role="header" data-position="fixed"><h2>Header</h2></div>	
  <div role="main" class="ui-content">
    <div data-role="controlgroup" data-type="horizontal">
      <input id="test" name="test" type="text" maxlength="7" placeholder="Enter input" data-wrapper-class="controlgroup-textinput ui-btn">
      <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
    </div>
  </div>
  <div data-role="footer" data-position="fixed"><h2>Footer</h2></div>    
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>
</div>
</body>
</html>

Upvotes: 0

Related Questions