[Solved] Splitter bar rendering issue in Chrome

[Lucas]

Hello,

I have a basic splitter bar control embedded in a tabstrip that is having some odd behavior in Chrome.

When I resize the right most splitter, the splitter containers on the left hand side dont resize. I have attached an image showing the issue. 

Has anyone seen this before? And is there anyway to fix this?

Thanks!

[Dimo]

Hi Lucas,

We are not aware of such a problem. If you send us a runnable demo, which reproduces the unexpected behavior, we will inspect it locally and provide additional information.

Regards,
Dimo
the Telerik team

[Lucas]

Hi Dimo,

I have attached a sample application. If you move the horizontal splitter up or down slightly you will see the issue.
You can now move the vertical splitter to the right and see the gap get larger for the vertical splitter.

I dont know why there is a very large horizontal scroll bar when you first open the app...

Thanks for your help!

-Lucas

[Dimo]

Hello Lucas,

Thanks for the runnable demo.

The problem is caused by the fact that the two nested splitters are loaded with Ajax simultaneously. In such cases the inner splitter (LeftPane) is initialized before the outer one (ViewerSplitter), because its initialization script is rendered first, which is normal. As a result, the inner splitter does not attach a required resize event handler to the outer one.

A possible workaround is to include the inner splitter in another partial view, so that it is loaded after the outer splitter has been initialized.

Regards,
Dimo
the Telerik team

[Lucas]

Hi Dimo,

I think I have implemented what you had suggested. I am still seeing the problem.

The initial view seems to be fine but if you shrink the left pane you get some unnecessary scroll bars. If you then move the splitter bar over to the right you will see the same issue as reported.

Is there some sort of resizing logic I need to implement to get this to work?

I have attached a runnable demo.

Thanks for your help!

-Lucas

[Dimo]

Hello Lucas,

Please set .Scrollable(false) to the first pane in _Viewer.cshtml.

All the best,
Dimo
the Telerik team

[Lucas]

Hi Dimo,

That was it! Thank you so much for all your help!

You guys have some of the best forum support I have ever used!

-Lucas