Goodmorning,
i use IgniteUI Controls on ASP.NET MVC Project , with Bootstrap Framework. The igGrid in a boostrap container fits perfect and when resize the Browser does it's job good with the responsive UI. How can i achieve that with the igDataChart?I want the Chart to fit in a bootstrap container and resize when i resize the browser in order to make a responsive UI screen in my application.
Thanks in advance,
Ilias
Hi LLias,
Thank you for using Infragistics` IgniteUI!
What you want can be achieved but in slightly different approach. The igDataChart is in a "canvas" element so it is not resized the way igGrid is when using Bootstrap.
The easiest way to go around this is by placing the Chart inside a container element and setting this container`s dimensions in percent (%) and not in pixels (px). The Chart`s width and height options should be also set in percent.
I hope this help.
If you have any issues implementing it - don`t hesitate to ask.
Regards,
Alexander Marinov - Associate Software Engineer in Test
yesterday i tried this approach : container with % dimensions, chart with % dimensions, the width was OK but the height was 1px. So i set the height with constant size on Js and on window resize event, i change the size of chart height. I think that happens because bootstrap spans gives width to their elements but not height!
Thanks for your answer :)
Hello,
A fix for development issue 160616 has just been released for IgniteUI 13.2. The new service release can be downloaded from our website at:
https://ko.infragistics.com/my-account/keys-and-downloads/
Please do not hesitate to contact us if any questions regarding this issue arise.
Hi Tanmay,
I have created case CAS-131085-W7M2C0 and linked development issue 160616 for you.
As a temporary solution, our engineers suggest adding the following CSS in order to circumvent the CSS rules applied by Bootstrap which cause issues:
<style> .ui-chart-category-axis-tick { box-sizing: content-box; -moz-box-sizing: content-box; } </style>
If you have any further questions or concerns with this, please let me know and I'll be glad to help.
Is it possible to be added to the affected users list for the following cases: CAS-130004-K3L9C8 and CAS-130003-Q6N4L9
This is a problem for our internal development using Ignite charts with Bootstrap css. It would be awesome if we can be kept in the loop of any possible solutions.
Thank you for your replies and feedback.
After further research, the CSS related issues in igDataChart when a Bootstrap reference is present have been isolated and this behavior has been logged in our internal system to be reviewed by our engineers. The tracking ID of the development issues is 160616.
@NetTecture and FlavioMaccarrone,
I have created private support tickets for you regarding this matter so that you will receive automatic notification when a fix for the described behavior is available. Your case numbers are CAS-130004-K3L9C8 and CAS-130003-Q6N4L9 respectively and I will contact you through them with more information.
Please do not hesitate to contact me if you have any questions.
Same here.
I actually got a "can not reproduce" by a totally incompetent Infragistics Support-Drone (I refuse to call that specialist) that actualy had made a repro case - using an outdated version of bootstrap (v2). Seems reading error reports is out of the competency requirements. I did not bother to follow up.
As this particular customer project ONLY uses charts in HTML I am contemplating redoing the prototype using a cost-free third party component. The financial investment for Infragistics was hard to justify in this case anyway (due to the only one component used scenario).
Still I like Infragistics - but for this particular case it just makes no sense to go on with them. And would be nicer they would hire support people that are a little on top of technology.