I have an Angular Material (5.2.2) button which displays an SVG icon. When I mouse over the button, the name of the SVG Icon is displayed like a tooltip. Can I disable this at all please?
<button mat-mini-fab
color="accent"
*ngIf="toggleR1 == 1"
(click)="onClickR1Toggle($event)"
style="position: absolute;"
[style.left.px]="mapOffsetX + (1378.80 * mapScale) - 20"
[style.top.px]="mapOffsetY + (257 *mapScale) - 20">
<mat-icon svgIcon="points-l-up" role="img" aria-hidden="true"></mat-icon>
</button>
I thought that if I set the aria-hidden property to true this would do it, but evidently not.
Thanks
Related
I am trying to make cards on the screen and I want to add a title and icon for that card that title and icon I want to align vertically center of the card. I am trying everything but still is not working
This is my main component
<v-container fluid>
<v-layout row wrap align-center justify-center fill-height>
<v-flex xs12 sm6 md4 lg4>
<v-hover v-slot="{ hover }">
<v-card
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover }"
class="primary ma-4 white--text"
height="300"
>
<FirstTile></FirstTile>
</v-card>
</v-hover>
</v-flex>
</v-layout>
<v-container>
This is my FirstTile tag code
<v-flex xs12>
<v-layout align-center justify-center fill-height>
<v-card-title primary-title id="heading">
Profit/Loss
</v-card-title>
</v-layout>
<v-layout align-center justify-center fill-height>
<v-card-action>
<v-icon
x-large
color="white"
> swap_vert
</v-icon>
</v-card-action>
</v-layout>
</v-flex>
Your FirstTile html could be something like this. align-center will fill the space vertically.
<v-container bg fill-height grid-list-md text-xs-center>
<v-layout row wrap align-center>
<v-flex>
<v-card-text >Profit/loss </v-card-text>
<v-icon
x-large
color="white"
> swap_vert
</v-icon>
</v-flex>
</v-layout>
</v-container>
I have a footer toolbar on my ionic2 app that has a center-aligned text, but the text only seems to take the center 50% or so of the width of the toolbar and then cuts off with an ellipses (see image). The width seems to correspond to the same width of the text allowed for the header toolbar (which I've grayed out in the image). Is there a way to override this and make the text take up the full space? So far I've only noticed this issue on an iPhone 6, although I haven't tried that many devices.
<ion-content class="no-scroll">
<ion-tabs [selectedIndex]="mySelectedIndex">
tabs omitted..
</ion-tabs>
</ion-content>
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center>
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>
You can apply below SCSS change only for iOS platform.
.scss
.ios,
{
your-page {
.padding-0 {
padding-left: 0;
padding-right: 0;
}
}
}
.html
<ion-footer>
<ion-toolbar color="{{threatLevelColor}}">
<ion-title *ngIf="threatLevel" text-center class="padding-0">
Security Threat Level: {{threatLevel.level}}
</ion-title>
</ion-toolbar>
</ion-footer>
I have the following .html markup
.html
<paper-button
raised
active
toggles
on-tap = "toggler"
class = "bold">Patient *
<iron-icon
icon = ""
id = "fe-icon"></iron-icon>
</paper-button>
</div>
How can I make the * in Patient * red without the entire label being red, and also make the asterisk larger?
Just wrap it with a <span> like >Patient <span class="asterisk">*</span></iron-icon> then you can style it individually.
I am using materials Md-button's in a md-side-nav and this button is offset when it it 4 characters long. I inspected the css of these two button and the only thing that is different is the origin transform
Codepen: click toggle right nav to see the effect.
http://codepen.io/anon/pen/oXpdae
<md-button ng-click="close()" class="md-primary">
123456
</md-button><br>
<md-button ng-click="close()" class="md-primary">
123456789
</md-button>
Solution was to add this to the menu, as when wrapping the button with an the text is centered
a {
text-align: left;
}
I have a jquery-ui button and I know how to change the styling between states with css, but I would like to know how to change the label text too. For example, an ON/OFF button like below -- when [checked="checked"] then the label text would = "ON" (and OFF when not checked).
<input type="checkbox" id="device_4_state" name="device_4_state" class="toggle-button on-off" checked="checked" />
<label for="device_4_state">ON</label>
Any help would be tremendous. Thanks.
here is the solution :
$('#device_4_state').change(function(){
if ($("#device_4_state").is(':checked'))
{
$("label[for='device_4_state']").text("ON");
}
else
{
$("label[for='device_4_state']").text("OFF");
}
});
If you wish to use pure CSS to set the label text, you can use CSS pseudo elements to automatically generate the content of the label based on the state of the jquery-ui button. To use this approach, leave the label empty (<label for="device_4_state"></label>) and include CSS like this:
.on-off + label > span:before {
content: "OFF";
}
.on-off + label.ui-state-active > span:before {
content: "ON";
}
As in this jsfiddle: http://jsfiddle.net/GjPXZ/1/