CODEWITHSUNDEEP
htmlcssvue.jsbootstrap-vue
Techno
Techno

Reputation: 1696

How to edit styling for b-table selectable

I have a hard time figuring out how b-table adds the thick border when you click on a b-table row, when the b-table has selectable on.

//someidea component
<template>
    <b-table striped hover
             :items="ideas"
             :fields="ideaFields"
             @row-clicked="markRead" //this turns on selectable by default.
             ref="table">
    </b-table>
</template>

<script>
    export default {
        name: 'someidea',
        data()
        {
            return {
                ideas: [{
                    title: 'Some idea',
                    description: 'Some description',
                    _rowVariant: 'warning',
                }],
                ideaFields: [
                    {
                        key: 'title',
                        sortable: false,
                    },
                    {
                        key: 'description',
                        sortable: false,
                    }
                ],
            }
        },
        mounted()
        {

        },
        methods: {
            markRead(record, data, datax)
            {
                record._rowVariant = '';
            },
        },
    }
</script>

Before clicking

Before click

After clicking

After click

Now when you click on the row, it does empty the _rowVariant, changing it from yellow bg to white bg as expected. The problem that the row gets a thick border for getting focus(dont know if it really is focus but cannot describe it any better). I've checked in the inspector in both chrome and firefox(both recently updated) and I do not see any change in the focussed row, but it does get the border so im not sure how they applied it.

One important sidenote based on b-table documentation(first example table):

b-table supports programmatically selecting and de-selecting the selected row. This does sadly not apply to my situation. The clicked row is not really selected, more like focussed. If you click twice on the row in the documentation(again first table), you see that it becomes deselected but still has the border.

Ive tried this too(without success):

tr:focus {
    border: none !important;
}

I hope anyone can help me out with this because even though having an ugly border is not the end of the world, it bugs me I cannot find how this style is being applied.

Thanks in advance.

Upvotes: 1

Views: 1104

Answers (1)

Fletcher Rippon
Fletcher Rippon

Reputation: 1975

Solution

Change border to outline like this:

tr:focus {
  outline: none;
}

You can also do this:

tr:focus {
  outline: 0;
}

The outline property is used by :focus styles by default. The purpose of outline is to make the element stand out. outline is drawn around the border.

The difference between outline & border

  • Outlines are not a part of the box model.
  • Outlines do not change the size or position of the element.
  • Outlines cant set each edge to a different width, or set different colours and styles for each edge. An outline is the same on all sides (All sides must be uniform in colour, width and style).
  • Outlines do not take up space they are placed on top of the element (outlines do not interfear with the element itself or other elements around them).
  • Outlines can not be circular.

Upvotes: 1

Related Questions