0

I would like to do a responsive design for the popup notifications in my application.I'm using Angular Toaster for the notifications.

For instance I have located the toaster-container element in the center of the screen, but using an absolute position,so for smaller screens the notifications stay in the same position so they are not displayed. I would like to make the notifications relative to the parent element where they are contained, (in this case the container grid). How do I achieve that using CSS? This is my html code:

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


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

   <toaster-container toaster-options="{'position-class': 'toast-container-custo','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>

    <!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
        <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>   

    </div>

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

And the custom css rule I use for the toaster-container element:

.toast-container-custo
 {
position: absolute;
top:100px;
left: 780px;
}
daniula
  • 6,898
  • 4
  • 32
  • 49
fgonzalez
  • 3,787
  • 7
  • 45
  • 79

2 Answers2

1
  • Use percentages instead of pixels

You can make your div relate to it's container using percentages both for width/height and top/left values. The percentage you use here will be in relation to the parent container size. So if your parent container is set to width:300px and your child is set at width:50% then the child will be rendered at width:150px;

  • Use relative positioning for the element.

Relative positioning, is just what it says on the label - it positions the element relative to other elements. So you also need to set the element to position:relative;

Here is how I would go about this:

.toast-container-custo{
  position: relative;
  margin: 0 auto;
  width: 30%;
  height:30px;
}
  • margin:0 auto will center the child elements within it's container, horizontally
  • the width now is 30% of the parent container
  • the height, well, I just prefer to set this at a fixed px value but you can definetely use % here as well
nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
0

You can change your container to:

.toast-container-custo{
    position: absolute;
    top: 100px;
    margin-left: auto;
    float: none;
    margin-right: auto;
    left: 0;
    right: 0;
}

Generally, this is a good way to center horizontally absolute elements.

vaskort
  • 2,591
  • 2
  • 20
  • 29