Centered login form with Ionic Framework

Designing a login form with Ionic Framework is very easy. I wrote this post for two reasons:

  • First, I find vertically and horizontally centered login forms in mobile applications beautiful, especially with a nice background image or pattern.
  • Secondly, I wanted a responsive login form that looks great on tablets. Many people use Ionic Framework to develop smartphone-only applications, but it is possible to make them look good on tablets with the Ionic responsive grid.

This isn’t a step-by-step tutorial, as there are just a few lines of code to write to achieve the expected login form design.

The centered login form screenshot

Here is what it looks like. The screenshot was taken from Chrome’s mobile emulator and the mockup was made with Magic Mockups:

Centered login screen on tablet

The HTML

The SCSS

Here, we use the table-cell dispay with vertical-align to center the login form.

10 thoughts on “Centered login form with Ionic Framework”

    1. Hello Mahesh,

      Can you find a way to show me your code (pastebin, gist) ? Did you enable the SASS support ?

      I created a blank app and copied the html and css, and it looks good for me in phone or tablet emulation.
      As the “img/logo.png” image was missing, I used the included “img/ionic.png” image instead, and reduce the size in the scss to 50% instead of 80%.

      1. Hi guys, I am really sorry to answer you this late, I have to deal with personal stuff these last days (including new job, new home, …). I have searched everywhere on my computers and I cannot find the original image.
        I just remember that it was just some random wallpaper on Google, photoshoped with a Gaussian blur.

  1. code is working fine but on focusing keyboard hiding the input field that time con’t able to scrolling getting problem please help me

  2. i am having a trouble in establishing connection between nodejs RESTAPI with ionics so can you help me in solving it

Leave a Reply