I followed this example here to create vertical button with no scroll

CSS

  .scroll-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

HTML

  <ion-content has-header="true" padding="true">
    <div class="row row-center">
      <div class="col col-center">
        You need to login
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button class="button button-block button-positive">
          Go to Login
        </button>
      </div>
    </div>
  </ion-content>

However, the css seems to break the button-block as it's not fully extended width button any more. Can someone point me out why is it and how to fix?

Thanks

UPDATE 1

This would make it not so vertical center:

.scroll-content {
  display: table !important;
  width: 100% !important;
  height: 100% !important;
}
.scroll {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

I followed this example here to create vertical button with no scroll

http://codepen.io/mhartington/pen/gcHeL

CSS

  .scroll-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

HTML

  <ion-content has-header="true" padding="true">
    <div class="row row-center">
      <div class="col col-center">
        You need to login
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button class="button button-block button-positive">
          Go to Login
        </button>
      </div>
    </div>
  </ion-content>

However, the css seems to break the button-block as it's not fully extended width button any more. Can someone point me out why is it and how to fix?

Thanks

UPDATE 1

This would make it not so vertical center:

.scroll-content {
  display: table !important;
  width: 100% !important;
  height: 100% !important;
}
.scroll {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

• javascript
• html
• css
• ionic-framework

Share Improve this question Follow edited Jun 21, 2014 at 7:27 HP. asked Jun 17, 2014 at 4:53 HP.HP. 19.9k5656 gold badges159159 silver badges258258 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

i know this topic is old... but for future when people researching this(like i was) this did the trick for me: if you are trying to do this in only one page add this to the page

<style>
.scroll-content{
  display: table !important;
  width: 100% !important;
  height: 100% !important;
}
.scroll {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>

@HP

<div class="row row-center">
      <div class="col col-center">

i guess your problem is this divs above they are changing the div position, like you center then and then this col-center center it again, in math you got in 50% of the page, than of the left 50% you get down more 50%( 75% in total), and the others, change then all for

<div class="list">

  <label class="item item-input">
    <span class="input-label">Username</span>
    <input type="text">
  </label>
</div>

You can simplify your css using display:table and setting a height/width on the parent element.

.scroll-content {
  display: table !important;
  width: 100% !important;
  height: 100% !important;
}
.scroll {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Demo