0

i have problem with css and angular 2 material. Any fixed positioned element doesn't behave like it is fixed inside md-sidenav-container.If it is not inside container, it works perfectly.Here is a link for that problem;

Just copy and paste md-toolbar to inside container you will see difference.

https://embed.plnkr.co/5m3vwp7q0Do9uJKchvqD/

if any html element ( including material's ) is outside of container fixed works fine but if it is inside container, it fails and stays ( sometimes dissappers) where it is ( i believe it is behaving like position: relative )

Am i missing something here or is it a bug or something?

Thanks

Vega
  • 27,856
  • 27
  • 95
  • 103
Ömer Faruk Kırlı
  • 139
  • 1
  • 2
  • 8

1 Answers1

0

I can't tell if it is a bug or an expected behaviour, but I faced the same problem a few months ago. The solution I found was to set the css property height: 100% on the following tags (assuming your sidenav is your root level) : html, body, main.

You need to put inside the <md-sidenav-container> tag every element you want to be fixed, and it should work.

I would have liked to edit your plunker but, for some reasons, systemJS seems to produce a weird DOM (there are more than one <html>, <body>, etc tags). You will need to set height: 100% on every parent tag of your <md-sidenav-container>

EDIT

Looks like I forgot to mention <md-sidenav-container> needs to get height: 100% too. About your double scrollbar, try to set overflow-y: auto on <md-sidenav-container>.

However it may not solve your problem, due to the particular DOM of systemJS. If you don't especially need it, I would suggest you to dump it and try a project without systemJS. If you do, I'm afraid I wont be able to help you further.

Mozgor
  • 186
  • 3
  • 12
  • I saw that solution i tried but i couldn't get any solution to my problem. I tried it again with parent nodes but still nothing changed unfortunately things went a little bad. I got 2 scrollbars in my page i dont know how. http://imagizer.imageshack.us/a/img922/2158/fLAE9C.png I belive containers add something like iframes or something like pages in pages i dont know. Thanks for your reply btw P.S : It is not working that way too – Ömer Faruk Kırlı Feb 07 '17 at 15:32
  • Unfortunately, my proxy doesn't allow me to load your screenshot. However I experienced something similar when I first had to deal with this probleme. What I can say by looking your plunker is that systemJS does create nested iframe. I don't know if it is needed nor a good practice, but I can say this is the very reason my "fix" doesn't work for you. Look my edit for another try, it mays work :) – Mozgor Feb 08 '17 at 08:45
  • I tried it before you said i think. I also tried min-height : 100% but it didnt solved my problem. double scrollbar appears when i make container's height 100% and overflow-y: auto didnt work. I found it somewhere else that example on plunker, i didnt write it actually, just changed a little. To be honest i dont know any other way to load angular module except systemjs. It comes with angular 2's templates. http://imgur.com/Ty9vY6B here is another link for same ss. It just shows double scrollbar and my problem. if you know any way to load angular modules i will be happy for hearing it – Ömer Faruk Kırlı Feb 08 '17 at 19:17
  • Either this plunker implements in a wrong way systemJS, or this tool makes weird DOM. In both case, if you want to switch, have a look to webpack https://github.com/AngularClass/angular2-webpack-starter – Mozgor Feb 09 '17 at 08:48