CODEWITHSUNDEEP
javascriptangularjscssionic-framework
Shruti
Shruti

Reputation: 1574

how to make fields centre align (on centre ) in ionic +angular

I am trying to make login screen as shown in image .I am able to set background image , input field and buttons .But I am facing few issue

here is my code http://plnkr.co/edit/MeweflpWLXZ8b4KJolu3?p=preview

<div class="bg">
      <div class="logo">
        <img src="https://dl.dropboxusercontent.com/s/r4dxqfvctvm905t/akritiv_logo.png?dl=0">
      </div>
        <div class="list">

            <div class="list list-inset">
                <label class="item item-input">
                    <i class=""><img class="username_icon" src="https://dl.dropboxusercontent.com/s/d2tug300juuvo9v/user.png?dl=0"></i>
                    <input class="user_inputfield" type="text" placeholder="Username">
                </label>
            </div>

            <div class="list list-inset">
                <label class="item item-input">
                    <i class=""><img class="password_icon" src="https://dl.dropboxusercontent.com/s/whly1alp6k2bkhe/password.png?dl=0"></i>
                    <input class="password_inputfield" type="password" placeholder="Password">
                </label>
            </div>
            <div style="text-align:center;">
 <button class="button button-calm" style="width:40%">
Login</button>
</div>
    </div>
        </div>

Upvotes: 2

Views: 2327

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Working example: http://plnkr.co/edit/omDgW8KXGoaBBsOrFpXw?p=preview

Horizontal and vertical centering done using Ionic Grid System: http://www.gajotres.net/ionic-framework-series-14-grid-system/

HTML:

<html ng-app="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic Popover</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">

  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body class="bg">

  <!-- <div class="row">

  </div>-->


  <div class="row" style="height: 33.3%;">

  </div>
  <div class="row row-center">
    <div class="col-33"></div>
    <div class="col-33 test">

      <div class="logo">
        <img src="https://dl.dropboxusercontent.com/s/r4dxqfvctvm905t/akritiv_logo.png?dl=0">
      </div>

      <div class="list">

        <div class="list list-inset">
          <label class="item item-input">
            <i class=""><img class="username_icon" src="https://dl.dropboxusercontent.com/s/d2tug300juuvo9v/user.png?dl=0"></i>
            <input class="user_inputfield" type="text" placeholder="Username">
          </label>
        </div>

        <div class="list list-inset">
          <label class="item item-input">
            <i class=""><img class="password_icon" src="https://dl.dropboxusercontent.com/s/whly1alp6k2bkhe/password.png?dl=0"></i>
            <input class="password_inputfield" type="password" placeholder="Password">
          </label>
        </div>
        <div style="text-align:center;">
          <button class="button button-calm" style="width:95%;">
            Login</button>
        </div>

      </div>

    </div>
    <div class="col-33"></div>
  </div>
  <div class="row row-bottom">

  </div>

</body>

</html>

CSS:

/* Styles go here */

.bg {
  width: 100%;
  height: 100%;
  background-image: url("https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0");
}

.username_icon {
  width: 48px;
  height: 48px;
}

.password_icon {
  width: 48px;
  height: 48px;
}

.user_inputfield,
.password_inputfield {
  padding-left: 15px!important;
}

.logo img {
  display: block;
  height: 50px;
  margin: 0 auto;
}

Upvotes: 2

Related Questions