Kendo UI & AngularJS Notification CSS works incorrectly

Question

If you look at this plunker and click on the "Show Notification" button you'll see that even though the background is black (background-color: #000000;) there's some gray color on top. What's wrong with this CSS/template?

the HTML:

<body ng-controller="MyCtrl">
    <span kendo-notification="notif" k-options="opt" style="display:none;"></span>
    <button ng-click="showNotif()">Show Notification</button>
</body>

the JS:

angular.module("KendoDemos", [ "kendo.directives" ]);

function MyCtrl($scope) {

  $scope.opt = { position: {
                 top: 30,
                 right: 30
            },
          templates: [{
            type: "growl",
            template: "<div class='growl'><h1>#= title #</h1><p>#= message #</p></div>"
            }]
        };

   $scope.showNotif = function() {
         $scope.notif.show({
            title: "This is the title",
            message: "and this is the message"
        }, "growl");
    };
}

the CSS:

.growl {
background-color: #000000;
color: #ffffff;
border: 0;
height:80px;
width:300px;
font-family: Arial;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

Nothing to do with Angular or Kendo.

change the CSS to this:

.growl {
   ...
   padding-top:10px;
}
.growl h1 {
   margin-top:0;
}

The full answer is already here : Margin on child element moves parent element

edited May 23 '17 at 12:13

Community

1
1

answered Oct 31 '14 at 14:55

Paul

48
4

Paul, your answer also works, however Jon's is simpler to implement. Thanks. – ps0604 Nov 02 '14 at 01:48

score 0 · Accepted Answer · answered Oct 31 '14 at 14:56

You can fix this by applying an overflow: hidden attribute to your .growl style:

.growl {
background-color: #000000;
color: #ffffff;
border: 0;
height:80px;
width:300px;
font-family: Arial;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
}

Kendo UI & AngularJS Notification CSS works incorrectly

2 Answers2