vertical scrolling problem

8 posts, 0 answers
  1. Guillaume
    Guillaume avatar
    9 posts
    Member since:
    Jan 2015

    Posted 23 Oct 2015 Link to this post

    We have a treelist inside view. Some time when the page open, the treelist do not take all the view and when it expand the scrolling doesn't work properly.

      

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 27 Oct 2015 Link to this post

    Hello Guillaume,

    Can you please create a dojo example that replicates the problems, so we can test it locally. Additionally, please elaborate on the exact issue that you are facing with the scrolling after expanding.

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Guillaume
    Guillaume avatar
    9 posts
    Member since:
    Jan 2015

    Posted 27 Oct 2015 in reply to Konstantin Dikov Link to this post

    sorry no time for dojo,

     loosing allready all my time with your website ....

    the problem is simple, scrolling doesn't work when treelist is inside div with other div.....

     

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 27 Oct 2015 Link to this post

    Hi Guilaume,

    As you can see in our online demo, the scrolling for the TreeList widget is working correctly, even if the widget is placed within two DIV elements:
    Can you please confirm that you are setting the Height property of the TreeList, because this is a mandatory requirement in order for the scrolling to be enabled.

    On a side note, please have in mind that without knowing your exact implementation it is almost impossible to pinpoint what could be causing the issues that you are facing, so for saving both sides time I would suggest that you provide more information in the future and whenever possible, isolate the problems in dojo examples.


    Kind Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Guillaume
    Guillaume avatar
    9 posts
    Member since:
    Jan 2015

    Posted 27 Oct 2015 in reply to Konstantin Dikov Link to this post

    just edit your demo

    and see what happens

     

     

    <div id="example"  style="position: absolute; top: 0px; left: 13.83px; height: 100.03px; width: 312.04px; display: inline;" >

            <div id="treelist"></div>

            <script id="photo-template" type="text/x-kendo-template">
               <div class='employee-photo'
                    style='background-image: url(../content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
               <div class='employee-name'>#: FirstName #</div>
               
               
       <div id="example2"  style="position: absolute; top: 100px; left: 13.83px; height: 100.03px; width: 312.04px; display: inline;" >  tata  </div>   ​

  7. Guillaume
    Guillaume avatar
    9 posts
    Member since:
    Jan 2015

    Posted 27 Oct 2015 Link to this post

    sorry last code was unclear:

     

    <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/treelist/index">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.930/styles/kendo.material.min.css" />

        <script src="//kendo.cdn.telerik.com/2015.3.930/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
    </head>
    <body>
    <div id="example"   style="position: absolute; top: 0.99px; left: 13.83px; height: 50.03px; width: 312.04px; display: inline;">
    <div id="tewst"></div>
            <div id="treelist"></div>
      
        </div>
      
     <div id="example"   style="position: absolute; top: 60.99px; left: 13.83px; height: 295.03px; width: 312.04px; display: inline;"> 
      dsfgsdgfdgdf
      </div>

            <script id="photo-template" type="text/x-kendo-template">
               <div class='employee-photo'
                    style='background-image: url(../content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
               <div class='employee-name'>#: FirstName #</div>
            </script>
      
      
      

            <script>
                $(document).ready(function() {
                    var service = "//demos.telerik.com/kendo-ui/service";

                    $("#treelist").kendoTreeList({
                        dataSource: {
                            transport: {
                                read: {
                                    url: service + "/EmployeeDirectory/All",
                                    dataType: "jsonp"
                                }
                            },
                            schema: {
                                model: {
                                    id: "EmployeeID",
                                    parentId: "ReportsTo",
                                    fields: {
                                        ReportsTo: { field: "ReportsTo",  nullable: true },
                                        EmployeeID: { field: "EmployeeId", type: "number" },
                                        Extension: { field: "Extension", type: "number" }
                                    },
                                    expanded: true
                                }
                            }
                        },
                       
                        filterable: true,
                        sortable: true,
                        columns: [
                            { field: "FirstName", title: "First Name", width: 280,
                              template: $("#photo-template").html() },
                            { field: "LastName", title: "Last Name", width: 160 },
                            { field: "Position" },
                            { field: "Phone", width: 200 },
                            { field: "Extension", width: 140 },
                            { field: "Address" }
                        ]
                    });
                });
            </script>

            <style>
                .employee-photo {
                    display: inline-block;
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    background-size: 32px 35px;
                    background-position: center center;
                    vertical-align: middle;
                    line-height: 32px;
                    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
                    margin-left: 5px;
                }

                .employee-name {
                    display: inline-block;
                    vertical-align: middle;
                    line-height: 32px;
                    padding-left: 3px;
                }
            </style>
      


    </body>
    </html>

  8. Guillaume
    Guillaume avatar
    9 posts
    Member since:
    Jan 2015

    Posted 27 Oct 2015 in reply to Guillaume Link to this post

    by the way, we don't want to have to set Height property to the treelist. it's a non sens otherwise the control is not adjust to the screen
  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 27 Oct 2015 Link to this post

    Hi Guillaume,

    The scrolling functionality of the widget follows the basic HTML scrolling principles and it is mandatory for an element with "overflow: scroll/auto" to have a set height. If the DIV element wrapping the widget does not have fixed height, that DIV element (as a block element) will expand to the height of its content.

    With the above in mind, please ensure that you are setting the height of the widget (which could also be set to a percentage value, which will use the height of the first parent with fixed height):


    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
Kendo UI is VS 2017 Ready