Width is miss calculated when you have a container that use overview:hidden

Tags: #<Tag:0x00007efc728d9300>
#1

I’m using bootstrap, and my main content is located in a div that use the style overview:hidden
handsometable calculate the size of the divs .wtHolder and .wtHider in a different ways if all the containers (divs) have the property “overview” equal to ‘visible’ or empty than any of them have overview:hidden, then when i use a div with overview in hidden it hide some of the content.

screenshot-localhost 49943 2016-09-14 12-34-01.png1038×456 27.7 KB

i realized that this function locate that special property on the containers: getTrimmingContainer.
here i show some html code
html.png1037×889 232 KB

I added some style sheet definition to change the overview property, as a workaround. and it works in the mean time, but the property try to avoid the problem of a extra large content in the page and i cant just change that property in my final site.
Could you review the width calculation?
tell me if you need something else to do your tests

#2

to add more information 1013 is the width of the #wrap container
in that function
alignOverlaysWithTrimmingContainer:

it verify if can find a parent “div” with the style proppery “overflow” different to visible
if it found any, do the following
this.holder.style.width = getStyle(trimmingElement, ‘width’); //set the width of wtHolder equal to the container

the container #wrap is the grey zone, but if you see in the layout of the page you can appreciate some divs with margins and padding and those are not substracted before assign the value to wtHolder,

#3

Hi @gquintana
Can I ask you to create a similar demo for tests?

#4

Hi Aleksandra i made an example here

http://codepen.io/anon/pen/PGNdBy

I based my example in one of the handsontable examples and I changed the configuration to emulate the error

thanks

#5

I’m not sure if this solution is suitable for your project but please check it http://codepen.io/anon/pen/vXXmxA?editors=1100

#6

I solved this issue adding a function that substract the padding and the borders pixels that are contained from the table to the div that have “overflow” set in a value different to “visible”

at the line 5137

getPaddings: function (elem, container) {
    var sum = 0;
    var el = elem; 
    var trimmingContainer = container; 
    while (el && el.style && trimmingContainer !== el) {
        var computedStyle = window.getComputedStyle(el);
        var padding = parseInt(computedStyle.getPropertyValue('padding'), 10);
        var border_l = parseInt(computedStyle.getPropertyValue('border-left'), 10);
        var border_r = parseInt(computedStyle.getPropertyValue('border-right'), 10);
        if (padding > 0) sum = sum + (padding * 2);
        if (border_r > 0) sum = sum + (border_r);
        if (border_l > 0) sum = sum + (border_l);
        el = el.parentNode;
    }
    return sum;
},

after adding this function change the line 5164 (former 5148)
from

   this.holder.style.width = getStyle(trimmingElement, 'width');

to

this.holder.style.width = (parseInt(getStyle(trimmingElement, 'width')) - this.getPaddings(this.wtRootElement, trimmingElement)) +'px';

I need to do the same change in another object

now in the line 5927 insert the following function

getPaddings: function (elem, container) {
    var sum = 0;
    var el = elem; 
    var trimmingContainer = container; 
    while (el && el.style && trimmingContainer !== el) {
        var computedStyle = window.getComputedStyle(el);
        var padding = parseInt(computedStyle.getPropertyValue('padding'), 10)
        var border_l = parseInt(computedStyle.getPropertyValue('border-left'), 10);
        var border_r = parseInt(computedStyle.getPropertyValue('border-right'), 10);
        if (padding > 0) sum = sum + (padding * 2);
        if (border_r > 0) sum = sum + (border_r);
        if (border_l > 0) sum = sum + (border_l);
        el = el.parentNode;
    }
    return sum;
},

and change the line 5966

from

return Math.max(width, trimmingContainer.clientWidth);

to

return Math.max(width, (trimmingContainer.clientWidth - this.getPaddings(this.instance.wtTable.wtRootElement, trimmingContainer)));

that solve the problem.
thanks for all

#7

Thank you very much for keeping me updated and for sharing your solution @gquintana

#8

This problem is still going on. do you have solution to solve it gracefully?(I use it in angular project so I cannot hack anything in it.)

#9

I am sorry but I exceeds my capabilities as a support Manager. However if you own an Extended Support plan I can schedule a code review by the developer.