How do we create a "search input" or "add button" as the last tab of an Angular Material tabs component?
I did not see indication from documentation that this can be done. Can someone confirm if this is possible? Workarounds would be appreciated too.
The screenshot shows an example of what I would like: the "search input" as the last tab item:
The screenshot was taken from a random (i.e. any) YouTube channel.
Thanks!
While I do not think that having a input box inside the mat-tab is possible without editing the component, you can have an input box for the search after the mat-tab-group, and bring it into the same row as the mat-tab-group, e.g. by using flex in your CSS.
Example:
HTML:
<div class="container">
<mat-tab-group class="tabs">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
<mat-form-field class="input">
<input matInput placeholder="Search" >
</mat-form-field>
</div>
CSS:
.container {
display: flex;
}
.input {
margin-top: 0.5%;
}
will produce this:
example image
Example on Stackblitz
May need some tinkering for display on mobile devices.
I am working on Ionic 3.X version and On my Home Page I have one search bar.
Issue : While click on SearchBar its opening Keyboard from bottom and my searchBar and whole screen goes UP side and user unable to view or scroll after click on searchBar
issue in OS : iOS
Same code works in Android
Screen Shots:
HTML Code for Search Bar :
<ion-content padding class="home-content-background-color">
<div *ngIf="headerTextShowFlag">
<div text-center>
<img [src]="appLogo" width="100" height="100">
</div>
<ion-label style="text-align: center" class="text-color">Welcome</ion-label>
<hr class="hr-style">
<ion-label text-wrap padding style="text-align: center" class="text-color">
Please Enter Service Request Number</ion-label>
</div>
<div>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list style="height: 58%; overflow-y: scroll; margin: 0px">
<ion-item *ngFor="let Case of CaseArrayFiltered" (click)="selectCaseFromList(Case)">
{{ Case }}
</ion-item>
</ion-list>
</div>
</ion-content>
Unable to show search bar on top its always moving out of screen at first load while click on search bar at first time.
Disable scroll solve my problem but after adding below line my keyboard show/hide not working properly.
this.keyboard.disableScroll(true);
After lots of R&D on above issue I found solution with some code patch in my .ts file
Need to disable keyboard scroll so that my screen will not go up automatically while keyboard will show.
platform.ready().then(() => {
this.keyboard.disableScroll(true);
});
Also need to update my flag in this.zone()
this.zone.run(() => {
self.toggleHeader = false;
});
Above line of code will execute on main thread and will update flag & UI so based on this my issue was resolved and hope this will helps others who also facing same issue specially in iOS platform.
Thanks.
I am using Angular with Material
<button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>
I am trying to add an icon to button, but I can't figure out how to do it, and can't find documentation for this.
https://material.angular.io/components/button/api
looking the docs, there is this:
that button has the following html:
<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
<img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
<span _ngcontent-c1="">Material</span>
</span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>
is that the right way to do it?
Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose:
<button mat-button>
<mat-icon>mic</mat-icon>
Start Recording
</button>
OR
<button mat-raised-button color="accent">
<mat-icon>mic</mat-icon>
Start Recording
</button>
Here is a link to stackblitz demo.
All you need to do is add the mat-icon-button directive to the button element in your template. Within the button element specify your desired icon with a mat-icon component.
You'll need to import MatButtonModule and MatIconModule in your app module file.
From the Angular Material buttons example page, hit the view code button and you'll see several examples which use the material icons font, eg.
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
In your case, use
<mat-icon>thumb_up</mat-icon>
As per the getting started guide at https://material.angular.io/guide/getting-started, you'll need to load the material icon font in your index.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Or import it in your global styles.scss.
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
As it mentions, any icon font can be used with the mat-icon component.
My preference is to utilize the inline attribute. This will cause the icon to correctly scale with the size of the button.
<button mat-button>
<mat-icon inline=true>local_movies</mat-icon>
Movies
</button>
<!-- Link button -->
<a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>
I add this to my styles.css to:
solve the vertical alignment problem of the icon inside the button
material icon fonts are always a little too small compared to button text
button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
vertical-align: top;
font-size: 1.25em;
}
Add to app.module.ts
import {MatIconModule} from '#angular/material/icon';
& link in your global index.html.
the above CSS can be written in SASS as follows (and it actually includes all button types, instead of just button.mat-button)
button,
a {
&.mat-button,
&.mat-raised-button,
&.mat-flat-button,
&.mat-stroked-button {
.mat-icon {
vertical-align: top;
font-size: 1.25em;
}
}
}
The Material icons use the Material icon font, and the font needs to be included with the page.
Here's the CDN from Google Web Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
I am trying to get an anchor in jquery to line up horizontally right next to a checkbox in a list structure. I previously had the checkbox inside of the anchor object, and this produced the result I wanted but now I want the checkbox to have a separate functionality then the anchor element, thus I wish to separate them. The CSS I am using is as follows, and as you can see from Jsfidle, it looks horrible with the checkbox floating to the top right spot of the button. Answers on here have noted that using field contain or display:inline would fix the problem but I have been unable to get it to work.
<div data-role="main" class="ui-content">
<h3>Some header</h3>
<ul data-role="listview" id = "tasklistTasks">
<li>
<div data-role="fieldcontain" style=" display:inline" >
<input type="checkbox">
Go here
</div>
</li>
<li>
<div data-role="fieldcontain" style=" display:inline" >
<input type="checkbox">
Go here
</div>
</li>
</ul>
</div>
I am using Jquery 2.1 and Jquery mobile 1.4.2. Thanks for any help
The reason for this behavior is that the checkbox is getting the CSS from the jquery mobile CSS you have applied. Inside that particular CSS, your checkbox class' CSS is getting overridden and it has :
margin: -11px 0 0 0;
due to which it is coming to the top left corner of your parent div.
If you are not using CDN of that CSS and you have that downloaded version, you can modify this with :
.ui-checkbox input, .ui-radio input {
position: absolute;
left: .466em;
width: 22px;
height: 22px;
margin: 12px 0 0 0;
outline: 0!important;
z-index: 1;
display: inline-block;
}
You can also see yourself by debugging it in your browser.
Here is how it looks now and i guess this is what you wanted:
http://jsfiddle.net/appleBud/bWFYv/2/
Hope this helps.
I'm working with JQuery Mobile and mmenu.js JQuery plugin. And I'm trying to set my header fixed. I've tried in two different ways:
1) With the JQuery Mobile option:
<div data-role="header" data-theme="a" data-position="fixed">
2) With CSS:
<div data-role="header" data-theme="a" style="position: fixed; width: 100%;">
In both cases, I can open my menu correctly, with the header animation. But when I close it, close without the animation, the header just appear.
Thanks for the help!