[v2] form input - inline button (icon)



for last 2 days I am trying to get somehow this working. I have simple <block> and inside one input field with <item-content item-input>

    <item-title item-label>LABEL
    <item-after><a class=button><i class=icon>

But won’t get desired solution. I need to have the icon on same line as input box, but instead I am getting it bellow the input box.

Thanks for help


You need to put button inside item-input-wrap


nope, doesn’t work. here is whole code with proposed change:

<div class="list no-hairlines-md">
                                <div class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Search</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="username or e-mail"/>
                                            <a href="#" class="button">
                                                <i class="icon f7-icons ios-only">search</i>
                                                <i class="material-icons md-only">search</i>

Result is that I get:

  1. row - label “Search” left aligned (correct)
  2. row - input field with place holder “username or e-mail” - taking whole width
  3. row - button with the icon - taking whole width

When I select - focus - the input field, the underlining on field is bellow the button.