Login Screen- Not full size page

ionic-v1
1

I want to show in a panel or div in the middle of the screen as in the picture below. The display for the side or straight does not matter I want you all kinds seem that way. How can I do it.
image

2

According to your current description, it is just a pure CSS problem, can you clarify some more?

3 
<ion-header-bar class="bar-assertive" style="background-color:#1582dc;border-color:#1582dc">
    <!--style="background-color:#1582dc;border-color:#C82521"-->
    <h1 class="title">{{ 'PAGE_LOGIN_TITLE' | translate }}</h1>
    <!--<div class="buttons">
        <button class="button button-clear" ng-click="closeLogin()">Close</button>
    </div>-->
</ion-header-bar>
<ion-content style="background-color:#1582dc">
    <form ng-submit="doLogin()" ;>
        <div class="list" id="login" style=" background-color:#fff; padding:5% 15% 15% 15%">
            <label class="item item-input item-floating-label">
                <span class="input-label">{{ 'LABEL_USERNAME' | translate }}</span>
                <input type="text" placeholder="{{ 'LABEL_USERNAME' | translate }}" ng-model="loginData.username">
            </label>
            <label class="item item-input item-floating-label">
                <span class="input-label">{{ 'LABEL_PASSWORD' | translate }}</span>
                <input type="password" placeholder="{{ 'LABEL_PASSWORD' | translate }}" ng-model="loginData.password">
            </label>
            <label class="item">
                <button class="button button-block button-positive" type="button" ng-click="doLogin()">{{ 'BUTTON_LOGIN' | translate }}</button>
            </label>
            <label class="item">
                <button class="button button-block button-positive" type="button" ng-click="openRegister()">{{'BUTTON_REGISTER' | translate}} </button>
            </label>
            <div class="row">
                <div class="col text-center">
                    <h4> {{ 'LABEL_LOGIN_WITH' | translate }}</h4>
                </div>
            </div>
            <div class="button-bar" title="Login with">
                <a class="button button-icon icon ion-social-facebook"></a>
                <a class="button button-icon icon ion-social-googleplus"></a>
            </div>
        </div>
    </form>
</ion-content>

Ok this my code. I want to change bacground color. But not all areas. I do not want to be like in the picture. Outside of the blue, the inside white

image
Capture.PNG368×641 11.4 KB

4

OMG, you don’t use separate css files and classes to define styles?

  1. The style you declare directly in your html will take the highest priority and overrides all other outer-source css files. Please only use it when you know what you are doing~

  2. Style definition won’t always inherit and make effect, in your case the background color-definition won’t affect the background-color for the input box. If we do it now in your way, put some more detailed styles directly to your input tags.

5

I am already experiencing this problem I did not know exactly what I’m doing. To do something like this, how should I design the screen. I really need help in this regard.