Vertically Centered Form

1

I was wondering if there is any way that I can design a login screen that looks like this. The entire form is vertically aligned and all input fields and buttons are rounded. Is there anyway I can achieve apps that look like this without screwing up ionic CSS components?

Login

2

style it with own css?
or use ionic components but extend some the selectors with an own class, so you only change the layout of thes form and not all… thats what css-selectors are made for ^^.

1 Like
3

As mentioned by @bengtler, everything can be overridden with CSS. You could also wrap the field with a class so that you target the components in that class so that it won’t affect other parts of your app.

<form class="loginForm">
   <input type="text" />
   <input type="password" />
</form>

And then in your CSS…

.loginForm input[type=text], .loginForm input[type=password] {
   /* styles here */
}
4

Yeah, I understand that much. But …

  1. Should I not use <label class="item item-input">
  2. How do vertically center the entire form? You completely missed that.
5

The intent of my answer was not to teach you how to vertically align things using CSS, but to answer your question on how to customize your CSS without “without screwing up ionic CSS components”.

I’ll give you the benefit of the doubt here and show you one of many ways to accomplish vertical centering.

http://play.ionic.io/app/6f5cda89e7fd

Here, I’ve given the ion-content a class of loginForm and the inside div a class of loginForm-wrapper. I’ve also given my inputs a class of item-input-rounded.

In the CSS, I am using absolute positioning and a negative top margin to position the .loginForm-wrapper in the center and giving the inputs rounded corners using border-radius.