Skip to content
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

Missing class in reports datatables (tbody tr) #10220

Closed
tassoman opened this issue Jun 7, 2016 · 3 comments
Closed

Missing class in reports datatables (tbody tr) #10220

tassoman opened this issue Jun 7, 2016 · 3 comments
Labels
answered For when a question was asked and we referred to forum or answered it.

Comments

@tassoman
Copy link
Contributor

tassoman commented Jun 7, 2016

As you can see in the attached screenshot, the <tr> tag inside report's <tbody> datatable has no class, it's an empty space. <tr class=" " [...]>

That's causing issues on custom theming alternate rows in visitors datatables. No problems inside actions datatables (forum topic about it) because of class definition: level0, level1, level3 ...

istantanea_2016-06-07_14-11-50

@tsteur
Copy link
Member

tsteur commented Jun 10, 2016

I'm not quite sure, which class is missing here? Is the class actually needed in this case for alternate colors ? Does maybe using tbody tr:nth-child(even) td { background-color: darken(@theme-color-background-tinyContrast, 10%) !important;} work as well?

@tassoman
Copy link
Contributor Author

tassoman commented Jun 13, 2016

Until now I've solved using this rules in my theme.less

table.dataTable tbody tr:nth-child(odd) td,
table.dataTable tbody tr.level0:nth-child(odd) td { background-color: @theme-color-background-tinyContrast !important; }
table.dataTable tbody tr.level1:nth-child(odd) td { background-color: darken(@theme-color-background-tinyContrast, 5%) !important; }
table.dataTable tbody tr.level2:nth-child(odd) td { background-color: darken(@theme-color-background-tinyContrast, 10%) !important; }
table.dataTable tbody tr.level3:nth-child(odd) td { background-color: darken(@theme-color-background-tinyContrast, 15%) !important; }
table.dataTable tbody tr.level4:nth-child(odd) td { background-color: darken(@theme-color-background-tinyContrast, 20%) !important; }
table.dataTable tbody tr.level5:nth-child(odd) td { background-color: darken(@theme-color-background-tinyContrast, 25%) !important; }

normal tr «oddity» takes @theme-color-background-tinyContrast then, going deeper in action tree datatable's rows you get 5 shades of grey 5% darker.

Rendered html by the browser draws <tr class=" ", doesn't create aesthetic problem but I don't think is strictly correct to declare empty arguments in html tags.

@tsteur
Copy link
Member

tsteur commented Jun 13, 2016

Thanks for letting us know. I will close the issue for now. While it's not strictly correct to declare empty arguments and causes more bandwidth etc we sometimes have these cases. It's a bit of a trade-off when it's simpler to maintain cases like this: https://github.com/piwik/piwik/blob/2.16.1/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig#L37

@tsteur tsteur closed this as completed Jun 13, 2016
@tsteur tsteur added the answered For when a question was asked and we referred to forum or answered it. label Jun 13, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
answered For when a question was asked and we referred to forum or answered it.
Projects
None yet
Development

No branches or pull requests

2 participants