Slider does not adapt to container width change

9 posts, 0 answers
  1. Gary
    Gary avatar
    62 posts
    Member since:
    Sep 2013

    Posted 25 Jan 2012 Link to this post

    Hello,

    I am using the slider within a container that resizes as the browser window is resized. The slider does not adapt to the new width, and I don't see a method to redraw it.

    Can you provide some guidance on how this can be resolved?

    Thanks,
    Gary
  2.
  3. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 30 Jan 2012 Link to this post

    Hello Gary,

    Dynamic resizing of the slider is currently unsupported. The way to resolve this is to re-initialize the slider, by destroying it first ($("#slider-container").empty()) and initializing it again, with the same configuration. We are looking for a more graceful solution of this problem, but for now, use this approach.

    Regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Katarina
    Katarina avatar
    1 posts
    Member since:
    Apr 2012

    Posted 26 May 2012 Link to this post

    I use Kendo with jQuery and this is how i resize elements (for now).

    Example:
    $(this.element).closest('p').find('.pickup_date').empty().width(149).kendoDatePicker({ animation: false, format: "MM/dd/yyyy" });


    Here is my full prototype function:
    function onChange(e) {
         
        switch (this.value())
        {
            case "range":
                $(this.element).closest('p').children('label').hide();
                $(this.element).closest('.section-content').find('.pickup_date_range_addition').show();
                $(this.element).closest('p').find('.pickup_date').empty().width(149).kendoDatePicker({ animation: false, format: "MM/dd/yyyy" });
                break;
                 
            default:
                $(this.element).closest('p').children('label').show();
                $(this.element).closest('.section-content').find('.pickup_date_range_addition').hide();
                $(this.element).closest('p').find('.pickup_date').empty().width(185).kendoDatePicker({ animation: false, format: "MM/dd/yyyy" });
                break;
        }
         
    }
     
    $(".kdropdown").kendoDropDownList({ animation: false, change: onChange });
  7. Devi
    Devi avatar
    2 posts
    Member since:
    Sep 2012

    Posted 04 Sep 2012 Link to this post

    Hi

    I dont see the slider dynamic resize is supported in the latest version of kendo. Please let me know if it is to be released in the next version.

    thanks
    swathi
  8.
  9. Jason
    Jason avatar
    20 posts
    Member since:
    Nov 2011

    Posted 25 Feb 2013 Link to this post

    I using this code to set the width initially and it works. But I call the same code on a window resize event and it does nothing. It doesn't resize the slider even though it writes tot eh console the correct width to resize it.

    var width = $('#rangeColumn').width();
    console.log('width = '+width);
     
    $('input[type="range"]').empty().width(width+'px').kendoSlider({showButtons:false,tickPlacement:'none'}); // initialize or resize all sliders

    Any idea why the its not working. Am I calling .empty() on the wrong element?

    Thanks,
    Jason
  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 26 Feb 2013 Link to this post

    Hello Jason,

    Yes, input elements are always empty, because they do not have any children. You need to clean the container of the slider element, i.e. some element that contains the slider.

    Greetings,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Jason
    Jason avatar
    20 posts
    Member since:
    Nov 2011

    Posted 26 Feb 2013 Link to this post

    Thanks Alex. That helped me create this function which is working for me.

    Do you see any problems with resizing using this method?

    Thanks,
    Jason
    function resizeRange(element, width, config) {
        var element = $(element);
        var slider = element.parent().parent();
        var parent = slider.parent();
        parent.append(element);
        slider.remove();
        element.width(width).kendoSlider(config);
        element.parent().parent().show(); // not sure why its hidden
    }
     
    // calling it
    resizeRange('#ageRange', '100px', {showButtons:false, tickPlacement:'none'});

  14.
  15. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 27 Feb 2013 Link to this post

    I am not sure what you are trying to achieve. Can you please reproduce it in a jsbin sample? Here's a basic one with a slider to get you started.

    Kind regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. JohnVS
    JohnVS avatar
    90 posts
    Member since:
    Apr 2013

    Posted 18 Sep 2014 Link to this post

    For anyone coming around to this post years later, like I did, you can update the width of a RangeSlider by using this code from the documentation:

    $(document).ready(function() {
        $("#rangeslider").kendoRangeSlider();
        var rangeSlider = $("#rangeslider").getKendoRangeSlider();
        rangeSlider.wrapper.css("width", "400px");
        rangeSlider.resize();
    });
Back to Top