How to adjust toaster popup width

Tags: html,css,angularjs,css3,toastr

Problem :

I'm using AngularJS-Toaster to popup notifications in my app. For the frontend I'm using bootstrap.

Using the class 'container' I have a grid of 1200px. Inside I have a div with the popup notifications.

I would like to adjust the width of the popup notification to the same width that the container where this toaster is included in. I saw that toaster has a parameter 'position-class' to change the position and even the width of the popup, like for example 'toast-top-full-width', but using that I get a full screen notification, it is not adjusting to the container where it is included. I guess this is something that could be done using Css, but how? Could you please help me?

Here my html code:

<body data-ng-controller="AppController">

    <div id="container" class="container">

   <toaster-container toaster-options="{'position-class': 'toast-container','time-out': 3000, 'close-button':true}"></toaster-container>

        <div id="header" data-ng-include="'partials/header/header.html'" ></div>

        <div data-ng-view></div>
        <div id="footer" data-ng-include="'partials/footer/footer.html'"></div>

        <div id="loader" class="loading overlay" data-ng-if="loader.loading">
            <p>We are loading the products. Please wait...</p>
            <img alt="" src="images/ajax-loader.gif">


    <div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>

Thank you very much in advance.

Solution :

You can change class for your toaster to toast-top-full-width

 <toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class':'toast-top-full-width'}"></toaster-container>

OR you can create custom css rule and apply it to your toaster ie.

  <toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class':'my-toast-class'}"></toaster-container>

Check example :-

    CSS Howto..

    How Do I Add CSS Transition Effect to This

    Why does my progress bar shows full progress value before it start loading

    How can I create a line after my text to the width of the container?

    How to resize animated gif with HTML/CSS?

    How to stop divs moving under each other when zooming out

    How do I make a container div only overflow horizontally without using “display:inline-block” for its inner divs?

    How to align body of the webpage to center?

    background image shows up on right-click show image, but not on webpage

    How can I attach a method to an object to change CSS

    How to set parent div height to self adapt to the inner div height?

    How to shade every other table row that spans across multiple rows?

    How to enable auto indentation in lists and list items?

    How to make footer not overlap and positioned properly?

    How to override\edit Zurb Foundation base CSS styles?

    How to give css class to the OK button of dialog in JQuery?

    How to slide a div with p tag to right with css animation usin max-width?

    How to apply a defined class to a new class in my css?

    How to replicate this CSS sibling selector in jQuery?

    How to have complex shadow background on variable height content area via CSS?

    How to change an image on click using CSS alone?

    How do I fit custom size icons into jQuery UI buttons?

    How to get a tag the focus

    How to prevent default Css scroll onclick and allow javascript event only?

    How to style (increase the height) of select box in CSS?

    How do I create a clickable button or link inside an tag and still be right-clickable?

    HTML to PDF (by javascript) how can I add css or table?

    How can change the style of
      tag in CSS

    How To Apply jQuery CSS Selector

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    How to draw realistic smooth slit shadow with Pure CSS3?