Troubleshooting CSS

Figuring out what went wrong is one of the key aspects of developing something with any instrument. CSS is no stranger to creating this type of occurrences either, especially when being applied to components of a dynamically changing dashboard.

The following tips may help you to deal with various issues when implementing custom CSS to Web UI components. Look at the end of the article to find the combined list of most common things that may occur and how to get them solved.

Identifying Issues with CSS

To find out what is preventing your styles from being applied, use the built-in browser developer tools.

  1. First, make sure that your styles are assigned to the target element at all. Open the browser’s developer tools by pressing F12 on Windows/Linux or Option + ⌘ + I on Mac.

  2. In the developer tools, enable the Inspector Tool available in the top-left corner of the opened window.

  3. Hover over the element in question with the cursor and click on it to inspect its CSS properties.

  1. Examine the Styles properties of the selected element. If you struggle to find the CSS you’ve added to the element, try switching to the Computed tab and look for one of the properties that you’re trying to change there. If property is in the list, expand it to inspect the cascade of rules defining its value and look for the one you’ve added.

  1. If you still can’t find any of your styles in the Computed properties, there is something with the CSS you’re trying to apply. In that case, figure out what went wrong on the property side and that hopefully will solve the issue.

  2. If your CSS is indeed among other styles, but was discarded because of a rule with higher weight (this way it will appear as strikethrough lines), proceed to resolving the found conflict.

Checking the Added Styles

If you don’t see your custom styles among all that are assigned to the element even being overridden by another rule, the issue might be with the styles themselves.

  1. Check if your CSS rule targets an incorrect HTML element. This could be because of an extra/missing element or a combinator in the rule, or just a typo messing it up.

Read the Using Selectors article to get a better understanding of composing selectors for CSS rules in the UI Builder.

  1. If you’re sure that the selector is correct from the perspective of the target element’s position in the DOM, and you have it written in the Element CSS Style property of the Element Style property group in the component Properties Editor:

    • Make sure that you don't use HTML elements located outside of the component’s Element markup as a part of the selector. In Iotellect CSS Editor, the starting point of selection isn’t the document’s <html> tag, but the outermost HTML wrapper of the thing that is addressed with the custom style property

    • Check around if there are any other custom CSS style properties the component has, that are made to directly style the element you’re working on

    • If no additional dedicated style fields are available and changing the rule doesn’t help, try to move the problematic piece of CSS to the Container Style property of the Container Properties property group.

  2. If you’ve plugged in your custom CSS as a link to an external file or a Media Library entry, check if it appears in the document <head> section and has the right content.

Resolving Rule Conflicts

There are two reasons why you may encounter conflicts when applying custom CSS to a component:

  • You have another CSS rule written that matches the same element and has bigger weight due to its specificity.

  • One of the default component styles has a more specific selector than the one you’re using in your custom style.

  1. If the culprit is your own custom CSS from somewhere else, you have all the freedom to change either of the rules to get the styles applied as you intended.

  2. If the conflict occurs between custom CSS and the component’s default styles, adapt your selector to overcome the weight of the one that causes the conflict. Usually, adding a class or two to your selector is enough to override anything coming from the default CSS.

All Iotellect web components have the default set of styles that are responsible for how the components look and interact out of the box.

In many cases, CSS added in the style properties in the component Properties Editor just overrides the initial styles without any issues, as those properties have the most priority to apply styles from.

In some cases, though, especially with more complex components, the default component CSS may use rather specific selectors to style the component’s elements, which may cause conflicts.

The Important Flag

Among the ways to deal with a stubborn custom style that doesn’t want to apply as it’s supposed to, there is the infamous !important CSS flag.

When used with a CSS property, the !important CSS flag alters the rules selecting declarations inside the cascade, making the property the most prioritized one no matter the selector specificity of the rule or other factors.

A ! delimiter followed by the important keyword marks the declaration as important. The syntax looks like this:

property: value !important;

If several properties targeting the same elements have an !important flag and compete to apply, the default selector specificity takes the role back in defining which rule will be applied.

In very rare cases you might come across component elements that have inline CSS styles declared as a value of their style attribute. If the styles there aren’t for defining the current values of dynamic properties, using !important flags is the only option to override them.

Despite being one of the most recommended practices to keep yourself away from, it might help in troubleshooting custom CSS styles. When used temporarily to test if a style is assigned at all or if it looks right before adjusting the selector, this flag can help to understand that you are on the right way styling a component.

Avoid using !important to override specificity for any reasons besides troubleshooting or overriding inline HTML element styles. It is never the right choice to use the flag in a real project and only generates more issues with time.

Common CSS Issues

Here is the list of the most common things you may encounter while working with web component styles in the UI Builder, and how to approach dealing with them.

Issue

Custom CSS doesn’t appear in component styles.

Solution

Follow the Identifying Issues with CSS and Checking the Added Styles sections of this article.

Issue

Default component’s style isn't overridden with custom CSS.

Solution

  1. Adapt your selector to overcome the weight of the one that causes the conflict

  2. Use an !important flag if you’re trying to override an inline style property value

Issue

CSS file plugged to a dashboard fails to apply.

Solution

  1. Make sure the file is attached to the dashboard as it is described at the end of the Adding Custom CSS Files to a Dashboard example

  2. If you’re sourcing the CSS file from an external resource, check its current availability

  3. If you’re plugging the CSS file from the Media Library, set its caching settings to PUBLIC as it is described in the Uploading Assets to the Plugin example

  4. Check the validity of the CSS in the file using any available service

  5. Follow the same procedures as for the custom component CSS style properties to further troubleshoot the issue

Issue

Font plugged to a dashboard fails to apply when used.

Solution

  1. Make sure the font is attached to the dashboard as it is described in the Plugging Fonts to a Dashboard example

  2. If you’re sourcing the font from an external resource, check its current availability

  3. If you’re plugging the font file from the Media Library, set its caching settings to PUBLIC as it is described in the Uploading Assets to the Plugin example

  4. Check if the font-family property is applied correctly as it’s described in the Applying Fonts to a Component example

  5. Follow the same procedures as for other CSS style properties to further troubleshoot the issue

Issue

Recent CSS changes are ignored.

Solution

  1. Try to refresh the browser’s cache using Ctrl + F5 on Windows/Linux or ⌘ + ⇧ + R on Mac

  2. In case the selector in the problematic style were changed, check if the new notation is still correct

  3. Figure out if there were any changes in other properties of the component you’re working on that may have affected its HTML structure and attributes

  4. If you’re sourcing a CSS file from an external resource, check its current availability

  5. If you’re plugging a CSS file from the Media Library, set its caching settings to PUBLIC as it is described in the Uploading Assets to the Plugin example

  6. Follow the same procedures as for the general case of CSS style properties not being applied to further troubleshoot the issue

Issue

Scrollbars appear within a component’s container.

Solution

  1. Investigate the component’s markup using browser’s Developer Tools and try to find the HTML element with a size bigger than the area the component takes on the dashboard, hence overflowing the existing box boundaries

  2. Check the value of the Content Overflow property in the Container Properties property group of the component. You might need to change it to hidden or visible depending on the case

  3. If you’re using an overflow CSS property in the custom style, check how the markup behaves if you set it off

  4. If you’re not using an overflow CSS property within the component style, locate the HTML element with the scrollbars in the dashboard’s DOM and try to apply the property with a suitable value to it or its descendants

Was this page helpful?