New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistant .table-active color #24529

Open
gillerr opened this Issue Oct 24, 2017 · 4 comments

Comments

Projects
None yet
6 participants
@gillerr

gillerr commented Oct 24, 2017

According to your documentation at http://getbootstrap.com/docs/4.0/content/tables/, table-active class can be applied to either tr's, td's or th's. But the resulting background color will be different, with a darker color for tr's.
This could be seen in the following plunker:
http://plnkr.co/edit/aYMqCL0dKLPq9vPdDpWH?p=preview

The reason is that table-active is defined with an opacity and is applied to both the trand its td's / th's.

To fix that, instead of this selector:

.table-active, .table-active>td, .table-active>th

I would simply use:

.table-active

Another solution would be to use #ECECEC instead of rgba(0,0,0,.075).

@andresgalante

This comment has been minimized.

Member

andresgalante commented Oct 24, 2017

Hi @gillerr Thanks for reporting this.

@mdo There is a comment on the table variant mixin mentioning the reason why we use >td, >th selectors here:
https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_table-row.scss#L8-L9

But it's not only causing the problems described on this issue but also avoids having an active cell inside a colored row, like this:
screen shot 2017-10-24 at 9 03 21 am

For now I'll add this comment, it'd be awesome if anyone wants to tackle this one. if not I'll probably have time to jump into it this week

@andresgalante

This comment has been minimized.

Member

andresgalante commented Oct 27, 2017

One more note about table-active: it's almost invisible when the table is table-dark

@andresgalante

This comment has been minimized.

Member

andresgalante commented Oct 27, 2017

@mdo I am sure I am missing something, I tried to track down the history of why we use the table-row-variant for active tables but I got lost.

Why can't we use something like this:

.table-active { background-color: $table-active-bg; }

.table-dark {
  &.table-active,
  .table-active {
    background-color: $table-dark-active-bg;
  }
}

@gijsbotje Can you help me out?

@andresgalante andresgalante added this to Inbox in v4 Beta 3 via automation Oct 31, 2017

@andresgalante andresgalante referenced a pull request that will close this issue Nov 3, 2017

Open

WIP: Simplifies and improves table backgrounds #24660

@mdo mdo added this to Inbox in v4.0 stable via automation Nov 24, 2017

@mdo mdo removed this from Inbox in v4 Beta 3 Nov 24, 2017

@XhmikosR XhmikosR added the has-pr label Jan 15, 2018

@mdo mdo added this to Inbox in v4.1 via automation Jan 18, 2018

@mdo mdo removed this from Inbox in v4.0 stable Jan 18, 2018

@mdo mdo removed this from Inbox in v4.1 Mar 24, 2018

@mdo mdo added this to Inbox in v4.2 via automation Mar 24, 2018

@tpinne

This comment has been minimized.

tpinne commented Jul 2, 2018

The same problem exist with any contextual class if it has an opacity. For example if one defines some color variables with opacity. This gets even more interesting in combination with a striped table as you can see in this Plunkr http://next.plnkr.co/edit/y6FAFciwWTdbdsmK

Expected result would be that all elements with the table-danger class would have the same background color. But depending on the combination of tr-class, td-class and striped table there are numerous variations because of the layered transparent colors.

bildschirmfoto 2018-07-02 um 11 12 52

@mdo mdo removed this from Inbox in v4.2 Oct 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment