I use angular 7 with angular material and i want to remove the space bottom as you can see. I tried many way but no sucess.
You can add this in your css
::ng-deep .mat-form-field-wrapper{
margin-bottom: -1.25em;
}
NOTE: As you remove the space you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly.
Error and hint get inside the form-field.
Without using ::ng-deep( for Angular 8 )
Turn off encapsulation of your component inside which you change the padding.
You can do this by
import {Component,ViewEncapsulation} from '#angular/core';
#Component({
selector: 'example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}
Wrap the component you want to style in a custom class. So it wont affect any other mat-form-field components.
Let's wrap this with with my-form-field class for now
<mat-form-field class="my-form-field">
<input matInput placeholder="Input">
</mat-form-field>
.my-form-field .mat-form-field-wrapper {
margin-bottom: -1.25em;
}
You can add these css in global stylesheet without turning off view encapsulation. But the more elegant method is the above one.
Try the following:
<mat-form-field style="margin-bottom: -1.25em">
(You can follow the discussion about this extra bottom space here: https://github.com/angular/components/issues/7975)
In angular 9, I was able to remove the gaps only by adding the following into the component.scss (the other answers didn't worked in my case):
:host ::ng-deep .mat-form-field-wrapper{
margin: 0 !important;
padding: 0;
}
Also, I'm using appearance="outline", for other appearances, it will probably be necessary to change other css classes and properties, since it may have other elements.
For anyone reading this in 2023: Angular 15 now added a new property to the form fields: subscriptSizing.
If you add subscriptSizing="dynamic" to your HTML it'll remove the space until an error or hint actually needs to get displayed and only then expands. This causes a layout shift, but depending on your use case it is probably the better option than manually adding a margin as suggested (and necessary up to version 14) before.
For reference see https://material.angular.io/components/form-field/api#SubscriptSizing
My solution was to use an additional class.
HTML:
<mat-form-field class="no-padding">
<input type="number" matInput placeholder="Speed" [ngModel]="speed"
(ngModelChange)="onSpeedChange('speed', $event)"/>
</mat-form-field>
SCSS:
.no-padding {
.mat-form-field-wrapper {
padding-bottom: 0 !important;
}
}
The !important keyword is unfortunately necessary as it will otherwise just pull in the default instead.
or simply:
html
<mat-form-field class="no-bottom">
...
</mat-form-field>
css
.no-bottom {
margin-bottom: -1.25em !important;
}
I test by Angular 10, this works:
:host ::ng-deep .mat-form-field-wrapper{
margin: 0 !important;
padding: 0;
}
Also, if you need to apply ONLY on a special field, define a class:
<mat-form-field appearance="outline" class="no-wrapper">
<input matInput>
</mat-form-field>
And put class name in your css:
:host ::ng-deep .no-wrapper .mat-form-field-wrapper{
margin: 0 !important;
padding: 0;
}
I am able to remove bottom space of mat-form-filed by using following css in style.scss
.mat-form-field-wrapper{
padding-bottom: 10px;
}
What about the following template:
<mat-form-field appearance="standard" class="compact-input">
<mat-label>Test</mat-label>
<input matInput>
</mat-form-field>
and the following SCSS:
.compact-input {
.mat-form-field-flex {
padding-top: 0;
}
.mat-form-field-wrapper {
padding-bottom: 0;
}
.mat-form-field-underline {
bottom: 0;
}
}
Only tested for standard appearance though.
Don't forget to add encapsulation: ViewEncapsulation.None to your component.
If you put the SCSS in the global styles, you might need to add some !important's.
.mat-form-field-infix{
display: block;
position: relative;
flex: auto;
padding: 0;
border-top: 0px solid transparent !important;
}
you can add important in css
You can add height:4em to mat-form-field as such:
<mat-form-field
class="height-4em"
appearance="outline"
>
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>
dont use ::ng-deep
this is simple.. add this to your css file
mat-form-field{
margin-bottom: -1.25em
}
By changing the font size with material theme you will get smaller input
$typography: mat-typography-config(
$input: mat-typography-level(14px, 1.125, 400),
);
#include mat-core($typography);
I had a similar problem w/ mat-fab button when using it together w/ mat-spinnner. Whenever the spinner would be "activated" the elements around would shift down. The problem was w/ .mat-fab .mat-button-wrapper which comes from an embedded wrapping span element of mat-spinner after rendering.
Setting,
::ng-deep .mat-fab .mat-button-wrapper {
padding: 0;
vertical-align: middle;
}
solved the problem. The vertical-align is not needed but aligns nicely the spinner w/in the mat-fab button.
I have created a select menu next to a button. I wonder how can I get the select menu be at the same Y of the button? (Ideally I would like it to be of the same height too but that is another thing I guess...)
As the shown code I have no configuration other than the select width:
HTML:
<div>
<button>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
jqueryui JS
$('button').button();
$('select').selectmenu({
width: 120 // Needed to show see options
});
Current Result:
Fiddle that show the problem: https://jsfiddle.net/9xv7jqn4/2/
Is this a bug or a setting I am missing? Any help is appreciated
EDIT:
Thank you for the answers, I am still testing them in my code... I am also interested in know why this happens? Why the selectemenu is taking more space than it looks? Is this a bug of selectmenu widget?
Maybe with this css:
display: inline-flex;
vertical-align: middle;
Your fiddle with the changes: https://jsfiddle.net/9xv7jqn4/3/
Based on thread: "jQuery ui selectmenu vertical position offset (relatively to buttons in this line) " and suggestions here too I ended up adding a couple of rules that fix my case.
I don't know why but ui-selectmenu-button is not vertical-aligned as other buttons. Also decreased the padding of inner text so it looks almost (not exactly) the same height as other buttons.
.ui-selectmenu-button {
vertical-align: middle;
}
.ui-selectmenu-button .ui-selectmenu-text {
padding-top: 0.3em; padding-bottom: 0.3em;
}
You can use
vertical-align: top;
for your button like here: https://jsfiddle.net/9xv7jqn4/4/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.one{
vertical-align: top;
}
<div>
<button class='one'>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
Another good option is to add wrappers like here: https://jsfiddle.net/9xv7jqn4/6/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.w{
display:inline-block;
vertical-align: middle;
}
<div>
<div class='w'>
<button>button</button>
</div>
<div class='w'>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
</div>
I have a standard website, and when printed (for PDF-making purposes on Safari OS X), I'd like the footer to align to the bottom of whatever printed page it is on — i.e. the last page of the document.
Like this:
Is that possible?
I have used a media query (#media print { }) for all other print stylesheet details (excluded for simplicity).
Demo code is here; for the screen page itself, here is the HTML:
<div id="footer">
<p>A bunch of example stuff inside here...</p>
</div>
Which is situated with absolute positioning:
#footer {
color: #fff;
background: #000;
width: 100%;
position: absolute;
bottom: 0px;
}
Bit of an old one but the answer is surely to use the #page:last selector, but you have to alter the CSS for the footer as well.
#footer { position: static; }
#page:last {
#bottom-center { content:element(footer) }
}
I would like to use jQuery UI tabs but I need the tabs aligned right … That's "easy" since I can modify the tabs container class and extend it.
But the thing is I want to add a "title" on the left, as shown in this screenshot:
http://cl.ly/400D0E3z0f272h1B3x3R
How can I do it in a clean way ?
(A dirty way could be to prepend/append a div to the tabs tag, adding the DOM on the fly … I'm looking a cleaner way :)
Thank you in advance
First there is nothing dirty adding elements to the dom on the fly :-)
Secondly, you could simply add an element in the markup, for instance a <h3> (let's be semantic (and assume you got other titles before)):
<div id="tabs">
<h3 class="ui-tab-title">My Title</h3>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
...
</div>
and position it with css:
/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }
/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }
/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }
Here's a jsfiddle to illustrate
Edit:
As you pointed out, floating right the <li> inverts their order.
You could invert the order of the list items in the markup itself but this will mess up the whole logic.
Here's a piece of css to right align the tab button while keeping the markup and the visual order in place:
/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }
/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }
I've changed the fiddle accordingly.
If I write html to a Jquery UI dialog box it is naturally centred. I add a DIV and use some CSS ...
#printReport {
text-align: left;
font-family: Tahoma;
font-size: 12px;
width: 880px;
}
... and then
$("#printReport").empty().append(results);
to put text on the page - and it does what I want in FF/Chrome etc (left justified) ... but in IE (V7 and V8) the text is still centred.
Am I missing something?
Thanks
I am assuming some of the parent div's are set to be centered,
eiter by using the deprecated tag or by doing something like:
margin: 0 auto
in order to make it work you should do something like this:
body {
text-align: center
}
#printReport {
width: 880px;
margin: 0 auto;
text-align: left
}
hope that helps.
As per the comment, it was a problem in the CSS and nothing to do with dialog .. sorry