I am trying to make a button in jQuery Mobile that has svg as background image, and can't get it right. I don't want icon button, I want button that has image as background. Here is m< code
<div class="ui-block-a">
<a data-role="button" class="red-button" href="login.html">LOGIN</a>
</div>
.red-button {
background-image: url(../img/buttons/button-red.svg) !important;
}
Can anyone please tell me what is wrong here. Thanks.
Related
I have implemented ngx-chips for an email CC field. It works perfectly in my Android phone using Chrome. But, in iPhone, the autosuggestion does not show up.
<div class="required form-group col-md-12 col-sm-12 col-xs-12" >
<label class="control-label" for="email.emailCc">CC:</label>
<tag-input [(ngModel)]="emailList" [onlyFromAutocomplete]="true" theme='bootstrap'>
<tag-input-dropdown [autocompleteObservable]="items" [showDropdownIfEmpty]="true" [dynamicUpdate]="false">
</tag-input-dropdown>
</tag-input>
</div>
In Iphone
In Android
Please help.
Added following line in global.scss for IOS to show dropdown content,
div.ng2-dropdown-menu.ng2-dropdown-menu---width--4.ng2-dropdown-menu--open {
display: block !important; // to display the drop down content
max-height: 40vh !important; // for scrolling of suggestion list
}
But still it is not good as it is on android. Scrolling the screen scrolls the list with it.
We were facing the same issue. The problem is not data showing up, rather the placement of the dropdown due to the Zoom of textbox in IPhone. With css hacks we were able to place the drop down in proper position.
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'm using jquery mobile to create a little mobile website.
I have a popup with a link, but this link works only if the popup is not taller than the phone screen. But it works on a computer...
The cross to close the popup is illuminated when I click on my link.
<div id="trouverUnMatch" data-role="page">
<div id="notification" data-role="popup" data-overlay-theme="b">
STUFF HERE
More
</div>
</div>
<div id="allNotifications" data-role="page">
</div>
Edit: It's not a problem with the bottom link, when I click on everywhere inside the popup it go to the popup top and illuminate the close button.
For example if you go to http://demos.jquerymobile.com/1.4.5/popup/ and click on a picture (Photo lightbox), you resize your browser to get only the half of it (in height), then if you click on the picture the close button will be illuminated.
I have replace the link by :
<span class="link" data-link="allNotifications">More</span>
$(document).ready(function() {
$(".link").on('tap', function () {
$.mobile.changePage( "#" + $(this).attr("data-link") );
});
});
It works with iOS but chrome on desktop has the problem now...
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!!
I am using the fastklick plugin for iOS what is very popular on the net for speeding the click event on jquery mobile apps with phonegap on iOS.
The buttons and links are working very well except the back button from jquery.
If I use this:
<div data-role="page" id="test" data-add-back-btn="true">
then if I want to click on the button, there is already the delay from iOS. The button is getting blue at first and after that the page is sliding. How can I prevent this so this button is working fast like the other buttons I am creating with
<button>...</button>?
Is it possible to create my own back button and apply an event to it?
First remove data-add-back-btn="true" then you can try this:
<a class="ui-btn-left" data-icon="arrow-l" href="javascript:history.back(1) " data-theme="a">Back</a>
or this:
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
Just change #pageID to your real page ID. touchstart event is great for back button if you are just doing it and not a page scrolling.