SAP Knowledge Base Article - Public

3491931 - Child widgets inherit CSS opacity property from parent widget in SAP Analytics Cloud (SAC)

Symptom

The opacity property in the Panel CSS class is inherited to any child widgets it contains.

Environment

SAP Analytics Cloud (Enterprise) 2024.13

Reproducing the Issue

  1. Create shape as a background.
  2. Put Panel on top of the shape.
  3. Put a Button inside of the panel so that it intersects with the underlying shape.
  4. Create a CSS class for the panel setting its opacity to 50%:
    .myPanel  .sap-custom-panel-widget {background-color: Blue; opacity: 0.5}
  5. Add myPanel CSS class to the panel.
  6. The button will now also have an opacity of 50%

Cause

  • This is expected behaviour of web forms and the Opacity property.
  • Opacity property of a parent object is applied to child objects and override their opacity setting.
  • This is a web standard that is followed by Web Browser rendering engines.
  • For example the following code demonstrates this behaviour outside of SAC: 
    • <!DOCTYPE html>
      <html>
      <head>
      <style>
      div {
        background-color: #4CAF50;
        padding: 10px;
      }

      div.example {
        opacity: 0.5;
      }

      </style>
      </head>
      <body>
      <div class="example"><p>Opacity Test</p><button type="button">Click Me</button>
      </div>
      </body>
      </html>

Resolution

  • To set a parent object's opacity without affecting the child object use the colour property's alpha channel.
  • For example to set the panel to 50% opacity and the colour blue you could set its colour like this:
    • .myPanel .sap-custom-panel-widget {background-color: rgba(0,0,255,0.5)}

Keywords

SAP Analytics Cloud, SAC, inheritance , KBA , LOD-ANA-AD , Analytics Designer , Problem

Product

SAP Analytics Cloud 1.0