I'm using angular material for designing my project. Now I want an input for searching in my toolbar, just like youtube.
My code:
<md-list flex-offset="10">
<md-list-item layout-align="start center">
<md-input-container md-no-float flex>
<input type="text" placeholder="Search" flex>
</md-input-container>
<md-button> test </md-button>
</md-list-item>
</md-list>
The toolbar tags before my md-list looks like this:
<md-toolbar layout="row" flex style="max-height: 60px;">
<div class="md-toolbar-tools">
What I've tried:
Wrapping it inside a normal div and setting layout-align to start, center.
Using a form tag to wrap the input container.
Problem:
The input group won't center vertically, and this is what I'm after. Every other directive I've tried centers perfectly like the md-button.
Is this a bug or am I doing something wrong?
Edit (Added picture comparing, md-input-container, input, md-button):
Did You try
md-input-container .md-errors-spacer{
min-height: 0px !important;
}
md-input-container has this rule from the specs {margin: 18px 0;} to account for validations, you can override it by making a custom clear-margin class {margin: 0 !important}.
Related
I am trying to add a button to a mat-list-item. This is my current HTML template code:
<mat-selection-list
[multiple]="false"
[class.selected]="currentItem"
formControlName="itemListControl"
>
<mat-list-option
*ngFor="let item of items"
[value]="item.id"
>
<div style="display: flex; justify-content: space-between; align-items: center">
<div style="display: flex; align-items: center">
{{ item.name }}
</div>
<button mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</div>
</mat-list-option>
</mat-selection-list>
When I inspect the site in my browser, I can see that there is a 16px padding which moves the button to the left inside the list item:
I already tried removing it by adding this to my scss file for the component:
.mat-list-item {
padding-right: 0 !important;
}
For some reason, this does not have any effect. It seems like this is not even applied at all to the element. What am I doing wrong and how can I get rid of this padding (without causing any potentially bad side effects)?
Please use like below. It would work.
.mat-list-text {
padding-right: 0 !important;
}
Thanks!
Use the whole selector(instead of just .mat-list-text, copy all the selector part of the css highlighted in the image above) to remove the the padding, angular material is very hard to modify. Dont forget to add the !important aswell. I had to do this previously. I hope it will work for you aswell.
The goal
I'm trying to write my own search bar for mat-table. The search bar consists only of inputs - one for each column. I placed it right above the table and now I'm trying to distribute them equally with the help of flex-layout, like the table does with its columns.
The problem
But the problem is that those inputs don't listen to me and don't shrink but they overflow outside the wrapping element. I need them to shrink equally to fit in the wrapping section but I don't know how to do this.
The code
Here is the sample of the code I wrote so far:
<section fxLayout="row" class="search-table" style="overflow-x: auto;">
<mat-form-field *ngFor="let item of items" fxFlex>
<input matInput type="text" placeholder="sample text" fxFlex>
</mat-form-field>
</section>
.search-table {
border: 1px solid black;
}
EDIT
Here's stackblitz example of my problem. Flex-layout don't work there for some reason so I added flex to css.
The problem comes from the .mat-form-field-infix class which sets a width of 180px on the input.
Solution: Add the class below to the styles.css file
.mat-form-field-infix {
width: auto!important;
}
StackBlitz: here
I was wondering if I could add some left margin inside textarea, I want there to be some space because I am using an image icon as my button and thats inside the textarea, when I type the words eventually cover the image.
<div id="inputBox">
<textarea class="txtarea" rows="50" name="Text" Id="Text"> </textarea>
<button mat-button id="send">
<mat-icon>send</mat-icon>
</button>
</div>
always search google first
Web development resource
.txtarea{
margin-left: 20px;
}
I have a plugin (intro-js) for creating an introductory tour containing a opaque overlay with spotlights on my page divs.
Using the following css rules I try to bring up the element within class introjs-showElement above all other elements.
How can it show the element in css like my desktop browsers? Currently I only see a white box in my css.
.introjs-showElement,
tr.introjs-showElement>td,
tr.introjs-showElement>th {
z-index: 99999998 !important;
}
.introjs-showElement>* {
-webkit-transform: translateZ(1px) !important;
}
HTML Sample of Div Text and Toggle Buttons not showing up (all exist in a fixed header scrollable angular angular datatable plugin)
<td class="td-nopadding ng-enter-fast ng-leave">
<div class="Table-textbox introjs-showElement introjs-relativePosition" ng-attr-id="{{$index==0 ? 'intro-1': ''}}" id="intro-1">
<div class="text-input">
<input class="form-control input-number ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-maxlength" name="ParLevel[0]" ng-model="data.ParLevel" value="1" min="0" max="9999" ng-keypress="filterValue($event)" maxlength="4" ng-blur="changeData();">
</div>
<div class="inc-dec-buttons">
<button type="button" class="btn-number" data-type="plus" data-field="ParLevel[0]">
<span class="glyphicon-plus"></span>
</button>
<br>
<button type="button" class="btn-number" data-type="minus" data-field="ParLevel[0]">
<span class="glyphicon-minus"></span>
</button>
</div>
</div>
</td>
This is a known issue with the library:
https://github.com/usablica/intro.js/issues/532
https://github.com/usablica/intro.js/issues/507
https://github.com/usablica/intro.js/issues/401
https://github.com/usablica/intro.js/issues/123
...to name a few.
The issue is the stacking context and the way that introJs makes elements appear on top:
The library requires all parent nodes of the target element to be in the same stacking context of the body (for example). position: fixed creates a new stacking context (as does transform).
So this issue won't be fixed until introJs adjusts its methodology of making target elements appear on top.
I want to vertically center a "list" of <span> elements horizontally in an Ionic ion-scroll, and have tried just about every "centering" style I can find, but just cannot get it to center...
<body ng-app='app' ng-controller='Index as vm'>
<ion-content scroll=false>
<div style="padding: 0px;height=80px;width:30%;align=center" >
<ion-scroll class="center" scrollbar-x=false direction="x"
style="text-align:center;background-color:pink;height: 80px;width:99%;white-space: nowrap">
<span class='center' style="text-align:center;margin:5px;background-color:red;align=center" ng-repeat='d in vm.data'>{{d}}</span>
</ion-scroll>
</div>
</ion-content>
</body>
Here is the Plunk for the above.
I have colored the <span> elements red, and the container pink so we can see where the <span>are relative to the container.
Anyone have any suggestions here?
Thanks in advance for any help.
Read this article:
https://css-tricks.com/centering-in-the-unknown/
It will explain to you how to do it.
It use after, before to achieve it along with height:100% for the ghost element.
The demo for this is found here:
http://codepen.io/chriscoyier/pen/gsodI
You can try to this
display table-cell and table
as like this
Define your div display table and define your ion-scroll display tablep-cell
<div style="padding: 0px;height:80px;width:30%;align:center; background:green;display:table" >
<ion-scroll class="center" scrollbar-x=false direction="x"
style="text-align:center;background-color:pink;display:table-cell; vertical-align:middle;height: 80px;width:99%;white-space: nowrap">
<span class='center' style="text-align:center;margin:5px;background-color:red;align=center" ng-repeat='d in vm.data'>{{d}}</span>
</ion-scroll>
</div>