Grid height on Chrome

7 posts, 0 answers
  1. SLM
    SLM avatar
    15 posts
    Member since:
    Oct 2011

    Posted 12 Apr 2016 Link to this post

    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.

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 14 Apr 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. SLM
    SLM avatar
    15 posts
    Member since:
    Oct 2011

    Posted 18 Apr 2016 in reply to Konstantin Dikov Link to this post

    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.

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 18 Apr 2016 Link to this post

    Hello,

    Could you please create a dojo example that replicate the issue in question and provide some additional information on the excepted result:
    Looking forward to your reply.


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. SLM
    SLM avatar
    15 posts
    Member since:
    Oct 2011

    Posted 19 Apr 2016 in reply to Konstantin Dikov Link to this post

    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,

  6. SLM
    SLM avatar
    15 posts
    Member since:
    Oct 2011

    Posted 19 Apr 2016 in reply to SLM Link to this post

    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

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 21 Apr 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top