CODEWITHSUNDEEP
htmlcssangularjsmaterial-designangular-material
Austin
Austin

Reputation: 3080

Center Center align in Internet Explorer is offset

I am new to Angular Material Design and having some trouble getting a loading bar div to be centered horizontally and vertically within Internet Explorer (works fine in Chrome/FF).

I have already perused through the known flexbox issues and cannot seem to pinpoint this one's fix.

JSFiddle: https://jsfiddle.net/aanders50/suunyz3e/223/

HTML

<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view">

  <md-content class="loader" layout="row" layout-align="center center" flex>
    <div id="title" flex>
      <span>Loading...</span>
    </div>
    <div class="progress" flex>
      <div flex class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      </div>
    </div>
  </md-content>

</main>

CSS

#view {
  height: 100%;
  width: 100%;
}

.progress {
  max-width: 260px;
}

#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: black;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 10px;
  margin-top: -72px;
  padding-left: 10px;
}

Image

enter image description here

My goal is to do most, if not all, of my layout using just material design elements - so I would be interested in advice if I am using it wrongly.

Upvotes: 0

Views: 729

Answers (1)

pavelccz
pavelccz

Reputation: 86

IE has probles with centering the element if parent is layout="row".

EDIT_01: It has problems if there is only one element centered vertically or something like that, I had the same issues with that.

If you want both "title" and "progress" to be centered like in jsfiddle, you should use layout="column" for "loader" and no absolute positioning for "title":

HTML

<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view">

  <md-content class="loader" layout="column" layout-align="center center" flex>
    <div id="title">
      <span>Loading...</span>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      </div>
    </div>
  </md-content>

</main>

CSS

#view {
  height: 100%;
  width: 100%;
}

.progress {
  width: 100%;          -- to stretch it to 260px max
  max-width: 260px;
}

#title {
  color: black;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 10px;
  padding-left: 10px;
}

EDIT_02: Also there were many redundant flex attributes.

EDIT_03: Using layout-fillargument will save some work, you don't need to flex to many elements and use to manny layout settings: https://jsfiddle.net/suunyz3e/224/

Upvotes: 1

Related Questions