Mark tooling header with extra css class

[it-xtech-dev]

Hello, I would like to add some styling to upper table bar that contains search and action buttons. Currently container is not explicity marked with any class so styling has to relay on tr position which is weak...

Can you add extra class here: (https://github.com/rubanraj54/vue-bootstrap4-table/blob/master/src/components/VueBootstrap4Table.vue)

<tr v-if="showToolsRow">

To

<tr v-if="showToolsRow" class="vbt-table-tools">

?

[rubanraj54]

Hi @it-xtech-dev Thanks for notifying me.

Currently, you can target the upper header bar using vbt-header-row class which includes the search and action buttons. Look at line 17. https://github.com/rubanraj54/vue-bootstrap4-table/blob/70a96e55cf5b8d836353a9509de35ea3db9a4dcb/src/components/VueBootstrap4Table.vue#L17

You can add your styles with vbt-header-row class as a reference. If you still think you need a class on the element itself, please let me know.

Cheers, Ruby.

[it-xtech-dev]

I've seen vbt-header-row but its is below container that i need to style. I would like to remove padding out of ToolsRow. I have updated original question because code examples where not displayed (I didnt marked them as code).

This is what i would like to achieve: https://i.imgur.com/wJZKf2x.png

Right now i use: .vbt-table-wrapper thead tr:first-child th { padding: 0; border-top: 0; }

But i won't work when Tools will be hidden. In that case table header row will have no padding - and that is not intended

[rubanraj54]

Yup, it makes sense @it-xtech-dev. I will add proper classes to all potential elements.

Cheers, Ruby.

[rubanraj54]

Hi @it-xtech-dev

I added the class to the tool header row. You can use this class 'vbt-table-tools' to style the header row.

Cheers, Ruby,

[it-xtech-dev]

Thanks very much!

wt., 20 sie 2019 o 20:58 Rubanraj notifications@github.com napisał(a):

Hi @it-xtech-dev https://github.com/it-xtech-dev

I added the class to the tool header row. You can use this class 'vbt-table-tools' to style the header row.

Cheers, Ruby,

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rubanraj54/vue-bootstrap4-table/issues/64?email_source=notifications&email_token=AFOHFKKYV6W3KWWZNHNDMSDQFQ5GHA5CNFSM4IIPHRX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4XKKFY#issuecomment-523150615, or mute the thread https://github.com/notifications/unsubscribe-auth/AFOHFKKT434KAMCFW2WD7LLQFQ5GHANCNFSM4IIPHRXQ .