CODEWITHSUNDEEP
htmlcssangularionic-frameworkionic3
chick3n0x07CC
chick3n0x07CC

Reputation: 798

Container div doesn't adjust to child Angular component height

I have the below Ionic application example in Stackblitz. You'll see that there are a custom Angular component called <my-video></my-video>, an ion-list and a button. What I want is:

This is what I have now, you can see the code in the Stackblitz example (including the CSS code):

enter image description here

I think the problem can be that video-container hasn't the same height as its children my-video, but I don't know why.

enter image description here

I tried with different positioning configurations (position relative, absolute , static, etc.) with no effect.What would be the correct way to achieve this?

Upvotes: 1

Views: 1570

Answers (2)

Mannaroth
Mannaroth

Reputation: 480

I believe the problem is that my-video is absolutely positioned, meaning it is taken out of the natural flow of positioning and positioning the button anywhere based on my-video very tricky, which is not what we want, so you need to make my-video's positioning relative, keep the options-list position absolute but also add top: 0 and left: 0, like so

.video-container {
    position: relative;

    my-video {
        position: relative;
        width: 100%;
        background-color: red;
    }

    .options-list {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.finish-button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 32px;
    position: relative;
}

now the button can go to the bottom of the screen because my-video is in the flow of positioning

Upvotes: 2

Augustin R
Augustin R

Reputation: 7799

Updated the stackblitz with the following css for your button :

position: absolute;
top: 40%;
left: 50%;
right: 50%;

You need to use position: absolute here in order to get your button's position relative to the .video-container div.

Upvotes: 0

Related Questions