2017-12-13 1 views
0

更新:垂直スクロールなしでページサイズに基づいてデータをui-grid-viewportにロードする方法は?

私は新しいです。 垂直スクロールバーを使用せずにページデータをui.gridにロードします。 私は100のデータがあり、私のページのサイズが50であると仮定します。私は右のスクロールバーなしでui.gridにすべての50のデータを表示したいと思います。ページサイズを100に設定すると、100個のデータがグリッドに表示されます。私はスクロールバーを削除することができましたが、50のデータは表示できません。 Existing UIが現在のビューです。しかし、私は統合されたui.gridからマークされたスクロールバーを削除したい。 私を助けてください。

ありがとうございます。

+0

コードを共有できますか? – gdmanandamohon

+0

http://ui-grid.info/docs/#/tutorial/213_auto_resizingそれを知っているなら、次のようなものを使うことができます:https://stackoverflow.com/questions/31839031/get-element-parent-height-inside-directive-in-anguarjsそれを知って、あなたはデータの量を計算することができます。あなたは各行の高さとあなたの親要素にどれだけのスペースがあるかを知る必要があります。次に、サイズをグリッドに伝えるべきものを計算することができます。また、サイズ変更を監視したい場合は、 – Brian

+0

実際に私はグリッドにスクロールする部分が嫌いです。右側のスクロールバーがなければ、すべてのページングされたデータをグリッドに表示します。他の設定は、と同じままです。 –

答えて

1

いくつかのオーバーライドされたスタイル(css)は私にこの時間を助けます。 ui-grid-paginationui-grid-auto-resizeが必要です。

は、ここで私はそれを解決したコード

.ui-grid-pager-panel 
{ 
    position:relative !important; 
} 

.grid, .ui-grid 
{ 
    height:auto; 
} 
.ng-isolate-scope 
{ 
    height:auto !important; 
    #overflow: scroll ; 
} 
.ui-grid-canvas{ 

    width:auto; 
    height:auto !important; 
} 
.ui-grid-viewport{ 
    height:auto !important; 
    overflow-x: hidden !important; 
    overflow-y: scroll !important; 
} 
.ui-grid-pager-container,.ui-grid-pager-count-container 
{ 
    padding-top:5px; 
} 

です。ここにはlinkがあります。

ありがとうございました

関連する問題