Bootstrap and CFChart
Copy link to clipboard
Copied
I am trying to use Bootstrap with a CF site that makes heavy use of CFChart. Bootstrap has worked fine in the past with pages that don't use CFChart.
Bootstrap requires 3 meta tags to appear first in the HTML header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
With a CFChart tag in the page, tags are injected into the header above the Bootstrap tags, thus breaking some of the Bootstrap functionality:
<!DOCTYPE html>
<html lang="en">
<head><script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml="<img alt=' ' src='/cf_scripts/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath="";
_cf_ajaxscriptsrc="/cf_scripts/scripts/ajax";
_cf_jsonprefix='//';
_cf_websocket_port=8579;
_cf_flash_policy_port=1243;
_cf_clientid='F6BB2B1167EC6583C9AE1D7B3272CA1E';/* ]]> */</script><script type="text/javascript" src="/cf_scripts/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/cf_scripts/scripts/chart/cfchart-server.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
How do I fix this or get Bootstrap to work without the 3 tags first in the header?
Copy link to clipboard
Copied
What functionality does it break? What errors are you getting?
We use bootstrap and cfchart with no issues?
Copy link to clipboard
Copied
I have the same issue with cfchart breaking Bootstrap in IE11. <cfchart> is causing code to be inserting into <head> at the beginning before other specified <meta> tags.
IE11 requires the <meta http-equiv="X-UA-Compatible" content="IE=edge"> to be right at the top of the <head> otherwise IE will not respect the request to render in Edge mode and defaults back to IE7 rendering engine.
Copy link to clipboard
Copied
I can across a possible solution. Add the key:value pair of X-UA-Compatible:IE=edge to the pages response header.
<cfheader name="X-UA-Compatible" value="IE=edge">
This way if the <meta> tag gets pushed too far down within the <head>, the page response header is also requesting IE use Edge mode for rendering.

