The place to discuss all things related to the Exponent Content Management System

Boostrap - the best practices with 2.2.3

edited January 2014 in General Support
Hello,
a site has exp 2.2.3 and it's Boostrap Flydown navigation. I tested with the standard Exp bootstrap theme and the navigation works but when I test with my own bootstrap built custom theme the navigation doesn't work (clicking the items doesn't reveal the submenu).

I realized that the custom theme's own bootstrap.js goes into a conflict with the Exp one. I compared them quickly and they seem to be quite identical (I will still test with some file comparison software). If I remove the custom theme bootstrap file, some theme functions stop to function but navigation works though. How would I link the Exp own bootstrap.js that the theme would find it? I can't see that twice in the page code at least now.

The custom theme head is like this:

expTheme::head(array(
"xhtml"=>false,
"normalize"=>true,
"framework"=>"bootstrap",
// these viewport settings are the defaults so they are not really needed except to customize
"viewport"=>array(
"width"=>"device-width",
"height"=>"device-height",
"initial_scale"=>1,
"minimum_scale"=>0.25,
"maximum_scale"=>5.0,
"user_scalable"=>true,
),
"css_core"=>array(
"common"
),
// bootstrap (system) variables are overridden in the /less/variables.less file
"lessvars"=>array(
'menu_height'=>MENU_HEIGHT,
'menu_width'=>MENU_WIDTH,
),
"css_links"=>true,
"css_theme"=>true

and additionally it was needed to link some js files like this in the footer:
<script src="<?php echo THEME_RELATIVE; ?>js/bootstrap.js"></script>

If this is removed, the navigation works but the site otherwise not (custom slideshow etc).
How to debug or fix this situation?

Comments

  • The framework = bootstrap sets up the chain to load jquery (javascript) & boostrap (styles). We do NOT automatically load any of the bootstrap javascript since the intent is to only load it when needed and then specifically by the module needed (NOT the entire bootstrap.js rolled up one package). In practice we load the needed javascript within the view or the smarty plugin

    A recent fix in the pre-release (develop branch) v2.2.4 actually fixes the loading chain to load bootstrap and jquery addons styles very early to ensure that any theme styles actually override (cascade) over the system/base styles. It's unclear if we'll try to release a v2.2.3patch4 since the plan is to release v2.2.4 (which may become v2.3.0) at the end of Jan 2014.

    Having said that, we load bootstrap-dropdown.js & bootstrap-collapse.js in the bootstrap navbar view/plugin. I'd suggest you load the OTHER/NEEDED bootstrap javascript and NOT bootstrap.js in the footer and SKIP those two.
  • The css loading fix is included in the just released v2.2.4patch4. This may help with some of the styling issues, but NOT the javascript issue you described.
Sign In or Register to comment.