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:
The HTML
The SCSS
Here, we use the table-cell dispay with vertical-align to center the login form.
Hi i copied the code and past it nut its not working …….
any reply
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%.
You may also like this http://www.codingscripts.com/ionic-login-page-design-cool-image-effects/
Would you please also share your login_bg.jpg ?
+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.
Thank you very much!
code is working fine but on focusing keyboard hiding the input field that time con’t able to scrolling getting problem please help me
i am having a trouble in establishing connection between nodejs RESTAPI with ionics so can you help me in solving it