Bootstrap 2.1.1 And Concrete 5.6.0.1 - Container issues (conflicts)
Permalink 1 user found helpful
I am using Bootstrap in a theme I am building for a client. I have just started, and this is the first time I have used the new Bootstrap version and the new Concrete together. When I am logged in to Concrete the .container that I am using is constricted to 940px which seems to be coming from ccm.app.css
However it should be expanding to utilise the media query of 1200 making the grid-system bigger. But is being stopped by the css file from Concrete above.
I am using a customised version of Bootstrap (I didn't change any options within it though), again a new thing for me, as normally I get one where the responsive css is in a separate file.
Is this a common issue? As I can't find anything about it anywhere, and is there something simple I can do to amend it? Or is this simply a bug in Concrete as I know they prefix their Bootstrap classes so they don't conflict with one being added in to a theme?
However it should be expanding to utilise the media query of 1200 making the grid-system bigger. But is being stopped by the css file from Concrete above.
I am using a customised version of Bootstrap (I didn't change any options within it though), again a new thing for me, as normally I get one where the responsive css is in a separate file.
Is this a common issue? As I can't find anything about it anywhere, and is there something simple I can do to amend it? Or is this simply a bug in Concrete as I know they prefix their Bootstrap classes so they don't conflict with one being added in to a theme?
Hello Chad,
Thanks for the speedy response, and I would much prefer to use the new version of Bootstrap rather than back pedalling on the older one, which from the looks of it shouldn't be having this issue surely?
Dean
Thanks for the speedy response, and I would much prefer to use the new version of Bootstrap rather than back pedalling on the older one, which from the looks of it shouldn't be having this issue surely?
Dean
Bootstrap and C5 are an enigma to me. you may want to talk to either the core team or Hostco.
ChadStrat
ChadStrat
940px wide container is the standard for bootstrap if you dont have the responsive features enabled. Did you add the responsive css from bootstrap ?
Yes i have indeed, and when I remove the 940px limit that is being added by ccm.apps.css, it utilises the responsive widths for the container. I've had to get the bog standard version of bootstrap which gives you a responsive.css file and a bootstrap.css file, and within my header template, put the responsive one under the required php function so that it takes precedency over the concrete version.
Concretes bootstrap obviously doesn't use the responsive and just sets the container to 940px
I first tried modifying the concrete css file, however it controls the dashboard as well, and removing it made the dashboard boxes span full width of the page.
I presume this is an issue with the way the concrete team implemented the new version of bootstrap and didn't add their own prefix to the container class, I don't really know why they haven't, but it would seem to be the only fix to stop it from affecting themes with bootstrap included.
This is something that defiantly affects the newer versions of these systems, as i've always done it the same way without this issue
Concretes bootstrap obviously doesn't use the responsive and just sets the container to 940px
I first tried modifying the concrete css file, however it controls the dashboard as well, and removing it made the dashboard boxes span full width of the page.
I presume this is an issue with the way the concrete team implemented the new version of bootstrap and didn't add their own prefix to the container class, I don't really know why they haven't, but it would seem to be the only fix to stop it from affecting themes with bootstrap included.
This is something that defiantly affects the newer versions of these systems, as i've always done it the same way without this issue
ahh you mean when logged in and select the Dashboard you get
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;
I am not sure where that is a problem as the main site(theme installed) will still use your .container class in the bootstrap css.
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;
I am not sure where that is a problem as the main site(theme installed) will still use your .container class in the bootstrap css.
My issue is, it's using the concrete one instead of mine on the actual theme, when logged in. It's controlling the dashboard, but it's also affecting my theme
In your Header.php file have you placed the following where your css files are in the root of your theme folder.
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('bootstrap.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('responsive.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('bootstrap.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('responsive.css')?>" />
No I haven't? My files are being pulled in, and as they are, they are working I am also using:
<?=$this->getThemePath()?>
and they are in the theme not the root.
The issue is, when it's one css file, and it's above <?=Loader::element('header_required')?>
but as it is with the responsive stylesheet under it, it works.
<?=$this->getThemePath()?>
and they are in the theme not the root.
The issue is, when it's one css file, and it's above <?=Loader::element('header_required')?>
but as it is with the responsive stylesheet under it, it works.
This is what I use if this helps you
<head> <?php Loader::element('header_required'); ?> <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Stylesheets --> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" /> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('bootstrap.css')?>" /> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
I'll have to look in to it, thanks, but when I had the required header function above my css it caused my areas to not be editable
I think part of the problem here is that we're not properly namespacing all of the bootstrap in ccm.app.css. For example, the .container classes and .row classes aren't being wrapped by .ccm-ui in our ccm.app.css which makes them greedy. We will try and address this in an update.
Ok thanks very much, that clears a lot up for me.
for now, what I've done is just put the responsive CSS under the header_required function which allows it to take precedency over the concrete version. If anyone else has this issue.
for now, what I've done is just put the responsive CSS under the header_required function which allows it to take precedency over the concrete version. If anyone else has this issue.
I thought that was the standard set up anyway putting the CSS after the <?php Loader::element('header_required'); ?>
I can verify this issue in 5.6.0.1. I am using my Foundation theme (which is very similar to Bootstrap), and I have notice the conflicts issue of rows. I'm sure there's other conflicts as well.
Will there another maintenance release soon, and if so when?
Will there another maintenance release soon, and if so when?
In the Page properties window on the custom attributes tag we have :
and
When using a bootstrap theme and having the below CSS set up the span5 and span3 class use the bootsrtap.css and not the ccm.app.css. for @media (min-width: 1200px) only. This results in the two columns being too wide and does not place them side by side in the window.
I am not sure if this will be resolved in the fix or if I need to move the order of my css files. (https://github.com/concrete5/concrete5/commit/bb933a8972164eaa61394e... )
Thanks
<div id="ccm-attributes-column" class="span3">
and
<div class="span5" id="ccm-page-attributes-selected">
When using a bootstrap theme and having the below CSS set up the span5 and span3 class use the bootsrtap.css and not the ccm.app.css. for @media (min-width: 1200px) only. This results in the two columns being too wide and does not place them side by side in the window.
I am not sure if this will be resolved in the fix or if I need to move the order of my css files. (https://github.com/concrete5/concrete5/commit/bb933a8972164eaa61394e... )
Thanks
<?php Loader::element('header_required'); ?> <!-- Stylesheets --> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" /> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('bootstrap.css')?>" /> <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
Do we know when this will be fixed please ?
Issue have been work out on github master. Thanks to the core team for the quick action.
I am also working on a theme with bootstrap 2.1 and got another conflict with bootstrap from the core.
I load the full bootstrap.js in the theme.
Dropdown don't work. conflict with ccm.app.js i didn't try with popover, tooltip to see if there is also conflict with ui from concrete core
I am also working on a theme with bootstrap 2.1 and got another conflict with bootstrap from the core.
I load the full bootstrap.js in the theme.
Dropdown don't work. conflict with ccm.app.js i didn't try with popover, tooltip to see if there is also conflict with ui from concrete core
Yep correct you will need to add script so that it does not load the bootstrap.js when the user is logged in.
There is plenty of discussion about this kind of conflict with javascript
Conflict happen only when "superuser" login. You can definitely work it out with a script that don't load the bootstrap library when a "superuser" login. But actually the core concrete use only part of the javascript of bootstrap library. in fact when login as superuser if you use some plugin of the bootstrap which are not include in ccm.app.js your block or whatever use the plugin do not work.
You can definitely work it out by spliting the bootstrap library but it's not really convenient. I don't know if there is a better way to work it out.
Conflict happen only when "superuser" login. You can definitely work it out with a script that don't load the bootstrap library when a "superuser" login. But actually the core concrete use only part of the javascript of bootstrap library. in fact when login as superuser if you use some plugin of the bootstrap which are not include in ccm.app.js your block or whatever use the plugin do not work.
You can definitely work it out by spliting the bootstrap library but it's not really convenient. I don't know if there is a better way to work it out.
I have run into this issue to with a site that was started on 5.5.whatever and is now 5.6.0.2. The conflict comes from ccm.app.js and bootstrap both having bootstrap dropdown in there code which will not neccessarily conflict but basically call the toogle twice. This sets the state of the dropdown to open and then close but it is so fast that it looks like it never does anything. I have not found anything online about how to solve this issue. What I have done is just when I need to I rename bootstrap.js inside concrete5\concrete\js\ to bootstrap2.js so it wont be loaded which allows the dropdowns to work but can mess with some other functionality. So I only do this temporarily. Someone needs to come through with an answer of how to fix this. For me I believe the problem only occurs on the sites that went from 5.5 to 5.6.
I am having this same issue with 5.6.0.2 so I guess it hasn't been resolved yet.
Short of a proper update, what is the best way to address this in the meantime?
Short of a proper update, what is the best way to address this in the meantime?
Have you tried customising your Bootstrap JS file to remove the Dropdown options?
http://twitter.github.com/bootstrap/customize.html...
http://twitter.github.com/bootstrap/customize.html...
I don't want to have to customize bootstrap and I shouldn't have to.
I'm not sure why C5 wouldn't have been namespaced by a team as knowledgeable as the guys working on C5. I have been trying to namespace my bootstrap instead, which sucks, but hey, if I can do it, that will solve the problem for all forseeable future.
What I am stuck on is bootstrap.js which is a compressed file that features a newer version of jQuery and is conflicting with Concrete5's version in Edit Mode. I currently have a conditional that breaks the site's menus in Edit mode by disabling the newer version of jQuery, but that's stupid.
How can I namespace bootstrap.js properly so the jQuery conflict goes away? Anyone?
What I am stuck on is bootstrap.js which is a compressed file that features a newer version of jQuery and is conflicting with Concrete5's version in Edit Mode. I currently have a conditional that breaks the site's menus in Edit mode by disabling the newer version of jQuery, but that's stupid.
How can I namespace bootstrap.js properly so the jQuery conflict goes away? Anyone?
I had another conflict the other day with .content which is apart of the menus when click on a block, I had selected the body id and then the .content class, which affected it
I wander (although a lot of work) if the concerete css is prefixed for everything that purely styles the backend ui, if it will fix all these issues
I wander (although a lot of work) if the concerete css is prefixed for everything that purely styles the backend ui, if it will fix all these issues
ChadStrat