zero_coding zero_coding - 26 days ago 9
Dart Question

how to move button to left

I am using angular2dart components and do not know, how to move the button on left side.
enter image description here

here is html:

<div class="forms">
<form (ngSubmit)="onSubmit()" #loginCtrl="ngForm">
<div>
<material-input type="text"
class="login"
required
floatingLabel
label="User"
[(ngModel)]="login.user"
ngControl="user"
#user="ngForm" ></material-input>
</div>
<div>
<material-input
class="login"
type="password"
floatingLabel label="Password"
[(ngModel)]="login.password">
</material-input>
</div>
<div>
<material-input
class="login"
type="text"
floatingLabel
label="Language"
[(ngModel)]="login.language">

</material-input>
</div>
<div>
<material-button raised class="btn-blue">Login</material-button>
</div>

</form>
</div>


here is the css:

.container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}

.container .row {
width: auto;
height: auto;
background: #fff;
border-radius: 2px;
display: inline-block;
margin: 1rem;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
padding: 20px;
}

.container .row .image {
width: auto;
height: auto;
padding: 10px;
background-color: #2D3E50;
}

.container .row .forms {
width: auto;
height: auto;
margin: auto;
}

.container .row .forms .input {
width: 256px;
}

.btn-blue {
background-color: #2196F3;
color: white;
font-weight: bold;
font-size: 1.2em;
width: 280px;
margin-left: -20px;
}

material-input.login {
width: 280px;
}

Answer

Add css to login button

{
width:auto;
float:left;
}

and class row to div which wrapped on login button.