How to prevent User / Hide Scroll bars in the Editor ?

4 posts, 0 answers
  1. K.Ramadan
    K.Ramadan avatar
    78 posts
    Member since:
    Feb 2020

    Posted 27 Aug Link to this post

    Hello,

    I have a custom Template Editor and i want to place the items next to each other in the Editor.

    after 2 days searching for an answer .. i did  this : 

    i changed the width of the container and the Window in the scheduler_Editor.Edit()

    e.container.find('.k-edit-form-container').css("width", "900px");

    e.container.closest('.k-window').css("width", "900px");

     e.container.closest('.k-window').css("height", "750px");

     

     

    then i gave every Item a css style:

    style="float:left; position:relative;left:400px;top:110px;"

    so now it's not responsive (which is normal after adding that style).

    but this, i can solve by doing some css tricks or if you guys have a better way , please tell me.

    The real Problem that i haven't found an answer for, is that now i have scroll bars in the Editor !!

    and i want to get rid of them but i can't find anyway online !

    i'll attach a picture of how the Editor looks like now

    So i need to know how to hide these scroll bars and how to prevent User to scroll in the Editor ! 

    Thanks in advance

     

     

  2. Aleksandar
    Admin
    Aleksandar avatar
    205 posts

    Posted 31 Aug Link to this post

    Hello,

    The Scheduler Editable configuration provides the possibility to configure the editor Window. You can apply all the configuration options available for the Window widget. This way you can configure the Window's size, set height and width, as well as specify if the content would be scrollable or not.

    .Editable(e=>e.Window( w=> {
       w.Height(750);
       w. Width(900);
       //additional window configuration options
    }))

    Let me know if this suggestion helps.

    Regards,
    Aleksandar
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. K.Ramadan
    K.Ramadan avatar
    78 posts
    Member since:
    Feb 2020

    Posted 01 Sep in reply to Aleksandar Link to this post

    Hello Aleksander,

    I tried what you sent me, and changed the width,Height and scrollable(false) in the Editable(), but that did not change anything .

    so if you have any other ideas I'll be thankful ..

    and Thanks in advance for your hard work ..

  4. Petar
    Admin
    Petar avatar
    402 posts

    Posted 03 Sep Link to this post

    Hello Blackout,

    Can you try the following CSS to hide the scrollbars in the popup window?

    body > div.k-widget.k-window > div.k-popup-edit-form.k-scheduler-edit-form.k-window-content{
       overflow: hidden;
    }

    Here is a Dojo in which the popup window is with small sizes in order to have the scrollbars appear in it. After applying the above CSS, the scrollbars get hidden. 

    Try the suggested approach and let me know if it resolves the issue.

    Regards,
    Petar
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top