How to prevent Bootstrap-Vue Select and Input from expending on the whole line?

user_9808098 0
Viewed 257

I want to do create the following view:

enter image description here

On the right you have the b-form-select and on the left you have b-form-input.

The code:

<template>
  <div>
    <div class="row">
        <div class="col-sm-12 col-md-6" style="text-align: right;">
            <div>
                <label>
                    הצג
                    <b-form-select v-model="tableItemsPerPage" :options="itemsPerPageOptions" size="sm" class="mt-3"/>
                    פריטים
                </label>
            </div>
        </div>
        <div class="col-sm-12 col-md-6" style="text-align: left;">
          חיפוש:<b-form-input v-model="text"></b-form-input>
        </div>
    </div>
...

What I actually get:

enter image description here

As I understand, it happens because the blocks (b-form-select and b-form-input) are expending to the max length. This means that the text breaks into a separate lines. This happens because I use RTL. How can I fix it?

bootstrap-vue vue.js css
1 Answers

I tried to reimplement your issue, take a look, and if there are more items you need just tell me.

First, If you want to use the label tag I recommend using b-form-group.

Second, I couldn't understand your language and because of that, I used English words.

Third, I used flex in CSS and put a direction: rtl in the body tag to reproduce your situation.

Here is a snippet code:

new Vue({
  el: '#app',
  data() {
    return {
      text: "",
      tableItemsPerPage: "",
      itemsPerPageOptions: [{
        text: "Option1",
        value: 1
      }]
    }
  },
  methods: {

  },
  mounted() {


  }


})
body {
  direction: rtl;
}
.formWrapper {
  display: flex;
  justify-content: space-between;

}

.inlineFormGroup {
  display: flex;
  align-items: center;
}

.selectWrapper {
  display: flex;
    align-items: center;

}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">



  <div class="formWrapper m-3">
    <div class="selectWrapper">
      <div>
        Label
      </div>
      <b-form-select v-model="tableItemsPerPage" :options="itemsPerPageOptions"></b-form-select>
      <div>
        Label
      </div>
    </div>
    <b-form-group class="inlineFormGroup mb-0" label="Input:" label-for="myInput">
      <b-form-input id="myInput" v-model="text" />
    </b-form-group>
  </div>
</div>

user_65955510
Related