Box-sizing might affect Gantt appearance

[alekwisnia]

I've noticed that after upgrading CSS against newest Bootstrap, it breaks the grid appearance. This is because of box model used for calculations. This Gantt script uses content-box, while new Bootstrap CSS sets box-sizing to border-box for all elements.
The same problem might appear with some browsers.
The solution proposed is in usmonster#2

[usmonster]

Thanks for filing it here, @alekwisnia! And to continue the discussion, I see a few ways to address this issue:

1. Since the issue stems from a third-party library changing the W3C standard default box sizing ('content-box') for an entire page, we can leave it up to developers who use the plugin to update their own stylesheets to restore the expected box-sizing to Gantt elements. Supported legacy browsers that default to 'border-box' (namely, IE8 in 'quirks mode') will continue to show whatever they're currently showing.
2. Add new CSS rules to the plugin's stylesheet that enforce the expected default 'content-box' sizing. This will grow the size of the plugin with a few extra lines of CSS that will be largely redundant in most use cases, but it will also make it slightly easier for Bootstrap users (and others who use the increasingly popular border-box "reset") to have the plugin render correctly without any extra work.
3. Update the plugin JS to support any box-sizing (including the newer 'padding-box'). It is unclear what exactly that means or entails, but should probably be researched and clarified.
4. Explicitly update the entire plugin to use 'border-box' sizing. This would have the same advantages and disadvantages as option 2, though it would also require some careful recalibration of CSS heights, widths, margins, and paddings throughout the plugin. Still, this would vastly simplify these numbers and related calculations by making them more intuitive, thereby adding the potential to greatly reduce the incidence of rendering issues that have historically plagued the plugin.

My vote is for option 4 as the long-term fix, and option 1 for the short-term, though I could possibly be convinced that option 2 is an acceptable short-term workaround.

Any other thoughts to add, @taitems, jQuery.Gantt community? :]

[taitems]

Option 4. no doubt :)

Sent from my iPad

On 22 Oct 2013, at 4:58 pm, usmonster notifications@github.com wrote:

Thanks for filing it here, @alekwisnia https://github.com/alekwisnia! And
to continue the discussion, I see a few ways to address this issue:

1. Since the issue stems from a third-party library changing the W3C
   standard default box sizing
   http://dev.w3.org/csswg/css-ui/#box-sizing('content-box') for an
   entire page, we can leave it up to developers who
   use the plugin to update their own stylesheets to restore the expected
   box-sizing to Gantt elements. Supported legacy browsers that default to
   'border-box' (namely, IE8 in 'quirks mode') will show whatever they're
   currently showing.
2. Add new CSS rules to the plugin's stylesheet that enforce the
   expected default 'content-box' sizing. This will grow the size of the
   plugin with a few extra lines of CSS that will be largely redundant in most
   use cases, but it will also make it slightly easier for Bootstrap users
   (and others who use the increasingly popular border-box "reset") to have
   the plugin render correctly without any extra work.
3. Update the plugin JS to support any box-sizing (including the newer
   'padding-box'). It is unclear what exactly that means or entails, but
   should probably be researched and clarified.
4. Explicitly update the entire plugin to use 'border-box' sizing. This
   would have the same advantages and disadvantages as option 2, though it
   would also require some careful recalibration of CSS heights, widths,
   margins, and paddings throughout the plugin. Still, this would vastly
   simplify these numbers and related calculations by making them more
   intuitive, thereby adding the potential to greatly reduce the incidence of
   rendering issues that have historically plagued the plugin.

My vote is for option 4 as the long-term fix, and option 1 for the
short-term, though I could possibly be convinced that option 2 is an
acceptable short-term workaround.

Any other thoughts to add, @taitems https://github.com/taitems,
jQuery.Gantt community? :]

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/102#issuecomment-26810431
.

[alekwisnia]

Option 4 is like walking on thin ice :) But I agree, my vote for 4.

[dcale]

I ran in the same issue, is there something the user can do itself to fix this? (I am using boostrap 3)

[usmonster]

@dcale, you can see an example of how to reset the bootstrap reset for your page in commit 2666f30.

Is the issue you ran into identical to what you reported in #32 ? If so, we can finally close that issue. :D

[dcale]

@usmonster well from what I saw before (when I removed the bootstrap css) it looked like it's working fine with my data and on chrome thus, I'd say it's fixed and we can close it!

Thanks for the hint on commit 2666f30, everything works beautifully now!