I created a fiddle with this issue http://jsfiddle.net/TgKF3/6/
Basically, I want the splitter div to resize along with the kendoWindow when it is resized. So to test it out grab the lower right of the kendoWindow and drag to the right. The splitter div is not resized (see green border). Also, how do I make the splitter div span 100% height. I tried setting the height of the splitter div to 100% but the splitter would not resize when the kendoWindow was resized. Thanks in advance for your help.
Basically, I want the splitter div to resize along with the kendoWindow when it is resized. So to test it out grab the lower right of the kendoWindow and drag to the right. The splitter div is not resized (see green border). Also, how do I make the splitter div span 100% height. I tried setting the height of the splitter div to 100% but the splitter would not resize when the kendoWindow was resized. Thanks in advance for your help.
4 Answers, 1 is accepted
0
Hello David,
Please use the Window's resize event to trigger resize on the Splitter's outer DOM element.
http://jsfiddle.net/dimodi/TgKF3/8/
Greetings,
Dimo
the Telerik team
Please use the Window's resize event to trigger resize on the Splitter's outer DOM element.
http://jsfiddle.net/dimodi/TgKF3/8/
Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
Rank 1
answered on 22 Feb 2012, 06:54 PM
Dimo,
Thanks so much for the reply that worked! However, I am still having an issue with the ultimate goal.
I've created another fiddle to show my issue - http://jsfiddle.net/7QjLs/2/
What I want to do is create a new kendoWindow dynamically when responding to a click event. On button click, I use a Kendo template to insert html into the new kendoWindow. This window also uses a splitter. However, the splitter doesn't display correctly because it puts each div in the splitter on top of each other by setting css top: 0px for all the divs.
I tried triggering the resize event on the splitter using kendoWindow's activate event (currently commented out) and it kinda works. The problem is that while the window is opening you can see the splitter div's initially being incorrect, and they don't move into the correct location until the window is completely open. That won't be acceptable from our standpoint. We would hope that the splitter's would be laid out correctly when the window is initially opening. Is there another event that I can hook into?
Thanks so much for the reply that worked! However, I am still having an issue with the ultimate goal.
I've created another fiddle to show my issue - http://jsfiddle.net/7QjLs/2/
What I want to do is create a new kendoWindow dynamically when responding to a click event. On button click, I use a Kendo template to insert html into the new kendoWindow. This window also uses a splitter. However, the splitter doesn't display correctly because it puts each div in the splitter on top of each other by setting css top: 0px for all the divs.
I tried triggering the resize event on the splitter using kendoWindow's activate event (currently commented out) and it kinda works. The problem is that while the window is opening you can see the splitter div's initially being incorrect, and they don't move into the correct location until the window is completely open. That won't be acceptable from our standpoint. We would hope that the splitter's would be laid out correctly when the window is initially opening. Is there another event that I can hook into?
0
Hello David,
Alex Gyoshev
the Telerik team
We have updated the fiddle with a workaround.
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!
0
Nick
Top achievements
Rank 1
Rank 1
answered on 22 May 2012, 02:43 PM
I believe there is a slight bug to the workaround. When you maximize the window, the resize event is fired enough time to make the action noticeably lag. Is there a way to fix this?
http://jsfiddle.net/jKtKw/1/
http://jsfiddle.net/jKtKw/1/