Be aware: this query has been considerably edited to make it extra clear what I’m asking…
I’ve a div that I need to cover if a div within it’s empty. I have been in a position to accomplish this by doing the next:
div.inside
{
background-color: inexperienced;
width : 100%;
top : 100%;
/* the magic occurs right here */
&:has(div.inside-text:empty)
{
show : none;
}
}
On iOS & iPadOS Safari (utilizing model 26.3), I discover that when the inside-text div is empty, the within div doesn’t cover. This works completely advantageous on Chrome and Firefox.
What’s the correct solution to get this to work on iOS/iPadOS?
The pattern code right here hides the within div if the checkbox is checked (which in flip units the innerHTML of the inside-text to "").
That is what it seems like unchecked:
That is what it seems like on Chrome when checked:
That is what it seems like on the iPad (not working):
const checkBox1 = doc.getElementById("checkbox");
const insideDiv = doc.getElementById("inside-text");
checkBox1.addEventListener("change", perform(){
if (this.checked) {
insideDiv.innerHTML = "";
} else {
insideDiv.innerHTML = "Textual content in right here";
}
});physique
{
background-color: grey;
}
div.container
{
background-color: white;
place : mounted;
prime : 50%;
left : 50%;
width : 50%;
top : 50%;
remodel: translate(-50%, -50%);
border : 1px black stable;
}
div.inside
{
background-color: inexperienced;
width : 100%;
top : 100%;
&:has(div.inside-text:empty)
{
show : none;
}
}
div.inside div.inside-text
{
background-color: pink;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Check</title>
</head>
<physique>
<enter kind="checkbox" id="checkbox"> Cover textual content in backside div. (White if checked.)
<div class="container">
<div class="inside">
<div class="inside-text" id="inside-text">Textual content in right here</div>
</div>
</div>
</physique>
</html>
