Twitter Bootstrap Question posted in

Why Bootstrap style not working in AngularJS template?-Twitter bootstrap

I’m trying to make a collapsible directive in AngularJS. And I have a problem with styles. Twitter Bootstrap style not working when I use it in AngularJS directive.

So here is my directive code:

app.directive("collapsible", function () {
    return {
        restrict: "E",
        transclude: true,
        scope: {
            title: '@'
        },
        template: '<div class="panel panel-default">' +
                        '<div class="panel-heading">' +
                            '<h3 class="panel-title" ng-click="triggerCollapsible()">{{title}}</h3>' +
                        '</div>' +
                        '<div class="panel-body" ng-show="isVisible" ng-transclude></div>' +
                    '</div>',
        link: function (scope) {
            scope.isVisible = true;

            scope.triggerCollapsible = function () {
                scope.isVisible = !scope.isVisible;
            }
        }
    }
});

And this is Index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>

<div ng-app="angularBlackbox">
    <div style="margin: 15px">
        <form>
            <div class="form-group">
                <label>Title</label>
                <input type="text" class="form-control" ng-model="model.title">
            </div>
            <div class="form-group">
                <label>Content</label>
                <input type="text" class="form-control" ng-model="model.content">
            </div>
        </form>

        <collapsible title="{{model.title}}">
            <strong>Content:</strong> {{model.content}}
        </collapsible>

    </div>
</div>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Here is the result:
enter image description here

h3 with class panel-title not working. What’s wrong?

bootstrap-theme.min.css

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

bootstrap.min.css

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
Tags:

3

Answers


  1. 0

    Bootstrap does not add a bold style to the title of their panel by default, you have to add that in your own CSS.

    You can add the following class to your own CSS file :

    .panel-title {
    font-weight: bold;
}

    Or add style directly to your directive template :

    <h3 class="panel-title"
    style="font-weight: bold;"
    ng-click="triggerCollapsible()">
    {{title}}
</h3>

    You can take a look at the following codepen to see the results.

    Login or Signup to reply.
  2. 0

    The problem is because the panel-title class is having a property which is colliding with the property set in h3 for bootstrap.

    bootstrap.min.css

    .panel-title {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 16px;
}
h3, .h3 {
    font-size: 24px;
}

    So my solution is to add an inline style ( can be a new class also ) to set the font-size to 24px. Demo below!

    JSFiddle Demo

    Login or Signup to reply.
  3. 0

    In my case, I only updated the styles

            "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],

    in

            "test": {

    and not in

            "build": {

    So, update it at both places.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search