CODEWITHSUNDEEP
twitter-bootstrapvue.js
daninthemix
daninthemix

Reputation: 2570

Force bootstrap controls onto one line

enter image description here With the group of three controls on the right, I can't figure out how to get them A) pulled to the right, and B) inline and nestled right next to each other, like the controls over on the left.

Here's the parent element for the right controls:

        <div class="col-md-4">
            <user-search></user-search>
            <batch-button></batch-button>
        </div>

Here's the <user-search> tag:

<div>
    <transition name="fade">
        <button v-if="userSearch" @click="undoSearch()" class="btn btn-default">
            <span class="glyphicon glyphicon-remove-circle"></span>
        </button>
    </transition>
    <input type="text" @keyup.enter="findUser()" v-model="searchText" class="form-control" placeholder="find user"/>
</div>

And here's the <batch-button> tag:

<button class="btn btn-default" @click="show()" type="button">Batch Operations
    <span :class="{'glyphicon glyphicon-chevron-down': showForm, 'glyphicon glyphicon-chevron-up': !showForm}"></span>
</button>

Adding text-right or pull-right does nothing or is counter-productive, from my experiments.

Upvotes: 0

Views: 124

Answers (1)

codexy
codexy

Reputation: 413

You are missing style, and missing code for user-search, but this should be enough for starting point:

 <div class="btnbox">
   <user-search></user-search>
    <button class="rbtn btn btn-default" @click="show()" type="button">Batch Operations <span :class="{'glyphicon glyphicon-chevron-down': showForm, 'glyphicon glyphicon-chevron-up': !showForm}"></span></button>
  <button class="rbtn btn btn-default">
        <span class="glyphicon glyphicon-remove-circle"></span>
    </button>
</div>

working example: http://jsfiddle.net/elance/52VtD/15650/

Upvotes: 1

Related Questions