Bootstrap / CSS - Input, button and select in the same line

Question

I'm trying to put an input, a button and a select in the same line using bootstrap/css, but the select, depending on its content size, is going to the next line, as follow. What can I do?

Here is the part of the HTML:

<div class="form-inline">
    <div class="form-group">
        <div class="input-group">
            <input type="text" class="form-control" v-model="ClienteBusca.value" placeholder="Buscar cliente">
            <span class="input-group-btn">
                <button type="button" v-on:click.prevent="buscarCliente" class="btn btn-primary">Buscar</button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <select class="form-control" id="selectedCliente">
            <option v-for="cliente in Clientes" v-bind:value="cliente">{{cliente.nome}}</option>
        </select>
    </div>
</div>

Also, here is the demo: https://jsfiddle.net/taianrj/r81tqbm9/1/

Your select should be nested within the same input-group as the other inputs — Turnip
– Turnip, Commented Nov 28, 2018 at 14:15

Aditi · Accepted Answer · 2018-11-28 15:23:28Z

Problem with form-inline is that it's applying width:auto; on the select and as in your scenario content is large and enough space is not available in the first line so it's starting from the new line. Instead of using form-inline you can restructure your markup like that:

        <form>
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Buscar cliente">
                            <span class="input-group-btn">
                            <button type="button" class="btn btn-primary">Buscar</button>
                        </span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="form-group">
                        <select class="form-control" id="selectedCliente">
                            <option>test test test test test test test test test test test test test test test
                                test test test test test test test test test test test test test test test
                                test test test test test test test test test test test test test test test
                            </option>
                        </select>
                    </div>
                </div>

            </div>
        </form>

Carol Skelly · Accepted Answer · 2018-11-28 14:58:27Z

2

Use the latest Bootstrap 4.1 (not alpha), and switch the form-inline to d-flex...

           <div class="d-flex">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" v-model="ClienteBusca.value" placeholder="Buscar cliente">
                            <span class="input-group-btn">
                                <button type="button" v-on:click.prevent="buscarCliente" class="btn btn-primary">Buscar</button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <select class="form-control" id="selectedCliente">
                            <option v-for="cliente in Clientes" v-bind:value="cliente">test test test test test test test test test test test test test test test </option>
                        </select>
                    </div>
           </div>

https://www.codeply.com/go/fjZ7U8tbIH

answered Nov 28, 2018 at 14:58

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

1 Comment

Carol Skelly Over a year ago

Use padding or margins.. for example <div class="form-group pr-1"> on the first group.

Collectives™ on Stack Overflow

Bootstrap / CSS - Input, button and select in the same line

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related