Billboard.js: Chart doesn't get smaller in flex container

[ForsakenHarmony]

Description

The charts generally resize like they should, but in a flex container they get bigger, but not smaller

Steps to check or reproduce

https://codepen.io/forsakenharmony/pen/LzKJpV?editors=0010

Open page, resize browser

[netil]

thanks @ForsakenHarmony for the report. I'll try to check the issue soon. :)

[ForsakenHarmony]

Did you have time to check it yet?

[netil]

Hi, sorry to be late. I’m spending time for other issue, after finishing that I’ll be into for this :)

[netil]

For resize, internally is binded resize event to window.

Then when resize happens, it flows:
→ onresize callback (if option is set) → .flush() → onresized callback (if option is set)

This issue is related with the #155 and need to look more detail on .flush() API.
I'll dig into it, and will comment again when there's an update.

[netil]

For size adjustment, it try to get its parent node width value.
To get that, it uses:

• element.getBoundingClientRect().width or
• element.offsetWidth in case of error.

https://github.com/naver/billboard.js/blob/a9a1e0918a53a2d77d43b58e5d55e9b619df7ea2/src/internals/size.js#L88-L99

But, figure out that in some cases(like this one), it's returning wrong value.
window.innerWidth is smaller than the value which was retrived.

So, for that circumstances, will be updated to use window.innerWidth instead.

[ForsakenHarmony]

Cool
when are you gonna release it?

[netil]

@ForsakenHarmony check out the milestone.

• https://github.com/naver/billboard.js/milestone/3

The coming release will be Dec. 15th.

[ForsakenHarmony]

it still seems broken
check the pen

[netil]

@ForsakenHarmony, for resizing it takes from the bound element's parent's width value.

At the initialization, it will take the current width value of the rendered element.
So, in this case will get the correct width, but when chart is rendered, the parent will remain same width as chart's width, because the chart width will remain same as before without changing.

To fulfill with your need, add additional CSS style width property value on each column.

.column{width:50%}

And will work as below.