I use angular 6 and angular material, but nothing works. I'd like to put my login card at middle of page
html:
<mat-card class="card" layout-align="center center">
<form (ngSubmit)="onSubmit(UserLogin)">
<div class="container">
<mat-form-field>
<input matInput placeholder="E-mail" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Senha" [type]="hide ? 'password' : 'text'" [formControl]="password">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>
<div>
<button mat-raised-button color="accent" type="submit">Entrar</button>
</div>
</div>
</form>
</mat-card>
add this in css file of component
:host{
display: flex;
min-height: 100vh;
}
mat-card{
margin: auto;
}
You could use position:absolute with left and top positioning and transform should work
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
height: 100vh;
}
form {
border: 1px solid;
display: inline-block;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<form>
<div><input type="text" placeholder="First Name" name=""></div>
<div><input type="text" placeholder="Last Name" name=""></div>
<div><input type="text" placeholder="Email" name=""></div>
</form>
Related
I'm trying to set up my form so that the text input is on one side, and two buttons take up the rest of the side, one on top and the other on the bottom.
I've tried to use br, but this has not done anything. I'm also doing this on Angular 7.0 if it matters.
HTML
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</form>
CSS
.form {
display: flex;
}
.form input[type='text'] {
flex: 10;
padding: 5px;
height: 40px;
}
.form input[type='submit'] {
flex: 2;
height: 20px;
display: block;
}
.form input[type='reset'] {
flex: 2;
height: 20px;
display: block;
}
Currently, all three are side by side, like this. I want the two buttons to be on top of each other.
If you don't want to change your markup, you can use display: grid.
form {
display: grid;
grid-template-areas: 'form topbutton' 'form bottombutton'
}
input[type="text"] {
grid-area: form;
}
input[type="submit"] {
grid-area: topbutton;
}
input[type="reset"] {
grid-area: bottombutton;
}
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</form>
A more solid solution may use flexbox:
div.row {
display: flex;
width: 100%;
/* you may add height if you need it */
/* height: 125px; */
}
div.row > * {
flex: 1 1 80%;
}
div.row > .buttons {
flex: 1 1 20%;
display: flex;
flex-direction: column;
}
div.row > .buttons > * {
flex: 1 1 auto;
}
<form class="form" (ngSubmit)="onSubmit()">
<div class="row">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<div class="buttons">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</div>
</div>
</form>
Add display: block to your input elements to have them occupy a new line.
You can also divide the elements into two columns by wrapping the desired elements in <div> classes (in this case of .left and .right), and floating them both to the left.
This can be seen in the following:
.left, .right {
width: 50%;
float: left;
}
.right input {
display: block;
}
<form class="form" (ngSubmit)="onSubmit()">
<div class="left">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
</div>
<div class="right">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</div>
</form>
I've never used Angular, but I usually use two br afterward with html and it works fine, alternatively you could use css to manually change the location of each element with style and margin (top,left,etc.). ie: like so:
br example:
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input type="submit" value="Submit" class="btn"><br><br>
<input type="reset" value="Reset" class="btn"><br><br>
</form>
css example:
<form class="form" (ngSubmit)="onSubmit()">
<input style=margin-top:90px type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input style=margin-top:100px type="submit" value="Submit" class="btn"><br><br>
<input style=margin-top:110px type="reset" value="Reset" class="btn"><br><br>
</form>
I know there are a lot answers here. I searched, tried to adapt but I failed all the time, that is why I am asking now.
I have the following problem. I want, both, labels and there inputs to be in the same line: Yes o No o (o symbolize the input).
Here my following code, remark that I changed the display property of label to inline block:
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Sorry for answering, although there are a lot of similar questions and answers but adapting them did just not work...
If you want the inputs and the label to be 'bottom-aligned', try using vertical-align: text-bottom.
input[type='radio'] {
vertical-align: text-bottom;
margin-bottom: 1px;
}
div {
display: inline-block;
border: 1px solid black;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Apply vertical-align: middle with margin-top: -1px to each input[type='radio'] :
input[type='radio'] {
margin-top: -1px;
vertical-align: middle;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Perfect center : just line added crossing text and button in this second snippet to show perfect center
input[type='radio'] {
margin-top: -1px;
vertical-align: middle;
}
.col-sm-3 {
position: relative;
border: 1px solid;
}
.col-sm-3:after {
display: block;
content: '';
position: absolute;
width: 100%;
height: 1px;
background: black;
top: 50%;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
You might want to consider wrapping your <input> in the <label> fields.
Example:
<div class="col-sm-3">
<label>Yes
<input type="radio" name="yes/no" checked>
</label>
<label>No
<input type="radio" name="yes/no" >
</label>
</div>
This implementation will increase accessibility and usability of your inputs and doesn't require any additional css.
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
I want my web page to display a check box inside the password field. User clicks on the check box and see the password as text. On un-check, its password again.
This is what I want. This is from the Ebay website login page.
This is what I am getting
I want this checkbox inside the password field. I could not find anything online on this topic.
Here is my code :
<!-- Set a password for the account -->
<div class="col-md-12" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
</div>
<input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />
Just add CSS and move your checkbox to one group div with input text.
See the example
#eye {
position:absolute;
right:50px;
top:6px;
}
Click Here
This would be the solution.
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.btn {
position: absolute;
top: 10px;
right: 10px;
}
<div class="col-md-12 text-container" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
<span id="btn" class="btn"><input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /></span>
</div>
input#eye {
position: absolute;
right: 10px;
top: 10px;
}
#reg_password.form-control.input-lg {
position: relative;
}
.parent{position:absolute;}
<!-- Set a password for the account -->
<div class="col-md-12 parent" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> <input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />
</div>
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.btn {
position: absolute;
top: 10px;
right: 10px;
transition: right 0.2s;
}
<div class="col-md-12 text-container" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
<span id="btn" class="btn"><input type="checkbox" id="password" /></span>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#password").click(function () {
if ($("#reg_password").attr("type")=="password") {
$("#reg_password").attr("type", "text");
}
else{
$("#reg_password").attr("type", "password");
}
});
});
</script>
I am implementing an inline form. Users can search for an existing customer or add a new customer.
<div id="CustomerInfo">
<div class="display-field roomy">
<div id="customerInfoContainer">
<div class="addCustomerControlsContainer">
<span class="twitter-typeahead" style="position: relative; display: inline-block;"><input type="text" class="autocompleteinput tt-query" placeholder="Type to search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: rgba(0, 0, 0, 0);"></span>
<input class="add-new-customer" title="Add New Customer" type="button" value="+">
</div>
</div>
</div>
</div>
Does anyone know why my two elements don't line up?
http://jsfiddle.net/gq2279j2/4/
Try this with your style .add-new-customer{vertical-align: top;}
Working Demo
Set the vertical alignment of the button to top:
.add-new-customer {
vertical-align:top;
}
jsFiddle example
Use this CSS:
.display-field.roomy, .editor-field.roomy {
line-height: inherit;
}
Instead of the below CSS:
.display-field.roomy, .editor-field.roomy {
line-height: 1.9;
}
And place your both button in the same span:
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="autocompleteinput tt-query"
placeholder="Type to search" autocomplete="off" spellcheck="false" dir="auto"
style="position: relative; vertical-align: top; background-color: rgba(0, 0, 0, 0);">
<input class="add-new-customer context-button noarrow" title="Add New Customer" type="button" value="+">
</span>