Centering a button within a table-cell through movement

Question

Centering a button within a table-cell through movement

I'm facing an issue with aligning a button placed inside a table cell. The table setup is as follows:

      <b-table
        v-if="rows.length"
        :thead-tr-class="'bug-report-thead'"
        :tbody-tr-class="'bug-report-tbody'"
        :items="rows"
        :fields="columnsToDisplay"
        :sort-compare="sortTableByKey"
        :striped="true"
        :bordered="true"
        :outlined="true"
        :hover="true"
        :no-sort-reset="true"
        :show-empty="true"
        :filter="filter"
        @filtered="onFiltered"
        :empty-text="emptyText"
        :sort-desc="true"
        :caption-top="true"
        responsive>
/b-table>

The button code is as follows:

<template slot="iinstances" slot-scope="row">
  <div v-if=" total_rows>0 && row.item.imProdInstDet!=''">  
    <b-button style="text-align: center" :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1"> 
      More Details
    </b-button>
  </div>
</template>

I'm trying to center the button within the cell using margin:auto; display:block; as suggested in this guide: how to center the button inside a table cell but it doesn't seem to be working.

html css vue.js button html-table

Answer 1

Answer №1

Customize the style and classes for each column in the field object.

Here is an example:

<template>
  <div id="app">
    <b-table striped hover :items="items" :fields="fields">
      <template v-slot:cell(button)="data">
        <b-button>test</b-button>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    fields: ['id', 'name', { key: 'button', class: 'text-center' }],
    items: [
      { id: 1, name: 'Row 1' },
      { id: 2, name: 'Row 2' },
      { id: 3, name: 'Row 3' },
      { id: 4, name: 'Row 4' },
      { id: 5, name: 'Row 5' },
    ],
  }),
};
</script>

Answer 2

Customize the style and classes for each column in the field object.

Here is an example:

<template>
  <div id="app">
    <b-table striped hover :items="items" :fields="fields">
      <template v-slot:cell(button)="data">
        <b-button>test</b-button>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    fields: ['id', 'name', { key: 'button', class: 'text-center' }],
    items: [
      { id: 1, name: 'Row 1' },
      { id: 2, name: 'Row 2' },
      { id: 3, name: 'Row 3' },
      { id: 4, name: 'Row 4' },
      { id: 5, name: 'Row 5' },
    ],
  }),
};
</script>

Centering a button within a table-cell through movement

Answer №1

Similar questions

How can you easily center content vertically on a web page?

When I employ ngroute, the Angular section in the html page does not display

Apply CSS styling (or class) to each element of a React array of objects within a Component

JavaScript: Locate the HTML Attribute that Matches an ID

Cypress - Locate and interact with a button containing specific text

Adjusting the height of one element based on the height of another element in multiple cases using jQuery

How can you ensure that text inside a tag is styled as italic using font-style: italic and the !important keyword in HTML and CSS?

Conceal certain elements from being printed by the client side on a website

hidden behind the frame is a drop-down menu

Why does the scrollbar appear even when the inner element is smaller in CSS transformation?

Implementing Dynamic CSS Styles in AngularJS

Utilizing AJAX to submit a combination of text fields and files in an HTML form

I'm experiencing difficulties with JS on my website. Details are provided below – any suggestions on how to resolve this issue

[VUE ALERT]: Issue found in mounted hook: "The variable this.$refs.canvas is not defined."

How can we stop every tab pane in (bootstrap five) from sharing the same scroll position? Each tab is currently synchronized with the scroll position of the others

One way to target a span inside a label element when a checkbox is checked using React Material UI createStyles is by using CSS selectors in combination with

Styling multiple checkbox items in an Angular Material Autocomplete

Is it possible to use Vuelidate to require either input field 1 or input field 2 with an "or" validator?

Having trouble with Javascript? Your page unexpectedly resets

How can I make my opacity change on hover without the need for JavaScript?