2017-02-03 8 views
0

私はCSSと角2の材料に問題があります。固定配置された要素は、md-sidenav-container内に固定されているように振る舞いません。コンテナ内になければ、完全に動作します。角2材料容器が固定していない

md-toolbarをコピーして内側のコンテナに貼り付けるだけで、違いが表示されます。

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

(材料の含む)任意のHTML要素を容器の外に固定されている場合は正常に動作しますが、それは、コンテナ内にある場合、それは失敗したまま(時にはdissappers)それは(私はそれが位置のように動作していると信じています:相対)

ここに何か不足していますか、それともバグですか?

おかげ

答えて

0

それはバグや予想される動作である場合、私は言うことはできませんが、私は数ヶ月前に同じ問題に直面しました。私が見つけた解決策は、あなたのsidenavがあなたのルートレベルであると仮定して、次のタグにCSSのプロパティheight: 100%を設定することでした:htmlbodymain

固定するすべての要素に<md-sidenav-container>タグを入れておく必要があります。

あなたのプランナーを編集したかったのですが、何らかの理由でsystemJSが奇妙なDOM(<html><body>などのタグが複数あります)を生成しているようです。あなたは、私があまりにもheight: 100%を取得するために<md-sidenav-container>ニーズを言及するのを忘れてしまったように見えるあなたの<md-sidenav-container>

EDIT

のすべての親タグにheight: 100%を設定する必要があります。ダブルスクロールバーについて、<md-sidenav-container>overflow-y: autoを設定してみてください。

システムジャーナリストの特定のDOMのために、あなたの問題を解決できない場合があります。特に必要がない場合は、それをダンプしてsystemJSなしでプロジェクトを試すことをお勧めします。そうすれば、私はあなたをさらに助けることができなくなるのではないかと恐れています。

+0

解決策を試してみましたが、私の問題を解決できませんでした。親ノードでもう一度試しましたが、残念ながら何も変わっていません。私は私のページに2つのスクロールバーを持っています。 http://imagizer.imageshack.us/a/img922/2158/fLAE9C.png 私はiframeのようなものか、ページのようなものを私が知りません。返信いただきありがとうございました P.S:それほどうまくいきません – 0m3rF

+0

残念ながら、私のプロキシではスクリーンショットを読み込めません。しかし、私は最初にこの問題に対処しなければならない時に、何か似たような経験をしました。 私があなたのプランナーを見て言うことができるのは、systemJSがネストされたiframeを作成することです。私はそれが必要でも良い練習であるかわからないが、私はこれが私の "修正"があなたのために働かない理由であると言うことができる。 別の試しに私の編集を見て、それは動作するかもしれません:) – Mozgor

+0

私はあなたが私が思うと言いました。私もmin-height:100%を試しましたが、それは私の問題を解決しませんでした。コンテナの高さを100%にしてオーバーフローしたときにダブルスクロールバーが表示されます。私はそれをどこか別の場所で見つけました、そのプランナの例、私は実際にそれを書いていない、ちょっと変わった。正直言って私はsystemjs以外の角モジュールをロードするための他の方法は知らない。これは、角度2のテンプレートが付属しています。 http://imgur.com/Ty9vY6Bここに同じssの別のリンクがあります。ダブルスクロールバーと私の問題が表示されます。あなたが角度モジュールをロードする方法を知っていれば、私はそれを聞いてうれしいでしょう – 0m3rF

関連する問題