Custom CSS for Components

Anvil Q&A
1

What I’m Trying to Do:

I’m trying to style a ColumnPanel (named content_panel) in my Anvil app. The goal is to add visible CSS changes such as a bright orange border, rounded corners, shadow, padding, and a light background.

What I’ve Tried and What’s Not Working:

  1. Using Roles:

    • I defined a custom role in theme.css (e.g., .anvil-role-custom-panel) and assigned it to content_panel via the role property. However, the role doesn’t appear in the dropdown, and manually setting it in Python didn’t work.

  2. Targeting the Panel in CSS:

    • I used .anvil-component-content_panel in theme.css to apply styles directly by the component name. This also didn’t apply the styles.

  3. Inline Styling in Python:

    • I applied styles via self.content_panel.style = {...} in Python. No visible changes occurred.

  4. JavaScript:

    • I added JavaScript in a native.js file to style the content_panel using document.querySelector(). This approach didn’t show any errors but still didn’t apply the styles.

Code Sample:

Here’s the Python code I used in my app:

from ._anvil_designer import Form1Template
from anvil import *
import anvil.js

class Form1(Form1Template):
    def __init__(self, **properties):
        # Set Form properties and Data Bindings.
        self.init_components(**properties)
        
        # Inline style attempt
        self.content_panel.style = {
            "border": "3px solid #FF5733",
            "border-radius": "20px",
            "padding": "20px",
            "box-shadow": "0px 4px 8px rgba(0, 0, 0, 0.2)",
            "background-color": "#f9f9f9"
        }

        # JavaScript attempt
        anvil.js.call_js("styleContentPanel")

Here’s the native.js file:

function styleContentPanel() {
  const contentPanel = document.querySelector('.anvil-component-content_panel');
  if (contentPanel) {
    contentPanel.style.border = "3px solid #FF5733";
    contentPanel.style.borderRadius = "20px";
    contentPanel.style.padding = "20px";
    contentPanel.style.boxShadow = "0px 4px 8px rgba(0, 0, 0, 0.2)";
    contentPanel.style.backgroundColor = "#f9f9f9";
  }
}

Here’s the theme.css entry I used:

.anvil-role-custom-panel {
    border: 3px solid #FF5733;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #f9f9f9;
}

.anvil-component-content_panel {
    border: 3px solid #FF5733;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #f9f9f9;
}

Additional Notes:

I’ve tried refreshing the Anvil editor, clearing browser cache, and ensuring no conflicting styles are overriding these. Despite these attempts, the content_panel remains unaffected.

Any advice or insights would be greatly appreciated! Thank you in advance. :blush:

2

Welcome to the forum!

Did you also define the role in the Theme section in the IDE?

image

To apply CSS directly to an Anvil component in Python, use the anvil.js bridge. Something like:

node = anvil.js.get_dom_node(self.content_panel)
node.style.fontSize = "20px"

Once you have the node from anvil.js.get_dom_node, you’re affecting the HTML element directly and can use Javascript techniques.

3 Likes