1

I am trying to make an input field with a (right-aligned) label in semantic ui. The documentation shows an example of a cornered label that works fine (http://semantic-ui.com/elements/input.html) , but when I try to use a plain label it breaks the layout of the input field

I made a fiddle that explains my attempt (http://jsfiddle.net/26fqd39d/ ).

The following code works fine (taken from the documentation): It shows an input field with a label on the right which fits in the layout of the input field.

<div class="ui labeled input">
    <input type="text" value="#"></input>
    <div class="ui corner label"><i class="copy icon"></i></div>
</div>

I don't want to use a cornered label though, since there is not enough room for my scenario (I would like to display some units in this label, like km, mi, etc).

I change it to use a regular label:

<div class="ui labeled input">
    <input type="text" value="#"></input>
    <div class="ui label"><i class="copy icon"></i></div>
</div>

As you can see in the fiddle, the label breaks on the new line.

How can I create an input field with a right-aligned label using semantic-ui ? An explanation of why this doesn't work will also help me understand how to build layouts using semantic-ui.

Thanks.

shaft
  • 2,147
  • 2
  • 22
  • 38

2 Answers2

1

I played around a bit and found a work-around that uses right (or left) aligned icons instead of labels. Hope this helps.

<div class="ui right icon input">
    <input type="text" placeholder="Copy copy copy">
    <div class="icon"><i class="copy icon"></i></div>
</div>

http://jsfiddle.net/12pjjrp7/4/

cmathews
  • 26
  • 3
-1

I'm not quite familiar with Semantic but you could keep your corner class and override the right borders like so:

.ui.action.input > .button {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

Use !important as it should be overriding the current style and don't forget to be specific with your class selector (so it only affects the buttons you want to). or use a style attribute.

Goowik
  • 782
  • 11
  • 36