Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 29 May 2019 10:54 by ADMIN
Mark
Created on: 30 Apr 2019 02:04
Category: Splitter
Type: Feature Request
1
Splitter incorrectly sizes panes when they have borders and/or padding

See Kendo UI v2019.1.220 Distributed Source Code module kendo.splitter.js _resize() method (Lines 285-240) 

 

1) The splitter _resize method iuses jQuery width() and height() methods to set pane sizes.

2) These methods get/set the clientHeight and clientWidth of the pane element rather than the offsetWidth and offsetHeight. 

3) If any pane has a border or padding, the last pane will extend beyond the limits of the splitter element.

4) Recommend using offsetWidth and offsetHeight to get/set all pane sizes. 

6 comments
ADMIN
Dimitar
Posted on: 29 May 2019 10:54
Hello Mark,

In general, the Splitter panes area a building block of the widget and modifying their styling can cause issues with the majority of the Splitter functionality. The recommended approach for adding content to the panes is to include the CSS customizations inside the actual panes which will not cause them to be sized incorrectly e.g:
<div id="top_pane" >
  <div style="padding: 40px; border:4px solid green;">asd asdasd </div>   
</div>

Yes, this behavior could be enhanced further to accommodate changes to the panes, however, this will require major changes, extensive testing and sync with the designers team. Taking this into consideration, this request is marked as a feature request that will be prioritize based on the gathered feedback and demand.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Mark
Posted on: 24 May 2019 19:23
Shouldn't this be a bug report rather than a feature request as it clearly is not exhibiting the intended behavior?
ADMIN
Dimitar
Posted on: 23 May 2019 10:11
Hello Mark,

Thank you for the provided sample.

After investigating the scenario further, I managed to verify that the described behavior is indeed reproducible. Thus, I have converted this thread to a feature request in the Public Feedback Portal. We will prioritize it according to the received user feedback and demand.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Mark
Posted on: 18 May 2019 02:20

Oops, I meant to say 

https://dojo.telerik.com/iFEVAbeL

Mark
Posted on: 18 May 2019 02:19

https://dojo.telerik.com/@nyditot/ORIXaXeJ

The only thing did was change the line:

    <div id="top_pane" > 

to 

    <div id="top_pane" style="padding:40px;border:4px solid red;">  

and 

    <div id="bottom_pane" >

to  

    <div id="bottom_pane" style="border:4px solid green;">

You will notice that the rightmost pane now extends beyond the right border of the splitter by 4 + 40 + 40 + 4 + 4 + 4 = 96 pixels, the sum of left and right borders and paddings.

 

ADMIN
Dimitar
Posted on: 07 May 2019 10:21
Hello Mark,

I have tried reproducing the described issue with the Splitter API Demo, where the configuration allows to resize panes through the size() method:


Could you inspect the example and modify it so that the described issue with the boders and padding can be replicated and post it here so that I am able to continue my investigation on the matter?

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category