Use paddingRight instead of marginRight in DataTable?

UI Components for React
Post Reply
dobeedo
Posts: 6
Joined: 12 Sep 2017, 16:46

12 Sep 2017, 17:08

I had an ask to change the background color of the scrollbar's header. Because right now it is using marginRight to set the margin, it makes it difficult to change its background color. Would it be possible to use paddingRight instead in the following file? Thanks.

\datatable\ScrollableView.js
key: 'alignScrollBar',
value: function alignScrollBar() {
var scrollBarWidth = this.hasVerticalOverflow() ? _DomHandler2.default.calculateScrollbarWidth() : 0;

this.scrollHeaderBox.style.paddingRight = scrollBarWidth + 'px';
if (this.scrollFooterBox) {
this.scrollFooterBox.style.paddingRight = scrollBarWidth + 'px';
}
}

cagatay.civici
Prime
Posts: 18183
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

14 Sep 2017, 12:18

When I try it I don't see a difference in the UI. Can you send a screenshot to show difference between marginRight and paddingRight in header-box element.

dobeedo
Posts: 6
Joined: 12 Sep 2017, 16:46

14 Sep 2017, 22:27

You won't see a difference until you set the background color of the header because margin background is transparent.
I ended up using the code to change the background color.

componentDidUpdate() {
let headerbox = document.getElementsByClassName('ui-datatable-scrollable-header-box')[0];
headerbox.style.paddingRight = headerbox.style.marginRight;
headerbox.style.marginRight = "0px";
headerbox.style.backgroundColor = "#bec3cc";
}

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest