Tick numbers appear outside slider

6 posts, 0 answers
  1. JohnVS
    JohnVS avatar
    90 posts
    Member since:
    Apr 2013

    Posted 18 Sep 2014 Link to this post

    If you have a fairly large range of numbers, like a max of 1000 with a largeStep of 100, the tick label that shows "1,000" appears off the slider. I noticed this because I have my Slider in a div with a border, so the tick label is over the top of the border. See the example here, with the basic code copied from the demos.

    As you can see, the "1,000" label is outside the border of the div. Why is it doing this? Is there anyway to fix it?
  2.
  3. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 22 Sep 2014 Link to this post

    Hi JohnVS,

    I think that you need to change the format of the tooltip in order to remove the thousand separator. Updated example: http://dojo.telerik.com/adoC/2

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. JohnVS
    JohnVS avatar
    90 posts
    Member since:
    Apr 2013

    Posted 22 Sep 2014 in reply to Hristo Germanov Link to this post

    Even without the thousands separator, the tooltip is still outside the border. Aren't you seeing that as well? Screenshot attached.
  7. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 22 Sep 2014 Link to this post

    Hello JohnVS,

    I didn't notice that in my previous replay. Could you please set padding-right to the parent of the slider?
    http://dojo.telerik.com/adoC/3

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. JohnVS
    JohnVS avatar
    90 posts
    Member since:
    Apr 2013

    Posted 22 Sep 2014 in reply to Hristo Germanov Link to this post

    I would consider that a hack, not a fix. Setting the padding-right causes the RangeSlider to no longer appear centered inside the bordered box. It seems reasonable that the tick label should never be outside the RangeSlider area. Is there no way to do this?
  11. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 23 Sep 2014 Link to this post

    Hi JohnVS,

    The Slider labels (<span> elements) are enclosed inside the Slider ticks (<li> elements). The size of the ticks is always calculated, depending on the Slider size and the defined largeStep and smallStep. The labels can have arbitrary size, depending on the character count, that's why they can overflow the tick elements by design.

    You can avoid the observed layout issue in two ways - enable the Slider buttons, or apply a suitable side padding to the Slider container. The size of the Slider labels can depend on the font size, that's why it is better to set the padding in em units, so that it depends on the font size too.

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top