Bootstrap / CSS - Input, button and select in the

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/

Answer 1

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>

Answer 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