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>
Related
I'm building a nativescript angular app with a tabstrip and one of the pages has a search bar and results shown in a ListView. The results returned can vary in length, so thus the height of each item can be different. Everything displays fine when the search results come back, however if I go to another 'page' via the tab strip and return, iOS redraws all the listview items as the same height, causing some results to be cut off, and others to have a ton of white space.
If I start scrolling up and down in the listview and different items become visible, they start fixing themselves, thus causing the results to jerk down/up as heights change. This is not an issue on Android. What am I doing wrong?
<GridLayout rows="auto *" class="p-20">
<GridLayout row="0" rows="*">
<StackLayout row="0" class="input-field">
<SearchBar #searchField hint="Search ..." class="input" (submit)="startSearch($event)" (clear)="startSearch($event)"></SearchBar>
</StackLayout>
</GridLayout>
<GridLayout row="1">
<ActivityIndicator [busy]="isSearchingKJ"></ActivityIndicator>
<ListView *ngIf="kjResults?.length > 0" [items]="kjResults" (itemTap)="select($event)">
<ng-template let-item="item" let-i="index">
<StackLayout>
<Label class="search" [text]="item.book + ' ' + item.chapter + ':' + item.verse"></Label>
<Label class="search-results" textWrap="true" (loaded)="displaySearchResult($event, item)"></Label>
</StackLayout>
</ng-template>
</ListView>
</GridLayout>
</GridLayout>
Here is the code generating the formatted text for each item:
displaySearchResult(args, result) {
const container = <Label>args.object;
const formattedStringLabel = new FormattedString();
for (const fragment of result.text) {
const span = new Span();
span.text = fragment.text;
if (fragment.highlight) {
span.fontWeight = '800';
}
formattedStringLabel.spans.push(span);
}
container.formattedText = formattedStringLabel;
}
Example of iOS graphical glitches:
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
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 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'm trying to get an element to move from right to left in XUL. I am doing this with a toolbar and want one toolbarbutton w/ a label to remain anchored to the right, while one of them moves from right to left, starting to the left of the anchor.
I'm trying to achieve this effect by modifying marginLeft, but my element stays still. I'm not really sure why it does not move.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE overlay >
<overlay id="my-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript">
// Install load handler
var marginLeft = 0;
window.addEventListener("load", function(e) {
function moveIt() {
document.getElementById("moveit").style.marginLeft = marginLeft + "px";
marginLeft -= 30;
}
setInterval(moveIt, 1000);
}, false);
</script>
<vbox id="browser-bottombox">
<toolbar id="theToolbar">
<!-- holds the scrolling items and the refresh time -->
<hbox id="scrollingItemContainer" flex="1" align="end">
<!-- container for our scrolling items -->
<spacer flex="1"/>
<hbox id="movingItems" align="end">
<toolbarbutton id="moveit" label="moving"/>
</hbox>
<hbox>
<toolbarbutton id="rightAnchor" label="right"/>
</hbox>
</hbox>
</toolbar>
</vbox>
</overlay>
Any help you can provide will be helpful. I've tried this on FF4, but I think the problem exists on FF3 as well.
I should note that if I add a spacer with flex=1 after scrollingItemContainer then I see the item move, but it is not anchored to the right.