2

I have created a lightning component to house a very standard Bootstrap Navbar. We are also using the Koa template. I have tested the navbar and everyhting looks great in the dev console preview and even in Community Builder. But when I publish the site with the new Nav Bar component it loses all of its styling. Anyone have any ideas why this would happen? I am using the correct lightning require tags, like I said everything looks great until publication.

  • how are you including bootstrap css and js files, can you post your component code – Rao Oct 27 '15 at 17:50
5

Take a look at loading external js and CSS in lightning:

https://developer.salesforce.com/blogs/developer-relations/2015/05/loading-external-js-css-libraries-lightning-components.html

Updated component code:

   <aura:component implements="forceCommunity:availableForAllPageTypes">
<ltng:require styles="/resource/bootstrapcss" scripts="/resource/bootstrapjqueryjs,/resource/BootStrap"/>    
<div class="prao">
    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>

    </div> <!-- /container -->
</div>
</aura:component>

The styling in community is still a little off, the app.css is changing font style and bold attributes. I have no issues getting the file, one thing I found was the tool does not take the min version, I provided https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css and was able to generate the CSS, when i provided the min version I get the application error too

Step 1 : I took the bootstrap css provided it to the namespace generator tool

https://bootstrap-namespacer.herokuapp.com/

Step 2: loaded the resulting css back into static resource.

Step 3: Wrapped my container div with another div where class="mycustomnamespace i provided for my css"

Bootstrap preview: https://getbootstrap.com/examples/navbar/ enter image description here My community preview:

enter image description here

  • Thanks for the answer! I have a follow up question to this. Did you have issues with the Bootstrap CSS bleeding into the rest of the community? I have read some forums talking about prefixing the stock CSS with a wrapped div class but I have had little luck trying this. Any ideas how to get around it? I can see from your screen shot that the navbar component moved your banner image to the left. – Allen Mann Oct 28 '15 at 21:05
  • @AllenMann The app.css ( standard lightning css) is messing up the bootstrap css, I would love to know how to supress than making going and marking all the tags as important in the bootstrap css file, It would be extremely helpful if you ask a seperate question on how to suppress/ override the app.css file when using custom components with communities – Rao Oct 28 '15 at 22:57
  • The link in your answer clears this up. At the bottom in the section for CSS name spacing. – Allen Mann Oct 29 '15 at 11:13
  • @AllenMann I should give you back the 15 points :). Thanks for pointing me out to the namespace, communities and component both looks same and styling looks good. For a while the styling was off on the community page, later i realized the css was being cached. When i opened the page in a private window the styling came out as expected – Rao Oct 29 '15 at 16:04
  • You were able to single out all the CSS for the navbar and prefix the namespace???? I have been struggling really hard to get it to work right. – Allen Mann Oct 29 '15 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.