Completed
Last Updated: 27 Jan 2015 08:49 by ADMIN
John
Created on: 26 Jan 2015 17:35
Category: Kendo UI for jQuery
Type: Feature Request
1
Add css "vertical-align: top;" to demo for Verticle sliders.
In the demo:
http://demos.telerik.com/kendo-ui/slider/index
Slider / Basic Usage
demo

If you create sliders with different max, min, smallStep, and largeStep
attributes the tops of the verticle sliders won't line up unless 
you have

   vertical-align: top;

set.

Maybe you could add this to your demo code.

---
	In the Style ...  "div.eqSlider {"

		vertical-align: top;
---

The demo all align because these 4 attributes are all set to the same values.
If you modify the demo so one is different it won't line up
in IE9.  FF35 lines up unless you use a large max and a small min to cause no
hash marks to show up.
 IE: -31 to 31

Below are some changes to the demo that makes the tops not line up.

...
	<input class="eqSlider" value="10" />
	<input class="eqSliderBig" value="15" /> <!-- Changed to use ...Big -->
...
	$(".eqSlider").kendoSlider({
		orientation: "vertical",
		min: -20,
		max: 20,
		smallStep: 1,
		largeStep: 20,
		showButtons: false
	});

	/* Added Big to make the last slider have a different max,min */
	$(".eqSliderBig").kendoSlider({
		orientation: "vertical",
		min: -30,
		max: 30,
		/* Change to -31 to 30 and no hash lines will show up and FF35 won't * align tops */
		smallStep: 1,
		largeStep: 20,
		showButtons: false
	});
...

div.eqSlider {
	display: inline-block;
	margin: 0 12px;
	height: 122px;
	vertical-align: top;
	/* Added to make tops align even if the max, min, smallStep, or largeStep are different */
	/* Remove and the tops won't align in IE9 */
}

/* Added for the ...Big slider */
div.eqSliderBig {
	display: inline-block;
	margin: 0 12px;
	height: 122px;
	vertical-align: top;
	/* Added to make tops align even if the max, min, smallStep, or largeStep are different */
	/* Remove and the tops won't align in IE9 */
}

...

1 comment
ADMIN
Telerik Admin
Posted on: 27 Jan 2015 08:49
Thanks for the report. The demo was updated accordingly.