How to add a css in vue-bootstrap table template

Question

I want to add a CSS to bootstrap vue table template but it doesn't work

<template slot="actions" slot-scope="data" :style="{min-width:'150px'}">
    <b-button variant="info" @click="showViewModel(data.item)">
       <i class="fa fa-eye"></i>
    </b-button>
   <b-button variant="danger" class="ml-1" @click="showConfirmBox(data.item.id,data.index)">
       <i class="fa fa-trash"></i>
   </b-button>
</template>

S. Gandhi · Accepted Answer · 2019-10-31 13:48:42Z

1

 <template slot="actions" slot-scope="data">
    <div :style="'min-width:150px'">
      <b-button variant="info" @click="showViewModel(data.item)">
         <i class="fa fa-eye"></i>
      </b-button>
      <b-button variant="danger" class="ml-1" @click="showConfirmBox(data.item.id,data.index)">
       <i class="fa fa-trash"></i>
      </b-button>
    </div>
  </template>

answered Oct 31, 2019 at 13:48

S. Gandhi

1191 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hiws Over a year ago

Any reason you're binding your style instead of just style="min-width: 150px" ?

Ayrton · Accepted Answer · 2019-10-31 13:22:32Z

0

Vue's template tag renders into nothing, so adding style to it has no effect.

Also, adding style with Vue you should use plain strings instead of objects. So instead of this:

:style="{min-width:'150px'}"

Use this:

:style="'min-width:150px'"

answered Oct 31, 2019 at 13:22

Ayrton

2,3131 gold badge16 silver badges25 bronze badges

3 Comments

Ayrton Over a year ago

@S.Gandhi it'll never work with <template>, it doesn't render into anything. Replace it with a real tag like <div>

S. Gandhi Over a year ago

its is necessary for custom data rendering so I can not remove it

Ayrton Over a year ago

@S.Gandhi then add a div immediately inside the template and move the style to it

Collectives™ on Stack Overflow

How to add a css in vue-bootstrap table template

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related