Angular Material LAYOUT does not scroll my content

Question

got an complexe row/column layout and everything's fine till one problem.

In the middle I got a white area, bordered with a shadow, looking like in word or similiar text editor.

This document area is styled as DIN A 4 and should scroll in its parent.. But I can not solve this...

Heres the example:

<md-content layout="row" flex id="WorkBench">   
    <md-content layout="column" flex>
        <md-tabs flex md-dynamic-height md-border-bottom>

            <md-tab layout="row" label="New Page" flex>

                <md-content layout="column" flex style="padding-top: 20px; overflow-y: scroll">
                    <md-content layout="row">

                        <md-content id="myDocument" layout="column" style="margin-left: auto; margin-right: auto; height: 297mm; width: 210mm; border: 1px solid #999; box-shadow: 5px 5px #999;">

                            <md-content layout="row" style="padding-top: 30mm;">
                                <md-content layout="column"><div style="width: 20mm"></div></md-content>
                                <md-content layout="column"><div style="width: 70mm; font-size: 9px; border-bottom: 1px solid #999;">simle reference text</div></md-content>
                                <md-content layout="column"></md-content>
                            </md-content>
                            <md-content layout="row">
                                <md-content layout="column" style="margin-left: 25mm;">
                                    <md-content style="width: 60mm; padding: 2mm; font-size: 12px;">
                                        <md-content layout="row" style="padding: 0.5mm">1. Line</md-content>
                                        <md-content layout="row" style="padding: 0.5mm">2. Line</md-content>
                                        <md-content layout="row" style="padding: 0.5mm">3. Line</md-content>
                                        <md-content layout="row" style="padding: 1mm">4.Line</md-content>
                                    </md-content>
                                </md-content>

                                <div layout="column">????</div>
                            </md-content>
                            <div layout="row"></div>
                            <div layout="row"></div>
                            <div layout="row"></div>
                        </md-content>
                    </md-content>
                </md-content>


            </md-tab>


            <md-tab layout="row" label="other page">
                <md-content layout="column" flex class="md-padding">
                    leer
                </md-content>
            </md-tab>

        </md-tabs>
    </md-content>
</md-content>

Any hint how I could solve my problem?

id="myDocument" is the part which should get scrolled in its parent...

regards n00n

have you possibility to add a working fiddle?thanks

lino
– lino

2016-10-28 20:13:56 +00:00
Commented Oct 28, 2016 at 20:13 — lino
– lino, Commented Oct 28, 2016 at 20:13
here is a fiddle... jsfiddle.net/zygfwhv1

n00n
– n00n

2016-10-29 06:58:58 +00:00
Commented Oct 29, 2016 at 6:58 — n00n
– n00n, Commented Oct 29, 2016 at 6:58

lino · Accepted Answer · 2016-10-29 09:32:19Z

1

Ok, it's this the behavior that you want? fiddle updated I removed the dynamic heights from tabs and also removed the overflow-y: scroll on that md-content. Let me know! Good weekend

answered Oct 29, 2016 at 9:32

lino

1905 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

lino Over a year ago

Using md-dynamic-height the tab wrapper will resize based on the contents of the selected tab so this is because you didn't see the scroll.

n00n Over a year ago

cool, didn't now about "md-dynamic-height" ... Its closed to what I wanted, the bottom of the document is invisible... But this I can fix this myself. Thank you.

lino Over a year ago

good, happy to help you...i hope you'll vote for my answer..have a nice day!

n00n Over a year ago

didn't know that I can vote answers here. And cannot find the button for it.

lino Over a year ago

Come on n00n are you kiddin'me? you know what i'm talkin' about

Collectives™ on Stack Overflow

Angular Material LAYOUT does not scroll my content

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related