Docklayout in slide element is not using the correct height

[sfaessler]

<slides #slides [loop]="false" [pageIndicators]="false" *ngIf="data.length > 0" (changed)="slideChanged($event)">

    <slide height="100%">
        <DockLayout stretchLastChild="true">
            <Button dock="top" text="top" style="background-color: lightblue; margin: 5;"></Button>
            <Button dock="bottom" text="bottom" style="background-color: lightpink; margin: 5;"></Button>
            <Button text="fill" style="background-color: wheat; margin: 5;"></Button>
        </DockLayout>
    </slide>

As you can see on the screenshot the height of the complete slide is only about 33% of the whole screen.

I've tried several things, adding height=100% to various elements, also that pageHeight="500" from another issue I found here. But I didn't get this to work.

Any ideas?

Appreciate any help!

Thanks in advance!

[JoshDSommer]

Is there another element that is possibly pushing the slides down entirely? for that white space. I like to create a class called debug

.debug{
    border-color:red;
    border-width: 1;
}

and then i use that to debug the layouts to figure out what's going on.

[sfaessler]

Maybe, yes. We have that headline on top of the app. I'll try to remove that and check it the way you described. Thanks for the hint.