Dynamic root div background css issue

Sajith Gopalakrishnan Hema 1,036

Unable to make the background to transparent due to dynamic root divs.

Trevor Seward 11,706 Reputation points

2021-01-02T19:39:54.623+00:00

Is this a custom solution or out of the box on a modern site? Modern site DOM manipulation isn't supported which is why I ask.

2 answers

Amos Wu-MSFT 4,051 Reputation points

2020-12-22T02:03:56.85+00:00
The property corresponding to transparency in CSS is opacity.
The value of the opacity property can be set from 0.0 to 1.0. The smaller the value, the more transparent.
Demo:

opacity: 0.4; <div style="width: 200px; height: 200px; border: 1px solid black;">
<div style="width: 100px; height: 100px; opacity: 0.4; background-color: blue;"></div>
</div>

opacity: 1;

<div style="width: 200px; height: 200px; border: 1px solid black;">
<div style="width: 100px; height: 100px; opacity: 1; background-color: blue;"></div>
</div>

Or you could use RGBA as the background-color's value.

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Sajith Gopalakrishnan Hema 1,036 Reputation points

2020-12-22T05:00:19.657+00:00

Thanks for the details. Dynamically the classes are created like root-73,root-72 and it has background color which causes the background issue.

How to override this class in the spfx webpart ?

Amos Wu-MSFT 4,051 Reputation points

2020-12-22T07:18:00.243+00:00

You could add a custom class to the component and add the style in .scss file with your custom class.
Because I don’t know the HTML structure of your component after rendering, I’m not sure if it can work on the div you want.
When the transparency of the child div is 0, the color of the parent div is displayed, and it seems that it cannot be changed.
If you need further help, please share me the SPFX webpart code.

Sajith Gopalakrishnan Hema 1,036 Reputation points

2020-12-22T09:32:15.103+00:00

The Code is

public render(): React.ReactElement<IQuestionareListProps> {
return (
<div className="header-quest">
{this.state.updateText.map((row, index) => (
<a href={row.url} target="_blank" data-interception="off" className="questionare-title">{row.title}</a>
))}
</div>
);

.scss file is

.questionareList {
.container {
max-width: 700px;
margin: 0px auto;
}
.header-quest{
background-color:transparent !important;
opacity: 0.0 !important;
}
.row {
@Bill ms-Grid-row;
@Bill ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}

.column {
@Bill ms-Grid-col;
@Bill ms-lg10;
@Bill ms-xl8;
@Bill ms-xlPush2;
@Bill ms-lgPush1;
}
.
etc....

Amos Wu-MSFT 4,051 Reputation points

2020-12-22T09:46:37.27+00:00

You could npm jQuery to get the ControlZone div, otherwise it is not easy to change the style of this div.

Sajith Gopalakrishnan Hema 1,036 Reputation points

2020-12-22T10:10:04.283+00:00

Could you please elaborate more on npm jQuery to get the ControlZone div.

Three Outer Divs are generated automatically and class root-73 is causing the issue. It is dynamic and
changes to root-74,root-75 etc

The root class issue was not there before. I think there is a recent update.

Amos Wu-MSFT 4,051 Reputation points

2020-12-23T01:58:57.517+00:00

I test with my custom SPFX for your reference:

componentDidMount() { console.log($(".ControlZone--emphasisBackground ")) }

You could use $().css() change the div style.
jQuery - css() Method

Amos Wu-MSFT 4,051 Reputation points

2020-12-28T04:45:12.203+00:00

Hi @Sajith Gopalakrishnan Hema ,
Do you have any update on this issue?

Amos Wu-MSFT 4,051 Reputation points

2020-12-31T09:34:42.48+00:00

I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.
You can accept the helpful post as an answer to help other community members find helpful information quickly.
You can also share your own solution here and mark it as the answer, and we can learn from each other.

Sajith Gopalakrishnan Hema 1,036 Reputation points

2021-01-02T09:34:33.52+00:00

Due to some reason, the divs are generated differently for me. Like Root-75, root-74 etc
<div class="root-75 ControlZone--control"> which cause the backgroud issue.

We are not getting class at all - ControlZone--emphasisBackground

Amos Wu-MSFT 4,051 Reputation points

2021-01-04T01:30:53.913+00:00

That is an example to prove that we can get the corresponding element.
The dynamically generated div tag can use the attribute selector.
jQuery selector
You could try this:

$("class^='root'")

Then you can get all the elements with the class attribute starting with 'root', and then pass other values and attributes in the loop to determine whether it is the div you want.

Sajith Gopalakrishnan Hema 1,036 Reputation points

2021-01-06T04:51:33.14+00:00

Thanks for the help. If we customize this, is it fine ? Microsft releases new updates periodically and does it overwrite this style customization ? (Like Events Calendar - Screenshot shared above)

Amos Wu-MSFT 4,051 Reputation points

2021-01-06T07:07:19.527+00:00

We co these actions in the componentDidMount function, this method will be executed after the component is mounted, and it will take effect if the selector is correct.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Julian Aguilar Zapata 0 Reputation points

2024-05-30T15:46:15.0166667+00:00
I had the same problem. The solution was to search for global (or main) styles and add the following lines.

[class^="root-"] { background-color: transparent; } [class^="emphasisBackground-"] { background-color: transparent; } .CanvasComponent.LCS .ControlZone .ControlZone--position{ background-color: transparent; }
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Dynamic root div background css issue

2 answers

Your answer