Should a custom component's HTML disappears when included inside of a Card?

Anvil Q&A
1

What I’m trying to do:
I would like to have a custom component with some html be included in an outlined card.

What I’ve tried and what’s not working:
When I put the custom component inside of a Card, the html disappears (e.g. a solid black line) but the anvil components (e.g. a button) still is rendered.

You can see in this dummy app that the html shows up when it’s nested inside a CardContentContainer as long as it’s not nested inside a Card. However, the html doesn’t show up when it’s nested inside a Card or if the CardContentContainer is nested inside a Card.

Is this expected behavior?

Clone link:

3

hmm - the z-index of -1 in your css is messing up how things are being displayed

maybe this is better:

<div class="progress-container">
    <div class="horizontal-line"></div>
    <div anvil-slot="default" anvil-slot-repeat="default" style="z-index:1;"></div>
</div>

<style>
    .progress-container {
        position: relative;
        display: flex;
        justify-content: space-between;
    }

    .horizontal-line {
        position: absolute;
        top: 25%;
        left: 5px;
        width: calc(100% - 10px);
        height: 3px;
        background-color: black;
        transform: translateY(-50%);
        /* z-index: -1; */
    }
</style>

I put a z-index of 1 on the default slot

There are probably other ways to achieve this without messing with z-indexes
So if you’re still having trouble report back.

1 Like
4

Thank you for taking a look. Removing the -1 worked for me as well.

Is this behavior a bug?

5

To answer the question in your first comment, it’s expected behaviour that if you write CSS that fights with other elements on the page, the result could look strange. (In any case, the CSS said “display this behind the default plane”, and was applied in a place where there was a big opaque card on the default plane, and the computer did exactly what it was told to but not what you wanted.)

CSS is full of bear-traps like that, which is sort of the reason Anvil exists! We wrote a ton of HTML and CSS and JS to allow you to place Anvil components and write Python rather than wrestling with those languages directly. Of course, sometimes you need to customise what’s going on, and so we make a point of giving you access to the underlying languages. When you do that you open yourself to all the usual front-end difficulties, so we do our best to let you do it selectively, so you can use the easier tools most of the time. (I wrote a whole blog post on the topic!)

6 Likes