問題タブ [material-design-lite]

MDL: Material Design Lite from Google ( MDL )を使用して、JSF 2.0、Primefaces 5.2 で作成されたアプリケーションがあります。jsf ページに p:editor を配置すると、機能しません。エディターのすべての要素が無効になります。要素を調べると、すべての div が無効になっていることがわかります。

また、最初にページを開いたときにエディターが機能しませんが、F12 を押して (javascript コンソールを表示するために) そのタブ (コンソール) を閉じると、エディターが機能し始めます。

誰でも私を助けることができますか？

引き出しの中に一連のリンクがあります。ここのナビゲーションの例のように:

http://www.getmdl.io/components/index.html#layout-section/layout

唯一の違いは、リンクによってページが更新されないことです (バックボーンで構築された単一ページ アプリです)。リンクをクリックした後にドロワーを閉じるにはどうすればよいですか?

現在デバッグ中の非常に奇妙なバグがあります。

Material Design Lite を試しています: http://www.getmdl.io/components/index.html#layout-section

しかし、公式の CodePen ( http://codepen.io/anon/pen/WvaKjK ) から「固定ヘッダー」の例をコピー/貼り付けするだけで、ブラウザーでは異なって見えます。

そして、これは使用される HTML 全体です。

2 つのヘッダーを比較すると、左上のアイコンが配置されていないことがわかります。さて、その理由について疑問が生じます。

マシンで同じコードを使用しているため、アイコンがずれて表示されますが、コードをブラウザーから fe cmd+U で jsfiddle または codepenにコピー/貼り付けするたびに、アイコンが正しく配置されます。

ここを参照してください：

http://codepen.io/anon/pen/LVgBzZ

同じ問題が Firefox、Chrome、Chrome Canary、Android Chrome でも発生するため、ブラウザの問題ではありません。同じ HTML をここにアップロードしましたが、正しく表示されません。

http://temp.leavingblue.com/5.html

Windows (wamp) と Linux 仮想マシン (homestead) のローカル マシンでコードを実行しました。

TL;DR:

公式の getmdl.io サイト、codepen、jsfiddle では同じ HTML が問題ないように見えますが、独自の HTML ファイルで再作成すると奇妙に見えます。

エラーの再現方法

に行く

1. http://temp.leavingblue.com/5.html、
2. コマンド + U
3. すべてをCodepen.ioにコピー＆ペースト
4. 違いを見る

誰でもエラーを再現できますか? また、この動作の説明はありますか?

Material Design Liteで作成したいくつかのPolymerコンポーネントを統合しようとしています。ただし、何もレンダリングしないだけです。まるでマテリアル デザインが Polymer コンポーネントで機能しないかのようです。

これらは、HTML + マテリアル デザインのサイド メニューを作成するために従う手順です。

プレーン マテリアル デザイン ライト サイド メニュー:

ここで、テストとして、いくつかのマークアップを含むnav-menu.html Polymer 要素を作成します。

次に、メニューの前に含めて、OK にレンダリングします。

HTML :

レンダリングされたコード:

ここで、nav-menu.htmlコンポーネントを変更して、完全なメニューを含めます。

そしてそれをメインページに含めます：

これは、レンダリングされた HTML コードです (Chrome 開発者ツールの検査で確認できます)。

どうやら問題ないようですが、ページには何も表示されず、何も表示されていません。

更新: 問題は、メニューを表示するメディア クエリ スタイルが新しい要素に適用されないことです。

Polymer 要素はタグにネストされているため<nav-menu>、CSS スタイルは適用されません。助言がありますか？

Web ページの真ん中に svg 画像を配置したいと思います。

画像は部分的に水平に表示する必要があります。たとえば、画像の 1/3 を最初に表示し、ユーザーが水平方向にスクロールできるようにする必要があります (残りの 2/3 部分を表示するため)。どうすればそれを達成できますか？（モバイルブラウザでも動作するはずです）。

これが重要な場合に備えて、私はMaterial Design Liteをフレームワークとして使用しています。

更新。マウス/タップでスクロールできるようにし、スクロールバーを非表示にする必要があります。jsfiddle.net/and7ey/pLf5namm/embedded/result/ でデモを参照してください。

*免責事項: この質問は、Angular アプリでのマテリアル デザインの使用に関するものではなく、フォーム内でのマテリアル デザインライトの使用に関するものです。だから、答えないでください。私はむしろ角度のある素材、マテリアライズ、lumx、素材のブートストラップ、またはデーモンナイトを使用する必要があります...私は知っています、それらは存在します.*

Angular では、名前の典型的なフォーム フィールドは次のようになります。

Material Design Lite を使用すると、次のようになります。

質問: Angular 検証機能を ngMessage (複数のエラー メッセージ用) と組み合わせて Material Design Lite で使用するにはどうすればよいですか?