Guys -
Are there any known conflicts between the igDataCharts and the bootstrap framework? I am noticing that if I use a layout of a page that has the CSS file for the bootstrap framework enabled, the igDataChart will not render correctly. If I check the source on the page I can see that the correct data is there, just not showing properly.
FYI, I am also running igDataGrids on the same view and they are working properly.
Thoughts, suggestions??
Hello Bobby,
Thank you for your contribution to community!
Is this accurate? I can see the bootstrap referenced like:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
And in the resources loaded via the browser it seem no comment is made for
*,
*:before,
*:after {
/*-webkit-box-sizing: border-box;*/
/*-moz-box-sizing: border-box;*/
/*box-sizing: border-box;*/
}
Could you please provide the working CodeSample reproducing this?
I forgot to give the link with error here it is:
http://wowpulse.adeptconsultants.dk/test.html
I am looking forward for a work around
regards
Bobby
Hello
I have found a new error that you should look at it with bootstrap.
I took an exaple from your site with dropshadow and it worked fine
http://wowpulse.adeptconsultants.dk/testwithout.html
and i took the same file and added bootstratp Css. and it doesnot rendered. I also removed the
/*-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;*/
in my local version and still the same.
Hello All,
I have tested this scenario and it appears that when the bootstrap.css from the BundleConfig.cs is commented, the chart displays normal. I have tested with bootstrap versions 3.0.0 & 3.0.3 with the same results. I have managed to isolate the problem to the following code in the bootstrap.css file:
When this code is disabled the chart appears as expected. It renders correctly in the corresponding browser, depending on the line commented.
Thank you for posting in the community!
Hello Ryan,There is a difference between how the igDataChart and the igDataGrid render. Actually the igDataChart is in a canvas element. Adding the chart in a container element (lets say DIV) could do the job. Please refer to this forum thread as there is a similar issue discussed, related to resizing igDataChart in a container. https://ko.infragistics.com/community/forums/f/ignite-ui-for-javascript/78952/igdatachart-on-bootstrapI hope it works for you. If not could you please share a CodeSample which reproduces the issue, for further testing.Please contact me if I can be of further assistance.