Semantic-ui: How to put input and buttons in alignment (same line)

[geemang2000]

Apologizes if this seems like a basic question. No finding a good example to copy. Is there a way to place an input and button(s) in the same field? In this example the buttons wrap to the next line. Is there a class I'm not finding? I'm aware of the action class. But this isn't what I need.

                <div class="required field">
                    <label>Resource</label>
                    <div class="ui input">
                        <input type="text">
                        <div class="ui button">
                            Btn1
                        </div>
                        <div class="ui button">
                            Btn2
                        </div>
                    </div>
                </div>

When I put this in a grid things don't line up. As the buttons top align with the label.

[ns-phennessy]

You could do something like this: http://jsfiddle.net/6Lpj5udz/1/

First is sort of a hack but it works.

The second is just using the fact that you can attach a button to an input, only it will skew the width of the button the larger the form gets, but both are acceptable ways to accomplish what you need.

Good luck!

[geemang2000]

Thanks @ph7vc ! This is something that I'd think is very common.

This sort of works too. Wonder it this is a supposed to align properly?

            <div class="inline fields">
                <div class="field">
                    <label>Last name</label>
                    <input type="text" placeholder="Full Name">
                </div>
                <div class="field">
                    <div class="ui blue button">Test</div>
                </div>
            </div>

[ns-phennessy]

That looks like a similar issue to #1536. For some reason I remember seeing this issue already reported somewhere else, but I can't seem to find it

In any case, it does the same in my browsers. It hardly noticeable imo and probably not a high priority fix. It looks like it is off by a single pixel

Fiddle: http://jsfiddle.net/6Lpj5udz/3/

Browser: Chromium 39 & Firefox 35 on Ubuntu 14.04

[Fanna1119]

Not sure if someone will see this but I found another solution by mistake :+1:

http://jsfiddle.net/fanna1119/hht1z6m6/1/

[jsotteccanic]

Puedes hacer algo como esto:

            <div class="fields">
                <div class="field">
                    <label> &lt; 65 </label>
                    <input type="number" name="edad_1" id="edad_1" min="0">
                </div>
                <div class="field">
                    <label> 66 a 84 </label>
                    <input type="number" name="edad_2" id="edad_2" min="0">
                </div>
            </div>
            <div class="field">
                <label for="">&nbsp;</label>
                <button class="ui button blue fluid">Cotizar</button>
            </div>

[abulka]

The use of a non breaking space as a label

<label for="">&nbsp;</label>

is a neat, simple solution to the OP.