form group input bug

[essramos]

I am trying to create an input with an icon on the left and a button on the right. I am not sure how to do it with the fg-input.

Examples on this doc work perfectly for icons on either side of the input but not both and not a button.

https://demos.creative-tim.com/vue-paper-dashboard/documentation/component-docs/inputs.html#with-icons

On bootstrap, they have form group input prepend and append, I tried that and it doesn't look right. The send button and the icon on the left are not aligned with the input.

Here's the code:

<div class="input-group mb-3">
  <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-comment-o"></i></span>
  </div>
  <input type="text" class="form-control" name="mobileNum" placeholder="Text Receipt" aria-label="Text Receipt" aria-describedby="basic-addon2" disabled>
  <div class="input-group-append">
    <button style="border: 1px solid;" class="btn btn-neutral" type="button">Send</button>
  </div>
</div>

Result.

[cristijora]

Hi @essramos Can you check this documentation link https://demos.creative-tim.com/vue-paper-dashboard-pro/documentation/component-docs/inputs.html#custom-form-gorup-inputs

It seems the link you have is for an older free version.
You should be able to add icons with addon-right-icon="fa fa-search" and `addon-left-icon="fa fa-search" props.

Also please make sure you have bootstrap 4.2.1 installed as a newer version might mess up with this part

[essramos]

@cristijora thanks for the response.

Followed the docs and this is what it looks like. There is a clear separator on the right icon.

Code:

<div class="col-md-12">
  <fg-input class="col-12"
    placeholder="Email"
    addon-left-icon="nc-icon nc-email-85"
    addon-right-icon="nc-icon nc-email-85">
  </fg-input>
</div>
<div class="col-md-12">
  <fg-input class="col-12"
    placeholder="Text"
    addon-left-icon="nc-icon nc-chat-33"
    addon-right-icon="nc-icon nc-email-85">
  </fg-input>
</div>

Also I am wondering how I can I add a button on the right side instead of an icon?

For reference I am using this theme.

[essramos]

Any update for this? @cristijora my team paid premium for support. It would be nice to get a quick response.

[ladinek82]

Hi,
I have the same problem with the addons left or right. My team has premium support too.
I need very fast fix.

Here is sample of the bug in your demo

Here is link to the page: https://demos.creative-tim.com/vue-paper-dashboard-pro/#/forms/regular
Thanks