Make inputs and search bars work better with icons and labels

[Atulin]

Feature Request

Description

• search -> right icon left labeled

  • Icon disappears, label is on the right
  • Both input and label retain full border radius

• search -> left icon right labeled

  • Label retains border radius on the left side

• right icon left labeled

  • Icon disappears, label is on the right
  • Both retain their full border-radius

• left icon right labeled

  • Label retains its left border radius

Both retain their full border-radius

Example and testcase

https://jsfiddle.net/Angius/sz5kawre/9/
Added more visible borders to better picture the issue

Screenshot

[y0hami]

I think this may have something to do with right icon and left labeled not being defined only left icon and right labeled are defined in the input.less file. This may cause a conflict when using both.

[lubber-de]

@Atulin When working with left/right labeled input/search make sure the html-code for the label is actually set in the appropriate order in the dom.
Currently only for icon the dom-position does not matter. Implementing this for (probably complex) labels seems to be much more effort to implement in CSS only for now.
You can achieve the most important concerns of yours by reordering the ui label code

• before the input tag when it should be left labeled
• after the input tag when it should be right labeled

I adjusted your fiddle accordingly
https://jsfiddle.net/051prbce/

Regarding the border: The labels themselves (in your fiddle) do not have a border at all.
Just because you made it more visible by defining an explicit border via 1px solid red make at least your concerns about "both retain full border status" obsolete.

When you replace your border setting to border-color: red !important (i prepared this in the fiddle) , together with the reordering of the dom elements i mentioned above, it looks like this

Nevertheless, i agree and confirm about the border radius of the attached label and the obsolete left border of the input. Although this is not much visible and disturbing IMHO, i'll prepare a little PR to fix that 😉

[Atulin]

Ah, yes, looks like reordering the elements does fix the issue. Thanks for that info, and for the upcoming PR 👌

[lubber-de]

Turns out, it all works without any change to FUI as expected, if you always order the dom-tags for icon, input and label in the desired and described order:

left icon right labeled

<div class="ui left icon right labeled input">
    <i class="icon"></i>
    <input>
    <div class="label"></div>
</div

right icon left labeled

<div class="ui right icon left labeled input">
    <div class="label"></div>
    <input>
    <i class="icon"></i>
</div

See here
https://jsfiddle.net/051prbce/1/