angular css not loading correctly

Question

I have an ons-page loading with an image as a background. At the first startup of the app an ons-dialog pops up and asks user for some information. When it pops up, it seems the page behind it's background css, doesn't load properly every time.

Sometimes the background image (visible since the ons-dialog isn't full screen) loads correctly. Other times it loads the image at full size and doesn't re-size it according to my css.

My css for the ons-page (behind the popup):

.details-content{
    background-image: url('images/bg_beer.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

Code for showing my dialog:

ons.ready(function() { $scope.show('welcomePopup.html'); });

Any help as to why my css isn't always done loading when ons.ready() is being fired, a fix, or a workaround would be very much appreciated.

EDIT 1:

angular controller:

app.controller('homeCon', function($http, $scope, $compile, $sce, $window, filterFilter, $timeout){

            document.addEventListener("show", function(event){
                                      if (event.target.id == "myMainPage") {

                                      $scope.show('welcomePopup.html');
                                      }
                                      },false);
...
...
};

HTML for my opening page:

.details-content{
    background-image: url('images/bg_beer.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover; }
     </style>

<ons-page class="transparent" ng-controller="homeCon" id="myMainPage"> <ons-toolbar modifier="transparent">
    <div class="right">
      <ons-toolbar-button><ons-icon icon="ion-ios-location" style="color: white; font-size: 28px;"></ons-icon></ons-toolbar-button>
    </div>
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="fa-bars" style="color: white; font-size: 28px;" fixed-width="false"></ons-icon></ons-toolbar-button>
    </div>   </ons-toolbar> <div> <div class="details-content glass">
      <div class="welcome" style="top:30%">
      <img src="images/bm_logo.png" width="66%">
      </br>
      <div ng-view>
          <ons-button modifier="quiet" style="color:white" ng-click="openFB()"><i class="fa fa-facebook-square fa-3x"></i></ons-button>
          <ons-button modifier="quiet" style="color:white" ng-click="openInsta()"><i class="fa fa-instagram fa-3x"></i></ons-button>
          <ons-button modifier="quiet" style="color:white" ng-click="openTwitter()"><i class="fa fa-twitter-square fa-3x"></i></ons-button>
      </div>
    </div>   </div> <div>

</ons-page>

Munsterlander · Answer 1 · 2016-02-25T02:49:54.453

0

I am uncertain as to why the CSS is failing to be consistent. It could be how the sprite is being rendered or a timing issue for attaching to the DOM and drawing the sprites. Try this and see what happens, I am curious (JS not Angular - sorry):

document.addEventListener("init", function(event){
    if (event.target.id == "myMainPage") { 
        $scope.show('welcomePopup.html');
      } 
},false);

Basically, this won't fire until the page is loaded and attached, so hopefully the CSS is final, then the popup goes.

edited Feb 25 '16 at 02:49

answered Feb 24 '16 at 15:59

Munsterlander

1,356
1
16
29

event "show" is not being fired. I put that code in various spots with no luck :/ – slowsword Feb 24 '16 at 16:13
It just needs to be at the top of your script. Does your main `` have an id? Can you post a bit more of your code? – Munsterlander Feb 24 '16 at 16:27
Sure thing, I added it to the question. – slowsword Feb 24 '16 at 16:41
Paging @fran-dios because my Angular is non-existent. I would put the event listener outside the controller and see what happens. – Munsterlander Feb 24 '16 at 16:50
Also, check out the reference docs here: https://onsen.io/guide/overview.html#Pagelifecycle – Munsterlander Feb 24 '16 at 16:51
Yea i put it in above the HTML, outside the controller. and nothing...... used different events, and nothing.... – slowsword Feb 24 '16 at 17:28
actually it seems "show" is the issue. a "init" works as it should – slowsword Feb 24 '16 at 17:34

angular css not loading correctly

1 Answers1