Grid height on Chrome

[SLM]

Hello,

I'm having an issue with my grid height. It looks like the table content is not following the grid height.

The issue is not happening on IE or Firefox. It only happens at first loading. It disappear when I switch page or sort the table.

 

I'm working with Angular JS 1.5.3 and Angular Material 1.1 rc2.

 

Thank you very much.

[Konstantin Dikov]

Hello,

From the attached screenshot it seems that the overflow property of the wrapping element is not set to "scroll" or "auto", which could lead to such result. You can inspect the wrapping DIV element and see which styles are applied to it and either remove them or override them by making that element scrollable. 

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[SLM]

Setting the wrapping div to : overflow:scroll or auto directly changed nothing..

Even when the grid data height is lower then the grid height, it doesn't fit properly.

See the attached screenshot.

[Konstantin Dikov]

Hello,

Could you please create a dojo example that replicate the issue in question and provide some additional information on the excepted result:

• http://dojo.telerik.com/

Looking forward to your reply.


Regards,
Konstantin Dikov
Telerik

 

 

[SLM]

Well, I cannot replicate the same issue on dojo since I'm using AngularJS with ui-router and angular material..

But here is my html :

<div class="main-content md-padding">

    <div>
        <input class="k-textbox" type="text" ng-model="vm.value" placeholder="Recherche..." />
        <md-button class="md-raised md-primary md-button-custom" ng-click="vm.filter()">Filtrer</md-button>
        <md-button class="md-raised" ng-show="vm.filtered" ng-click="vm.reset()">Annuler</md-button>
    </div>

    <br />

    <div kendo-grid="mainGrid" k-on-change="vm.onSelection(data)" options="vm.mainGridOptions" style="overflow:auto;"></div>


    <br />
    <div kendo-tree-list="detailGrid" k-on-change="vm.changeDetailFocus(e);" options="vm.detailGridOptions">

    </div>
    <br />

    <div layout="row" layout-align="end end">
        <md-button class="md-raised md-primary md-button-custom" ui-sref="common.wastehistory(vm.getParams())" ng-disabled="!vm.selected" style="margin-right:0px;">
            Afficher l'historique
        </md-button>

    </div>
</div>

Tell me if you need more informations.

 

Thanks,

[SLM]

The problem is fixed.

I had to move the ng-cloak directive from the ui-view div to the body.

Do you have any explanation about that ?

 

Thanks

[Konstantin Dikov]

Hi,

Without a sample project that could be tested on our side it will be impossible to determine what is causing the issue in your project. Most likely the configuration that you have is overriding the behavior and the styles of the Grid, but as I have mentioned, without something that could replicate the problem on our side, we can only guess what is the exact cause of the issue.


Regards,
Konstantin Dikov
Telerik