I'm creating an application in angular 6 (I plan to migrate it to ng7) and in one of component need to add 2 elements, ng material's textarea and my custom component. Each should take 50% of available height. I have a problem with textarea as generated mat-form-field-wrapper takes only as much space as it needs and I can't achieve my goal in that element (I don't want to use any ::ng-deep solutions as it isn't recommended)
Here's what I've done so far (a sample of course):
<form [formGroup]="myGroup" fxLayout="column" fxLayoutAlign="center stretch" fxFlex="1 1 100%">
<mat-form-field fxFlex="1 1 100%" fxLayout="column" fxLayoutAlign="start stretch">
<textarea matInput formControlName="myControl" fxFlex="1 1 100%"></textarea>
</mat-form-field>
</form>
<my-custom-component *ngIf="somevariable" [variable]="somevariable"></my-custom-component>
You will need to override style in your global style sheet as an alternative to using deep. I'm not confident you can make this work perfectly under all conditions because of the way elements of the form field are laid out and variable paddings etc, but here's a starting point:
<form [formGroup]="myGroup" style="display: flex; flex-direction: column; height: 50%;">
<mat-form-field class="stretch-height">
<textarea matInput formControlName="myControl"></textarea>
</mat-form-field>
</form>
<my-custom-component style="height: 50%" *ngIf="somevariable" [variable]="somevariable"></my-custom-component>
Global CSS:
.mat-form-field.stretch-height,
.mat-form-field.stretch-height .mat-form-field-flex,
.mat-form-field.stretch-height textarea {
height: 100%;
}
.mat-form-field.stretch-height .mat-form-field-wrapper {
height: calc(100% - 1.34375em);
}
.mat-form-field.stretch-height .mat-form-field-infix {
height: calc(100% - 1.34375em - 2px);
}
It is vital that the parent container is 100% height or however you wish.
Here's a demo on StackBlitz.
Related
I have a modal
<div class="modal fade editModal in" data-backdrop="static" style="display: block; padding-left: 15px;">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-2 col-md-offset-5 col-md-2 text-center">
<img width="80" src="/assets/be/img/baby/solidfood.png"><br><br><br>
<input type="time" value="14:25" name="updatedAt" width="100%" height="80">
<br><br>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<br><br>
</div>
<br>
<button onclick="updateLog('7873')" class="btn btn-option btn-success btn-block">Done</button>
<br>
<button onclick="deleteLog('7873', 'solidfood')" class="btn btn-option btn-danger btn-block">Delete</button>
</div>
</div>
</div>
CSS
.btn-option {
width: 100%;
height: 80px;
}
I have no idea why the buttons is not extended to the end!
It stopped at 95%.
How do I debug this and make it take a full width ?
The cause
The problem was caused by the margin-right: 10px;.
.btn, .btn:hover {
color: white;
margin-right: 10px;
}
A solution
So, what should you do? Setting margin-right: 0px; would produce the result you can see below. This is not what you want because there's no space in-between these two elements.
You need to set margin-right: 0px; only to the right (i.e., last) element. You can do this by adding this:
.btn:last-child, .btn:last-child:hover {
margin-right: 0px;
}
This will produce the result you can see below.
Try removing those two <br> tags inside the <div>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<!-- Try removing these -->
<br><br>
</div>
I don't think you'll need them inside a flexbox anyways.
Or maybe it's the padding-left:14px on the parent div that's causing this.Try changing that too and this should fix it.
I opened your code provided and unchecked "margin-right:10px;" and it removed the margin on the right side of the button so that the buttons take up the full width of the row (parent element) and both buttons are taking half of the row. See image: CSS code highlighted in yellow and Fixed App
There are multiple ways to skin this cat.
The bootstrap way:
This solution uses the built-in bootstrap grid system to accomplish the result you're looking for.
Remove the inline styling from your container div and replace it with bootstrap's row class. Then wrap each contained button inside divs with the class col-lg-6.
<div class="row">
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
</div>
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
</div>
Result:
It looks clean require no additional css or overrides. However you are stuck with the bootstrap default column gap between buttons which may not be desirable.
Incidentally, if at all possible, I highly recommend upgrading to bootstrap 4 instead of 3, as it's much more flexible to tweaking this kind of thing without having to resort to writing more css.
Custom CSS way:
If you want more control over the gap between the buttons, bootstrap may not be your best bet.
This is similar to the solution above from Cervus Camelopardalis and uses the :first-child and :last-child pseudo-classes.
Remove the inline style from the container element and instead give it a descriptive class name. I chose "double-btn" but use whatever makes the most sense to you.
HTML:
<div class="double-btn">
<button onclick="updateLog('7997', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7997', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
In your CSS, add a rule for this class to set display: flex.
Then add another rule targeting any .btn's that are children of this class, removing the default bootstrap margin.
Then add one last set of rules targeting the :first-child and :last-child pseudo-classes of those .btns, setting the margin-right and margin-left to half of your desired gap, respectively. I chose a ten pixel gap here, but with this approach you can change it whatever looks best to you.
CSS:
.double-btn {
display: flex;
}
.double-btn .btn {
margin: 0;
}
.double-btn .btn:first-child {
margin-right: 5px;
}
.double-btn .btn:last-child {
margin-left: 5px;
}
Result:
From here, you can adjust the above margin-right and margin-left values to change the size of the gap between buttons.
It looks like you have margin-right on those two buttons, because your buttons have width of 100% and there is space between them and at the end of that div.
Try adding margin: 0; on .btn-option.
If this doesn't do the trick try setting white-space: normal; on parent div.
select in an mat-expansion-panel. I am trying to get both of my ng-selects side by side, but even when I change the width. I can't seem to get them side by side. I went to some of documention and in one of the demos. They seem to use two ng-selects side by side. However, I think they are using boostrap to get that done. Does ngselect use boostrap as default or how can I get this down in material?
This is an example of what I am trying to achieve.
https://ng-select.github.io/ng-select#/forms
I tried changing the width this way:
.ng-select.AdditionalRecipientFormcustom ::ng-deep .ng-select-container {
width:30%;
}
<mat-expansion-panel [(expanded)]="xpandStatus" #formDirectiveTwo="ngForm" [formGroup]="AdditionalRecipientForm">
<mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight" >
<mat-panel-title>
Add Recipients To The Report
</mat-panel-title>
</mat-expansion-panel-header>
<button mat-raised-button (click)="externalLogin()" color="primary" >Create Recipient</button>
<br>
<ng-select class="AdditionalRecipientFormcustom"
[items]="recipients"
[hideSelected]="true"
#select
loadingText="Loading..."
[selectOnTab] = "true"
dropdownPosition="auto"
bindLabel="Email"
placeholder="Select Recipient"
formControlName="UserRecipientsDto">
<ng-template ng-option-tmp let-item="item" let-search="searchTerm">
<div><span [ngOptionHighlight]="search">Email: {{item.Email}} </span><span>, </span><span [ngOptionHighlight]="search">Name: {{item.FirstAndLast }}</span></div>
</ng-template>
</ng-select>
<mat-form-field class="add-addtional-recipients-form-field">
<mat-label>Contact Name</mat-label>
<input matInput placeholder="User Email Address" formControlName="FirstAndLast">
</mat-form-field>
<ng-select class="AdditionalRecipientFormcustom"
[items]="recipientTypes"
[hideSelected]="true"
#select
loadingText="Loading..."
[selectOnTab] = "true"
dropdownPosition="auto"
bindLabel="typerecipient"
placeholder="Select Type Of Recipient"
formControlName="TaskRecipientTypeDto">
<ng-template ng-option-tmp let-item="item" let-search="searchTerm">
<div><span [ngOptionHighlight]="search">{{item.typerecipient}}</span></div>
</ng-template>
</ng-select>
<br>
<button mat-raised-button class="btnUpdate" (click)="resetFieldsForAdditionalForm()" [disabled]="!AdditionalRecipientForm.valid" color="primary"><b>Reset</b></button>
<button mat-raised-button class="btnReset" (click)="createNewRecipientUser(); this.getLogins(); " color="primary"><b>Update</b></button>
<br>
</mat-expansion-panel>
The problem is not specific to ng-select or material. I think you are not fully understanding the display property in css. The ng-select components end up on different lines because of the default display: block; styling. You can either give the ng-selects and the mat-form-field display: inline-block; or solve it with flexbox:
// apply this class to the parent element of the form controls (ng-select, ...)
.example-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
// give ng-select a fixed width, because it isn't limited by the viewport width now
ng-select {
width: 200px;
}
For more detailed information on flexbox, see this link. Also, see a stackblitz example of what I've explained so far.
I've created a form in a dialog using material forms, but I can't seem to get the inputs to be wider than 180px despite following numerous examples including https://material.angular.io/components/input/example.
I'm sure this is a pretty standard CSS thing, but I don't have that sort of brain so I cant figure out the problem.
Does anyone have a serious / non-trivial example that works??
Here's mine:
<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
<form novalidate #f="ngForm" class="form-full-width">
<mat-form-field class="input-full-width">
<input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
<mat-hint>Enter a unique name.</mat-hint>
</mat-form-field>
<mat-form-field class="input-full-width">
<textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
<mat-hint>You should describe the purpose/use of this thing.</mat-hint>
</mat-form-field>
</form>
</mat-dialog-content>
CSS :
.form-full-width {
min-width: 150px;
max-width: 500px;
width:100%;
}
.input-full-width {
width:800px;
}
.mat-form-field.mat-form-field {
width: auto;
}
Thanks.
can you try using
mat-form-field {
width: 100%;
}
I had the same issue in a mat-card, this worked for me.
Seems like it's something to do with View Encapsulation. This thread explains it: https://github.com/angular/material2/issues/4034 but changing encapsulation for the component causes all sorts of compile failures.
This article gave me the correct solution:https://material.angular.io/guide/customizing-component-styles
I'll move my style to global scope...
.formFieldWidth480 .mat-form-field-infix {
width: 480px;
}
and in the component that opens the dialog:
this.newDialog = this.dialog.open(NewDialogComponent,
{
width: '650px', height: '550px',
data : newThing,
panelClass : "formFieldWidth480"
});
I hope this saves someone else the day I lost...
Just like Jonesie said, this behavior is related to View Encapsulation. In this context .mat-form-field-infix takes 180px as default value probably beacause of this. The auto value lets the browser calculates the width instead of puting hardcoded value. The !important declarations forces the style override for this.
I am using !important since it complies with the rules for the use of this property. See docs
::ng-deep .mat-form-field-infix {
width: auto !important;
}
It's that .mat-form-field.mat-form-field in the css that's causing an issue. As soon as I removed that, I could control the widths with .input-full-width width setting. I set up a demo here: StackBlitz.com
<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
<form novalidate #f="ngForm" class="form-full-width">
<mat-form-field class="input-full-width">
<input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
<mat-hint>Enter a unique name.</mat-hint>
</mat-form-field>
<mat-form-field class="input-full-width">
<textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
<mat-hint>You should describe the purpose/use of this thing.</mat-hint>
</mat-form-field>
</form>
</mat-dialog-content>
.form-full-width {
min-width: 150px;
max-width: 500px;
width:100%;
}
.input-full-width {
width:800px;
}
/* .mat-form-field.mat-form-field {
width: auto;
} */
The solution I found was this one into general style.css
mat-form-field {
margin-left: 2.5rem;
width: calc(100% - 2.5rem);
}
::ng-deep .mat-form-field-infix {
width:800px !important;
}
This should work fine.Not sure if it can be done without custom CSS.
I have the same issue, fixed it with.
But still no idea why this issue is happening...
.mat-form-field-infix {
width: 100%;
}
I have a container with an arbitrary width and inside I use flexbox, to have:
A material2 select box, that should use up all given space automatically
Another container with a fixed width next to it, that should always be visible and have a fixed with of 140px:
<div style="display: flex; display: -webkit-flex; width: 300px;">
<div style="flex-grow: 1;">
<mat-form-field style="width:100%">
<mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div style="flex-basis: 140px; flex-grow: 0; background-color: #f00;">
</div>
</div>
Unfortunately the width:100%, covers the whole flex container and therefore hides the static one.
In my plunker you can see the red area as my static element:
https://plnkr.co/edit/E1BE26Zd8L5D3yc6SPPw?p=preview
The red area should be always 140px wide, but in the example it can only take up 100px, because the mat-form-field already needs 200px (this is the default value). However, if I change the 200px width to 100% like in my example, the container covers everything.
How can I archive a 140px wide static element with a flexible select drop down next to it?
Try adding flex-basis: 0 to the styles of the div containing the mat-form-field. This will work with your width: 100% modification.
Here I have a login screen consisting of a high resolution image background, and a simple login card, which I want to center in the middle of the screen.
How can I center the card vertically and horizontally in the parent, which is a simple div with a background image? Here is my HTML, for which I have not made any external CSS classes yet:
<div style="background-image: url('./res/img/bg-2.jpg'); width: 100%; height: 100%; background-size: cover;" layout-align="center center">
<md-card style="width: 30%; margin: 0;" layout-padding md-whiteframe="10">
<form name="loginForm" novalidate ng-model="loginForm">
<h2 style="margin-top: 0;">Login</h2>
<md-input-container class="md-block" flex-gt-sm>
<label>Username</label>
<input type="text" ng-model="username">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Password</label>
<input type="text" ng-model="password">
</md-input-container>
<div layout="row">
<span flex></span>
<md-button class="md-primary md-raised" ng-click="login.login(username, password)">Login</md-button>
<md-button ng-click="login.register()">Register</md-button>
</div>
</form>
</md-card>
</div>
I've already fiddled with flexboxes and layout-align. Using the layout-align attribute of the card allowed me to center it horizontally but not vertically. Another question's answer--pertaining to divs only--said to style the child with display: inline-block; and the parent with text-align: center;, but this only centered the card horizontally and aligned the textfields and text to the center of the card as well (I definitely don't want that). Any help is greatly appreciated as I am very new to CSS and web-programming.
You need both a layout and layout-align attribute on your containing div element, so:
layout="row" layout-align="center center"
See example here - http://codepen.io/parky128/pen/PGxGrX
See the examples in the docs - https://material.angularjs.org/latest/layout/alignment