CSS rule hides picture upload widget in blog

[MacLake]

I use django-cms==3.11.5. With the CSS rules of djangocms-admin-style==3.3.0 the picture upload widget in the blog entries in djangocms-blog==2.0.7 are hidden.

The culprit is in djangocms_admin_style/sass/components/_forms.scss:

form {
    margin-bottom: 20px;
    padding: 25px 25px;
    background-color: $white;
    box-shadow: $base-box-shadow;
    fieldset, .inline-group {
        width: 80%;
    }

    // Newer Django admin styles use flexbox, we do not
    .flex-container {
        display: block;
        margin-right: 20px;
    }
    .flex-container.form-multiline {
        display: flex;
        margin-right: 0;
        div.fieldBox {
            display: block;
            //margin-right: 0;
        }
        div:has(div.hidden) {
            display: none;
        }
    }
/* … */
}

display: none; hides the picture widget.

I have created a fix in my fork, which just removes a display: hidden; but I don’t know if it breaks anything else, because I don’t know the idea of this rule.

[fsbraun]

@MacLake Well spotted. It seems I introduced this... 🤦‍♂️ Can you create a PR?

I think this needs a more specific selector that the hidden div is a direct child of the div. Can you check if & > div:has(> div.hidden works for you?

[MacLake]

Ok, instead of deleting the rule I have now inserted

        & > div:has(> div.hidden) {
            display: none;
        }

i.e. I closed the parenthesis ). Right? I never worked with SASS before, and I don’t fully understand the purpose of this rule, but for the picture upload widget in djangocms-blog it works like this. I just created a PR with this change.

[fsbraun]

The div reserves the space for an input field. If the input field is hidden, then there should not be space reserved for it. The rule is supposed to hide the div if it has a direct child, which is hidden. Unfortunately, the space-reserving div does not have a class or any other means of selecting it.

The closing parenthesis is correct. This rule only works on modern browsers, on older browsers it has no effect.

[raffael-mnhn]

Could you not use visibility: hidden? This does not remove the element from the flow