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.
Related
I have created a component and added an ion fab inside it. When I open the component as a modal the ion fab is not shown. When I click once in the place it is supposed to be it shows but when I close the modal and open it again I can not see it.
I thought it was because I had a custom css class but even without it I still can not see the ion fab until i click on the place it is supposed to be.
The problem is only on iOS, on Android it works as expected.
Here is my code:
Opening modal function:
async addCollection(item) {
item.isAdded = !item.isAdded;
let modal = await this.modalCtrl.create(
{
component: AddCollectionComponent,
cssClass: 'add-collection-custom-modal-css',
backdropDismiss: true
}
);
await modal.present();
let data = await modal.onDidDismiss();
}
css class:
.add-collection-custom-modal-css .modal-wrapper {
height: 70vh;
bottom: 0;
position: absolute;
display: block;
width: 100%;
border-radius: 12px;
}
AddCollection component
<ion-content>
<ion-row>
<ion-searchbar placeholder="Search collections"></ion-searchbar>
</ion-row>
<ion-row style="margin: 15px;">
<ion-col class="add-collection-header">
RECENT
</ion-col>
<ion-col>
</ion-col>
</ion-row>
<ion-list *ngIf="mockRecentData" class="gray-bottom-line" lines="none" style="padding-bottom: 20px;">
<ion-item *ngFor="let recent of mockRecentData">
<ion-avatar item-start class="avatar-small">
<img src="assets/noavatar.png">
</ion-avatar>
<h2 class="avatar-text">{{recent}}</h2>
</ion-item>
</ion-list>
<ion-row style="margin: 15px;">
<ion-col class="add-collection-header">
YOUR BOARDS
</ion-col>
<ion-col>
</ion-col>
</ion-row>
<ion-list *ngIf="mockYourBoards" lines="none">
<ion-item *ngFor="let recent of mockYourBoards">
<ion-avatar item-start class="avatar-small">
<img src="assets/noavatar.png">
</ion-avatar>
<h2 class="avatar-text">{{recent}}</h2>
</ion-item>
</ion-list>
</ion-content>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button (click)="save()" size="small" color="white">
<fa-icon style="color: violet" [icon]="['fas', 'plus']"></fa-icon>
</ion-fab-button>
</ion-fab>
There are two things to consider here -
1.
As per Ionic's documentation, the Modal is a dialog that appears on top of the app's content. This means Modals will always appear at the topmost stack of your app. This is why, if you have a Tabbed app and open a Modal, all tabs will be hidden underneath the Modal page.
2.
As with Fab button, here Ionic says, "FABs generally float over the content in a fixed position. This is not achieved exclusively by using an FAB. They need to be wrapped with a component in order to be fixed over the content."
Therefore, you may try by NOT WRAPPING your <ion-fab-button> with ion-fab. You may place the <ion-fab-button> at a fixed place on the modal through Modal Component's SCSS file.
As a workaround, invoke hardware acceleration on fixed fabs inside modals by setting
ion-fab {
transform: translateZ(0);
}
reference: CSS performance relative to translateZ(0)
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 have got a jQueryMobile page that adds some white space after the content. How do I remove it? I know I have not got a footer in the page, is that the reason? Any advice much appreciated.
<div data-role="page" id="home">
<div data-role="header">
<h1></h1>
</div>
<div data-role="content">
<div class="message"></div>
<a data-role="none" href="" id="btn_loginEmail" class="button"></a>
<a data-role="none" href="" id="btn_loginFacebook" class="button"></a>
</div>
</div>
What do you mean white space??
I've tried your page and it works just fine
Check out this fiddle
You mean the space between header bar and first element inside content (in above case the button)?
Then you can do style as below
.ui-content{
margin-top: -23px;
}
Check out this fiddle
if u are using jqm 1.2.0. In min.css, change min-height to 400px in ui-page{min-height:420px}. Hope it works for you!!
jQuery mobile, while amazing in many ways, tends to be frustrating at times. In this instance i am trying to dynamically create one of the very nice buttons that the library has.
Basically what i want to do is enter text into an input field and when spacebar is pressed it creates a jQuery mobile button with the text.
My js works beautifully when im using just jquery to make the buttons etc but when i use jqm the but initialises to class=ui-btn-hidden for some reason.
Anyone with experience on jqm please help
Here is an example:
http://jsfiddle.net/WEyyh/3/
JS
$('#createButton').bind('click', function() {
$('#buttonPlaceHolder').append(''+$('#buttonText').val()+'');
// refresh jQM controls
$('#home').trigger('create');
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<input type="text" id="buttonText" placeholder="Enter Button Name"/>
<input type="button" id="createButton" value="Create Button" />
<div id="buttonPlaceHolder"> </div>
</div>
</div>