Search code examples
javascripttwitter-bootstrapbootstrap-notify

Align a bootstrap-growl alert bottom left


According to the bootstrap-growl options documentation we can use placement options to stick the growl notifications elsewhere. I'm trying to put my growl notifications bottom left, but it's not working.

Here's what I'm trying to do:

$(document).ready(function () {
    $.growl({
        message: 'Test.'
    }, {
        placement: {
            from: "bottom",
            align: "left"
        },
        delay: 1000000
    });
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.6/bootstrap-growl.min.js"></script>

The options are being parsed it seems: the delay option is honored. So are others if I add them. However, the placement remains at its default top/right position.

I'm using bootstrap-growl version 1.0.6. Version 2 seems to be in the making but not released yet. Perhaps part of my problem is that the bootstrap-growl website's documentation is aimed at V2?

What am I missing here? Probably something obvious...


Solution

  • Use position instead, like this:

    $(document).ready(function () {
        $.growl({
            message: 'Test.'
        }, {
            position: {
                from: "bottom",
                align: "left"
            },
            delay: 1000000
        });
    });
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.6/bootstrap-growl.min.js"></script>

    If you check the 1.0.6 release's options documentation on GitHub you'll see that the relevant option is not (yet) called "placement" but (still) called "position". Some other options seem to be different too.