CSS issue in Rockway

  • 2
  • Problem
  • Updated 2 years ago
  • Not a Problem
Just updated our environment to Rockway and we are noticing that some CSS isn't working as expected.
Here is a scenario:
I have a page title (standard and no special CSS)
inside that we have some buttons and 2 of them have a CSS class to set display:none.
by previewing it, its not following the css, checked in our other sand box that still have the older skuid release, buttons are not showing up as expected.

Any idea whats going on?

Tanzir-
Photo of Tanzir Riad

Tanzir Riad

  • 414 Points 250 badge 2x thumb

Posted 2 years ago

  • 2
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
Official Response
In short, Kartik's analysis is correct... a style attribute now appears on buttons when they first render, which will override your custom CSS rule.

The Longer Explanation

The internal implementation of buttons within a Page Title changed between Superbank and Rockaway. Buttons always added the style attribute once they were "un-rendered" (and would keep them even after rendering again). This was inconsistent with the behavior of some other components, however, so the rendering logic was refactored to be more consistent across all of Skuid.

Unfortunately, this means that regular CSS rules will no longer be able to change the "display" property for initially rendered buttons in Rockaway orgs since the style attribute has a specificity of 1,0,0,0 which wins against most other rules.

Next Steps

In general, Skuid recommends that you use Conditional Rendering to show and hide buttons. Conditional Rendering is a supported feature and we run many tests to ensure that it works the same from one version of Skuid to the next, unlike custom CSS rules which may break (though we do our best to minimize that as well).

If Conditional Rendering isn't an option for you for some reason, there are a couple other things you could try, though keep in mind that it is the responsibility of the org admins/developers to support and maintain custom extensions since, unfortunately, we cannot guarantee that they will work in future versions of Skuid.

The !important rule is one solution and would probably require the least amount of effort on your part. It's like bumping your CSS specificity up to 1,0,0,1,0 (which beats 1,0,0,0). There are, of course, many potential issues with a rule that uses !important, but that doesn't mean that you should never use them. SeeĀ !important CSS Declarations: How and When to Use Them.

Another option is to use custom Javascript, but this is probably overkill for your requirements and would be far more complex and difficult to maintain.

We are always listening to our customers!

If you feel that there is a gap in Skuid's features requiring a CSS rule (like "display: none"), please tell us your use-case and we'll consider how we might improve the product to address your scenario. We've delivered many features based on user feedback, and we'd rather have something baked into the product and fully supported than requiring you to fall back on custom CSS.