Bootstrap 3 conflict!
Permalink 1 user found helpful
Hello,
I'm using bootstrap 3 on my custom theme and everything is working fine, except whenever I'm in the edit mode, when I try to open the "Edit Area Design" sometimes it shows the options available but sometimes it does not... and when I'm able to click some of the options on the Edit Area Design nothing happens, I found out that whenever a remove the bootstrap javascript library this problem goes away, so is there a way to fix this problem? and still use the javascript library of bootstrap 3.
Thank you in advance
I'm using bootstrap 3 on my custom theme and everything is working fine, except whenever I'm in the edit mode, when I try to open the "Edit Area Design" sometimes it shows the options available but sometimes it does not... and when I'm able to click some of the options on the Edit Area Design nothing happens, I found out that whenever a remove the bootstrap javascript library this problem goes away, so is there a way to fix this problem? and still use the javascript library of bootstrap 3.
Thank you in advance
I've been struggling with the same issue.
hey I found a way to access this options by going to Stack & Blocks from your option on the right sidebar and then click on "View Stacks" and choose "View Global Areas" then choose the block you want to edit, then click again the block and choose "Design & Custom template", that worked for me... let me know if it worked for you too.
Best Regards
Best Regards
I was having the same problem on a Bootstrap site and then I changed a few things and it is now working. Unfortunately, I am not sure what it was exactly that I changed that made it work as I thought I would come back to fixing it later and then it was working fine. I am guessing it is something to do with the assets in page_theme.php. Maybe the order of assets or the combination of assets? Anyway, the working combination for me is:
Concrete5 v 5.7.3.1
Bootstrap v 3.3.4
I have the assets in my page_theme.php registered like this:
Then I have the Bootstrap CSS in header.php
And Bootstrap js in footer.php
It's working on two Bootstrap sites now.
Concrete5 v 5.7.3.1
Bootstrap v 3.3.4
I have the assets in my page_theme.php registered like this:
public function registerAssets() { $this->requireAsset('javascript', 'jquery'); $this->providesAsset('javascript', 'bootstrap/*'); $this->providesAsset('css', 'bootstrap/*'); }
Then I have the Bootstrap CSS in header.php
<!-- Bootstrap core CSS --> <link href="<?php echo $view->getThemePath()?>/css/bootstrap.min.css" rel="stylesheet">
And Bootstrap js in footer.php
<script type="text/javascript" src="<?php echo $view->getThemePath()?>/js/bootstrap.min.js"></script>
It's working on two Bootstrap sites now.
thanks, I will try that and let you know if it worked for me.
Actually, I tried this out to see if I could replicate the problem but the order and combo of the assets in page_theme.php didn't matter on my site (eg. it didn't seem to matter if I provided bootstrap CSS and required bootstrap js, or vice versa). The menu doesn't work though if bootstrap.js is included in the theme and also is required in page_theme.php, i.e. if bootstrap.js is included in the theme, it needs to be registered in page_theme.php as provided. This may not be the issue on your sites, but I guess it is something for people to check if their menu isn't working.
Here is a link that talks about including bootstrap.js
http://www.concrete5.org/documentation/developers/5.7/designing-for...
Here is a link that talks about including bootstrap.js
http://www.concrete5.org/documentation/developers/5.7/designing-for...
I have ran into an issue like this before when adding conflicting javascript.
My fix was done by turning the particular javascript off while in edit mode. Its usually an extra or unneeded jquery.
Hope this helps.
My fix was done by turning the particular javascript off while in edit mode. Its usually an extra or unneeded jquery.
Hope this helps.
<?php if($c->isEditMode()){ ?> <?php } else { ?> <script src="<?php echo $this->getThemePath()?>/js/bootstrap.min.js"></script> <?php } ?>
Works!! Perfectly!! ...thanks!!
where to put the code?
This code should be placed at the bottom of your footer file.
You should see this code at the bottom of your footer.php file.
Replace that code with this.
The footer.php should be in your elements folder "depending on your theme".
You should see this code at the bottom of your footer.php file.
<script src="<?php echo $this->getThemePath()?>/js/bootstrap.min.js"></script>
Replace that code with this.
<?php if($c->isEditMode()){ ?> <?php } else { ?> <script src="<?php echo $this->getThemePath()?>/js/bootstrap.min.js"></script> <?php } ?>
The footer.php should be in your elements folder "depending on your theme".
