I'm new to UI development and don't have deep knowledge of css. I've been googling examples to style a login page using Angular Material. I'm trying to get the form fields to expand the width of the card (minus the padding), but not having any luck.
Can someone tell me what my form fields should look like? Also, I see that a lot of the styles have "example-" in their name. Are these to be defined in my css?
Here's my stylesheet:
.example-icon {
padding: 0 14px;
}
.example-spacer {
flex: 1 1 auto;
}
.example-card {
max-width: 400px;
width: 75%;
margin: 10px auto;
}
.example-header-image {
background-image: image("./assets/logo.png");
background-size: cover;
}
.main-div {
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
And the html page:
<div class="main-div">
<mat-card class="example-card">
<mat-card-header>
<!--<div mat-card-avatar class="example-header-image"></div>-->
<img mat-card-avatar src="./assets/logo.png">
<mat-card-title>Login</mat-card-title>
</mat-card-header>
<mat-card-content>
<form class="example-form">
<table class="example-full-width" cellspacing="0">
<tr>
<td>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" [(ngModel)]="username" name="username" required>
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field class="example-full-width">
<input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
</mat-form-field>
</td>
</tr>
</table>
</form>
<mat-spinner [style.display]="showSpinner ? 'block' : 'none'"></mat-spinner>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button (click)="login()" color="primary">Login</button>
</mat-card-actions>
</mat-card>
</div>
You need to create style class in your .css file, which is used in template.
.example-full-width {
width: 100%;
}
You dont need do use prefix example for your style classes, but dont forget to rename them both in template(.html file) and .css file.
Related
I am unable to display angular material button properly and also I need to display the angular tab in different way. I am explaining my code below.
routes.component.html::
<div class="content-wrapper">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col panel--raised card-top bg-white">
<div class="mdl-grid bottom-r-padding-0">
<div class="mdl-cell mdl-cell mdl-cell--6-col mdl-layout-spacer">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<mat-tab-group>
<mat-tab label="Manage"> Manage</mat-tab>
<mat-tab label="Create">
<form class="example-form">
<table class="example-full-width" cellspacing="0">
<tr>
<mat-form-field appearance="legacy">
<mat-label>Dist</mat-label>
<input matInput placeholder="e.x-Londrina">
</mat-form-field>
</tr>
<tr>
<mat-form-field appearance="standard">
<mat-label>Route</mat-label>
<input matInput placeholder="e.g.: CTA-LDA">
</mat-form-field>
</tr>
<tr>
<button mat-button color="success">Success</button>
</tr>
</table>
</form>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
routes.component.css::
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}
td {
padding-right: 8px;
}
/* Success syling */
.mat-button.mat-success,
.mat-stroked-button.mat-success {
color: #155724;
}
The above code gives the following output.
Here the success button is not coming properly with angular material button. Actually I need the output like below.
Here the above picture is my required output. The page should come like above. Also I need only underline should come under the tab name. Please help me to resolve this issue.
Try this,
For button,
<button mat-raised-button color="primary">Primary</button>
For place holder,
<mat-form-field appearance="fill" floatLabel="always">
<mat-label>Both a label and a placeholder</mat-label>
<input matInput placeholder="Simple placeholder">
</mat-form-field>
Use the below css to change the Mat Tab color,
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}
::ng-deep .mat-tab-list .mat-tab-labels {
color:blue;
background-color: rgb(255, 255, 255);
}
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 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>
In the following snippet I want <span>1</span> to have the same width, as <input type="text" size="1" value="1" />
Same for second span and second input. And so on.
<!DOCTYPE HTML>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<input type="text" size="1" value="1" />
<input type="text" size="1" value="2" />
<input type="text" size="1" value="3" />
</div>
</body>
</html>
How can I accomplish this with css?
UPD: Sorry, I did not make it clear, that it must be 2 rows. Row of spans and row of inputs
I assume that you want to retain the span elements inline behavior, but inline1 elements don't take width, so assign display: inline-block; to your span elements
div span {
display: inline-block;
width: 25px;
text-align: center;
border: 1px solid #f00;
}
div input[type=text] {
width: 25px;
}
Demo
1. Inline Elements
Note: As you might be aware, inline-block retains white space between the elements, to get rid of that, either call font-size: 0; on the parent element, or consider floating your elements to the left, and you don't have to use size attribute anymore, consider assigning width to the elements using CSS instead.
Also make sure you normalize your CSS for cross browser consistency.
Remove the size of one on the inputs and add a class.
(Just in case you dont know, 1 em = the current font-size)
<!DOCTYPE HTML>
<style>
.one {
width: 1em;
}
.two {
width: 1em;
}
.three {
width: 1em;
}
</style>
<body>
<div>
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
</div>
<div>
<input type="text" class="one" value="1" />
<input type="text" class="two" value="2" />
<input type="text" class="three" value="3" />
</div>
</body>
</html>
JsFiddled here :
span, input {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:222px;
height: 33px;
padding:0;
margin:0;
display:block;
float:left
}
BUT, by forcing the input in a border-box layout, you will have to deal with some other situations....
Somehow, i feel ashamed trying to help you without seeing first what you have tried.
Well if you want to remain your span's, you could use something like this:
#wrapper
{
height: auto;
width: 500px;
}
span, input
{
width: 30%;
display: inline-block;
}
jsFiddle
However, your layout is so close to a table layout. So why not use the <table> element:
<table>
<tr>
<td>
<label>1</label>
</td>
<td>
<label>2</label>
</td>
<td>
<label>3</label>
</td>
</tr>
<tr>
<td>
<input type="text" size="1" value="1" />
</td>
<td>
<input type="text" size="1" value="2" />
</td>
<td>
<input type="text" size="1" value="3" />
</td>
</tr>
</table>
jsFiddle
I am pulling some content from a webservice that creates select lists with a label as a form of title. Rules are that the select lists must line up and stack on top of each other, and take up the rest of the screen real estate that the label does not take up.
I can do this by creating them with tables, but am looking for a more pure CSS route if possible.
tried using a combination of divs with display: table, display: table-row, display: table-cell but I couldn't get the stacking effect to work properly.
this is the effect I am looking for:
.horizontalFill {
width: 100%;
}
.noWrap {
white-space: nowrap;
}
<table class="horizontalFill">
<tr>
<td class="noWrap">
<label>some dynamic text</label>
</td>
<td class="horizontalFill">
<select class="horizontalFill">
</select>
</td>
</tr>
<tr>
<td class="noWrap">
<label>
other dynamic text here
</label>
</td>
<td class="horizontalFill">
<select class="horizontalFill"></select>
</td>
</tr>
</table>
You can try something similar to this:
label {
display: block;
overflow: hidden;
padding-bottom: 5px;
}
label .label {
display: block;
float: left;
width: 150px;
}
label .input {
display: block;
margin-left: 160px;
}
label select {
width: 100%;
}
<label class="row">
<span class="label">Label name one</span>
<span class="input">
<select>
<option>Select item</option>
</select>
</span>
</label>
<label class="row">
<span class="label">Label name two</span>
<span class="input">
<select>
<option>Select item</option>
</select>
</span>
</label>
<label class="row">
<span class="label">Label name three</span>
<span class="input">
<select>
<option>Select item</option>
</select>
</span>
</label>
It involves the label column being set to a static width, though, so it may not work out for you if you need that column to stretch or shrink. The label text will wrap to the next line without any issue, though.