[v2] form input - inline button (icon)

Questions
1

Hello,

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-inner>
    <item-title item-label>LABEL
    <item-input-wrap><input>
    <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

2

You need to put button inside item-input-wrap

3

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

<div class="list no-hairlines-md">
                        <ul>
                            <li>
                                <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>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

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.