This question is locked. New answers and comments are not allowed.
I am having troubles with the splitter control not resizing its panes correctly when the splitter resides in a div that is resized with the browser window.
My site has a header, a footer, and a content area. These areas are positioned and/or sized when the browser window is sized. The content div has a splitter control that fills the content div (width & height 100%). I have a custom size event hooked up to the splitter so that when the content div resizes, the splitter's resize() function is called.
Typically, when I first launch the site and resize the browser window, the splitter panes adjust themselves as I would expect: the panes stay relatively the same size.
However, when I resize one of the panes by dragging the splitter bar and then resize the browser window, the panes no longer keep their relative size. The window can even be sized so that splitter bars disappear off the bottom not, as I would expect, stay visible until there is no longer room for the bar itself.
Additionally, collapsible bars work correctly before resizing a pane. When the pane collapses, the bar moves to the top or bottom of the splitter area. After resizing a splitter, however, the bottom splitter (in my example) no longer moves to the bottom of the splitter when it is collapsed. The contents of the pane disappear but the splitter bar stays where it is instead of moving to the bottom of the splitter area and expanding the other panes.
I have attached the full source code of the web site I created to demonstrate this problem.
If you run the project and resize one of the splitters you should easily be able to reproduce the issue I'm seeing.
I typically develop on Google Chrome, but the problem is also also evident in IE8.
Thanks,
Chris
EDIT: Uploaded a modified test with resizing code and div coloring that shows that the issue is not caused by my code not resizing the divs correctly. So, look at the second example that I cleverly named identically to the first example.
My site has a header, a footer, and a content area. These areas are positioned and/or sized when the browser window is sized. The content div has a splitter control that fills the content div (width & height 100%). I have a custom size event hooked up to the splitter so that when the content div resizes, the splitter's resize() function is called.
Typically, when I first launch the site and resize the browser window, the splitter panes adjust themselves as I would expect: the panes stay relatively the same size.
However, when I resize one of the panes by dragging the splitter bar and then resize the browser window, the panes no longer keep their relative size. The window can even be sized so that splitter bars disappear off the bottom not, as I would expect, stay visible until there is no longer room for the bar itself.
Additionally, collapsible bars work correctly before resizing a pane. When the pane collapses, the bar moves to the top or bottom of the splitter area. After resizing a splitter, however, the bottom splitter (in my example) no longer moves to the bottom of the splitter when it is collapsed. The contents of the pane disappear but the splitter bar stays where it is instead of moving to the bottom of the splitter area and expanding the other panes.
I have attached the full source code of the web site I created to demonstrate this problem.
If you run the project and resize one of the splitters you should easily be able to reproduce the issue I'm seeing.
I typically develop on Google Chrome, but the problem is also also evident in IE8.
Thanks,
Chris
EDIT: Uploaded a modified test with resizing code and div coloring that shows that the issue is not caused by my code not resizing the divs correctly. So, look at the second example that I cleverly named identically to the first example.
1 Answer, 1 is accepted
0
Chris
Top achievements
Rank 1
Rank 1
answered on 18 May 2011, 02:34 AM
I convinced my company to buy a license to .NET Ultimate suite, and I had this question answered (very promptly!) by Telerik support.
In case anyone is wondering, the answer is to give only the collapsible pane(s) a size. That way, the other pane(s) can float freely and everything works fine.
Chris
In case anyone is wondering, the answer is to give only the collapsible pane(s) a size. That way, the other pane(s) can float freely and everything works fine.
Chris