Create Input with Button? (Input Group in Bootstrap)

ionic-v1
1

First, bravo on creating such a beautiful framework! As a huge fan of AngularJS and mobile development, I’ve been rolling my own tools. Now, I don’t have to! I look forward to helping out with this project and contributing in the coming months. But, I need to get acquainted with the project first…

How can I create an input with a button? In Bootstrap this is .input-group-addon seen here: http://getbootstrap.com/components/#input-groups-buttons

Thanks again!

2

(I added this question to tutorials because I just realized that questions that aren’t categorized don’t show up).

3

Hey @jprichardson. Right now it’s not built in. However, I just filed an issue (https://github.com/driftyco/ionic/issues/193) and hopefully @adam will be able to get this in since it’s something we planned on doing.

One quick solution would be to use the grid, like this maybe:

<div class="row">
  <div class="col-75">
    <input> 
  </div>
  <div class="col-25">
    <button class="button button-assertive">Click</button>
  </div>
</div>
4

Actually, as a short-term solution, I just experimented with just placing the icon in the label. It’s not ideal, but it at least looks acceptable:

<label class="item item-input">
  <input type="text" placeholder="First Name">
  <i class="icon ion-email"> 
</i></label>

… and then I can add a click handler to the icon.

5

Does this help? http://ionicframework.com/docs/components/#item-input-inset

Also added this: http://ionicframework.com/docs/components/#bar-inputs

1 Like
6

That’s awesome! I can’t wait to try it! Thanks!

7

This is useful, but not nearly is clean and efficient (w/screen real estate) as the bootstrap approach. Is there something in the Ionic Framework that prevents a closer match to the bootstrap design of input groups? Their icons, buttons and dropdowns as addons appear much more tightly integrated into the input. Thoughts?

1 Like