2 complex visualization bugs

[kamil_rafik]

Hello.
I have 2 visualization bugs in my application which uses ExtJs libraries.
Both bugs appear in the components which do not use ExtJs, but they appear only (!) if ExtJs chart is included in the page.
That's why I'm asking my question here.
Moreover, I think these 2 bugs are caused by a single problem inside ExtJs.
Both bugs are observed in Chrome and were not checked in other browsers.

===============


BUG #1 - Border of the widget decreases its height while the widget is dragged and its css "position" property is "absolute".
Widget is the highly customized wdCalendar plug-in for jQuery.
Dragging is performed with jQueryUI Draggable plug-in.
Bug appears only when Calendar is dragged and has "position: absolute", and only when ExtJs chart is included in the page.
I could fix this bug in other types of widgets (we have many widgets, not only Calendar) by setting "display: block" during dragging. But it does not work for Calendar.
See the border of Calendar on the picture.

30545

===============

BUG #2 - Div's dimensions are calculated differently when ExtJs chart is included.
See the div which is not aligned correctly and its dimensions in Chrome's debugger Metrics tab. On another picture you may see how it is displayed on the page without ExtJs chart.

3054630547


(In fact probably I should post this question in Premium forums, but manager is absent and I have not access to his account now.)

[mitchellsimoens]

So you are saying there is a compatibility issue between Ext JS 4's charts and jQuery stuff?

[kamil_rafik]

So you are saying there is a compatibility issue between Ext JS 4's charts and jQuery stuff?

No, I cannot say so, because I did not perform detailed analysis for checking exactly compatibility topics.

The only I can say is demonstrated by my description of the bug #2.
ExtJs changes the WAY how browser calculates borders, padding and total size of the element.

In my hardcoded styles for that div I have
height: 140px !important;
border: 1px solid #aaa;
padding: 20px !important;

Without ExtJs this height is applied to element, and then padding and border are added, so the height of element is 140px as described.
With ExtJs the size of border and paddings is subtracted fgrom the height of element, so the final height is equal to 98px (= 140 - (20 * 2 + 1 * 2)).

I think this changing of the WAY how CSS are parsed by the browser is the reason of the bug #1 too.