This topic contains 3 replies, has 2 voices, and was last updated by Sean Sean 2 years, 3 months ago.

irrelugar behavior when using input-group-addon into input-group


  • netzahdzc
    Participant

    Posts: 11
    Member Reply #6619

    Hi there, im using bellow structure. Everything works well until an the error block is activated as part of a validation function:

    <div class=”input-group”>

    <span class=”input-group-addon”>

    <i class=”fa fa-mobile-phone”></i>

    </span>

    <input type=”text” class=”form-control” placeholder=”some text” name=”generalesEmergenciaCelular” value=”some value”>

    </div>

    <span class=”help-block”>Required field</span>

     

    What should be done to avoid distorting icon image? Please, refer to attached image to clearify my issue</div>
    Thanks in advance!!

    • This topic was modified 2 years, 3 months ago by  netzahdzc.
    • This topic was modified 2 years, 3 months ago by  netzahdzc.
    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6647

    Hi,

    Thanks for your feedback on this issue. Please add below errorPlacement handler right after “invalidHandler” handler:

    errorPlacement: function (error, element) { // render error placement for each input type
    var cont = $(element).parent(‘.input-group’);
    if (cont) {
    cont.after(error);
    } else {
    element.after(error);
    }
    },

    If you need any further clarifications please let us know.

    Thanks.


    netzahdzc
    Participant

    Posts: 11
    Member Reply #6679

    wonderful, thanks!!

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6693

    You are welcome 🙂

You must be logged in to reply to this topic.