2017-08-22 3 views
2

私はVMWare Clarity Datagridコンポーネントを使用しています。拡張可能なデータグリッドでキャレット列を非表示にするVMWare Clarity Design with Angular2 +

説明:

私は2つのデータグリッドを持っていると私は左のデータグリッド(赤)の行の1つを拡大したときに右のいずれか(青)を展開するために管理。

マイGOALS

  1. は右データグリッド上のキャレットの列を非表示にして、まだその行を拡張することができます。 display: none;ルールをブラウザの.datagrid .datagrid-expandable-caretクラスに追加するとうまく動作しますが、.scssファイルでは正しく動作しません。
  2. 左のデータグリッド(赤色)のスクロールを非表示にしてもスクロールすることができます。
  3. 両方のデータグリッドのスクロールを同期します(多分サードパーティのコードを使用します)。

ここでは、plunkerをangular2 +の例で作成しました。

.right-div { 
    float: left; 
    height:315px; 
    width: 500px; 
    border: 4px solid cornflowerblue; 

    .datagrid .datagrid-expandable-caret { 
     padding: 2px 4px 3px; 
     text-align: center; 
     display: none; 
    } 
} 

ご意見ありがとうございました。

答えて

5

独自のコンポーネントのスタイルに追加するときに機能しない理由は、.datagrid-expandable-caret要素がデータグリッドのシャドーDOMにあることです。詳細はhttps://angular.io/guide/component-styles#view-encapsulationを参照してください。彼らは「エミュレート」シャドウDOMに適用することができるように

  1. は、グローバルCSSスタイルシートでこれらのスタイルを持っている:それが何を意味するのか

    は、あなたが等価である2つのソリューションを持っています。

  2. コンポーネントにencapsulation: ViewEncapsulation.Noneを使用すると、同じ結果が得られます。ここで

第二の溶液の作業を示し、あなたのplunkerの更新版です:https://plnkr.co/edit/ss3y1P?p=preview

関連する問題