Highlighted

Bootstrap and CFChart

New Here ,
Apr 05, 2016

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?

Views

589

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Bootstrap and CFChart

New Here ,
Apr 05, 2016

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?

Views

590

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 05, 2016 0
Advocate ,
Apr 06, 2016

Copy link to clipboard

Copied

What functionality does it break? What errors are you getting?

We use bootstrap and cfchart with no issues?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2016 0
New Here ,
Jan 13, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2017 0
New Here ,
Feb 09, 2017

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 09, 2017 0