Ui-table and css - fails for more than one table

Dashboard
1

Hi there,

due to a private discussion with a fellow member of this forum I came across a limitation of my approach to customize a ui-table with css.

While it works great for one table, it falls back to default if I choose more than one table.

It works as follows:

  • set a ui-table according to your needs and assign it to ui-group "whatever"
  • add a ui-template, set Template Type to "Widget in group", assign it to the same ui-group "whatever" and apply your css code

Check the example I posted here.

Now:

If I want to add more ui-table nodes to the very same ui-group "whatever" the css adjustments in ui-template are ignored. All tables are shown with default/standard layout. Is this by design, an error or do I miss something here?

Note:

A workaround that works: Assign each additional table to a separate ui-group, uncheck "Display group name" and arrange those tables as needed on the dashboard page. However, downside is, that it requires multiple clones of the very same ui-template. Each assigned to a different ui-group though.

2

The general assumption is that the dashboard is themed once and that all instances of widgets pick up the overall theme. I suspect the workaround you have that allocates each to it's own template then allows you to target your CSS more precisely is probably the best answer.

3

Thanks dceejay for your answer. So I am not missing a bit here. It works as designed.

4

Does that explain why, with more than one table, the css applies to none of them? I would have expected it to apply to all of them.

5

That was my assumption as well. I just tested it again. And it is even crazier.

If, in my setup, I just clone my ONE table, both table show in the same group, however, layout is back to default.

If I then re-assign the table clone to another group of that page, my customizing applies to both table. Even though the ui-template node is neither cloned as well nor is it in any way assigned to the ui-group of the clone.

Further tests and further craziness:

If I swap the ui-group in the ui-template to that assigned to the table clone's group, my tables are back to default layout and my css is completely ignored.

original table assigned to [Z]A
cloned table assigned to [Z]B

ui-template assigned to [Z]A --> my css customization works fine for both table
ui-template assigned to [Z]B --> my css customization doesn't work for both table

Does the alphabetical order of groups have an effect here? In the final gui itself, [Z]A is listed below [Z]B :smiley:

DISCLAIMER: I have no clue about CSS at all. I "developed" my solution based on trial and error. I only have a vague gut feeling how things work, but I am at least able to share my observation here :smiley:

6

Clear the browser cache when anything odd happens just to make sure that is not the problem.

7

I did so with both, Safari and Firefox on macos.

8

OK, it was just a thought. I think you will have to wait for Dave or someone who knows more about css to comment further.