• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Bootstrap and CFChart

New Here ,
Apr 05, 2016 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

720

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
community guidelines
Advocate ,
Apr 06, 2016 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?

Votes

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
community guidelines
New Here ,
Jan 13, 2017 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.

Votes

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
community guidelines
New Here ,
Feb 09, 2017 Feb 09, 2017

Copy link to clipboard

Copied

LATEST

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.

Votes

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
community guidelines
Resources
Documentation