CODEWITHSUNDEEP
javascriptcssvue.jsv-select
user3599803
user3599803

Reputation: 6994

vue v-select in bootstrap table

The select component is shown bellow the table, instead of above. How to fix? While keeping the table responsive. This problem is worse on mobile devices.
https://codepen.io/anon/pen/wXgbPr

<div id="app">
  <h1>Vue Select - Selecting Multiple Values</h1>
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>col1</td>
          <td>col2</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
 <v-select multiple v-model="selected" :options="options"></v-select>
          </td>
          <td></td>
        </tr>
        <tr>
          <td>text</td>
          <td>text</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
    Vue.component('v-select', VueSelect.VueSelect)

    new Vue({
      el: '#app',
      data: {
        selected: ['foo','bar'],
        options: ['foo','bar','baz']
      }
    })
</script>

Upvotes: 0

Views: 2019

Answers (1)

nizantz
nizantz

Reputation: 1621

If I am getting your question right, then remove the class "table-responsive" from the div wrapping the table. Add it to the table instead.

<div id="app">
  <h1>Vue Select - Selecting Multiple Values</h1>
  <div>
    <table class="table table-responsive table-bordered">
      <thead>
        <tr>
          <td>col1</td>
          <td>col2</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
 <v-select multiple v-model="selected" :options="options"></v-select>
          </td>
          <td></td>
        </tr>
        <tr>
          <td>text</td>
          <td>text</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
    Vue.component('v-select', VueSelect.VueSelect)

    new Vue({
      el: '#app',
      data: {
        selected: ['foo','bar'],
        options: ['foo','bar','baz']
      }
    })
</script>

CodePen Link

Alternatively:

<div id="app">
  <h1>Vue Select - Selecting Multiple Values</h1>
  <div class="table-responsive" style="overflow-x:visible;">
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>col1</td>
          <td>col2</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
 <v-select multiple v-model="selected" :options="options"></v-select>
          </td>
          <td></td>
        </tr>
        <tr>
          <td>text</td>
          <td>text</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
    Vue.component('v-select', VueSelect.VueSelect)

    new Vue({
      el: '#app',
      data: {
        selected: ['foo','bar'],
        options: ['foo','bar','baz']
      }
    })
</script>

Upvotes: 2

Related Questions