Problem with window pinned

7 posts, 1 answers
  1. Tihomir
    Tihomir avatar
    6 posts
    Member since:
    Sep 2014

    Posted 12 Jan Link to this post

    I want to achieve the following behavior, 

    http://dojo.telerik.com/UNIJa

     so that the window moves together with the page content during scrolling.

    Here is my very simple code,

    $("#OUView").kendoWindow({
            pined: false,
            position: { top: 400 }
        });

    but unfortunately the window is pinned and don't moves with the page content.

    I have the newest available kendo.all.min.js 

    Thanks in advance!

  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 14 Jan Link to this post

    Hello Tihomir,

    The demo you have provided works as expected on my side, so I am a little confused what the desired behavior is. Please check the following video and let me know if I am missing something:

    http://screencast.com/t/3x4b12Be

    Regards,
    Dimo
    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. Tihomir
    Tihomir avatar
    6 posts
    Member since:
    Sep 2014

    Posted 14 Jan in reply to Dimo Link to this post

    Hi Dimo,

    thank you!

    Correct, the demo is working fine. What I just wanted to say is: the same simple code "works not on my machine".

    Regardless of whether if I set pinned to false or true - the window is allways pinned when I scroll the page.

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 15 Jan Link to this post

    Hi Tihomir,

    I suspect that you are not scrolling the page, but some <div> in the page. In this case the Window will not move, because it is absolutely positioned with regard to the <body> element's top-left corner, and the body does not move either.

    If changing the page layout and scrolling logic is not acceptable, then another possible approach is to append the Window to the scrollable <div> and apply a position:relative style to that <div>.

    http://dojo.telerik.com/UNIJa/3

    If your scenario is different, please modify the demo I sent, so that I can inspect it.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Tihomir
    Tihomir avatar
    6 posts
    Member since:
    Sep 2014

    Posted 15 Jan Link to this post

    Hey Dimo,

    thank you very much.

    I guess, that is the solution, but I can't test it. Unfortunatelly both IE and Chrome give me "SCRIPT1014: Invalid character File: mytest.css, Line: 1, Column: 1"

    for the # selector caracter.

     

    #example {
            overflow: auto;
          }      
          .position-relative {
            position: relative;
          }

    that is the solution
    that is the solution
    that is the solution
    that is the solution
    that is the solution
    that is the solution
  7. Tihomir
    Tihomir avatar
    6 posts
    Member since:
    Sep 2014

    Posted 15 Jan in reply to Dimo Link to this post

    Hi Dimo,

    I guess that your suggestion will correct the issue, but I couldn't test it, because IE/Chrome gives me the following css error:

    "SCRIPT1014: Invalid character" 

    for the #-selector caracter in the css-file.

    suggestion
    suggestion
  8. Tihomir
    Tihomir avatar
    6 posts
    Member since:
    Sep 2014

    Posted 15 Jan Link to this post

    Hi Dimo,

    the problem with SCRIPT1014 was an incorrect css-file registration.

    Now it's working fine. 

    Thank you for all!

     

    Tihomir

Back to Top
Kendo UI is VS 2017 Ready