Is it possible that the Vuetify 3 v-navigation-drawer's "right" property is not (yet) working? The panel shows on the left side.
<v-navigation-drawer
v-model="drawer"
right
temporary
>
<v-list class="mt-2">
<v-list-item-group
v-model="group"
>
<v-list-item
to="changepassword"
>
<v-list-item-icon>
<v-icon icon="mdi-key-chain"/>
</v-list-item-icon>
<v-list-item-content>Change password</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
I found the solution, the correct setting is
location="right"
Related
I've been having issues trying to change the start point of my tabs for my app bar. I want them to start after the 3rd Column but I haven't been able to make it work.
Code is below:
<template>
<div class = "header">
<v-toolbar app prominent>
<v-layout-row>
<v-layout-column>
<v-img
max-width="100"
src="../../assets/large.png"
/>
</v-layout-column>
<v-layout-column/>
<v-layout-column justify-end>
<HeaderAccount colorTheme="#FFA200" />
</v-layout-column>
</v-layout-row>
<template v-slot:extension>
<v-tabs>
<v-row>
<v-col cols = '3'/>
<v-col cols = '6'>
<v-tab v-for="l in links" :key="l.path" :to="l.path">
{{ l.text }}
</v-tab>
</v-col>
</v-row>
</v-tabs>
</template>
</v-toolbar>
</div>
</template>
Any assistance would be greatly appreciated!
I'm not clearly understand your template in case of layouts, but the main issue is that <v-tab> tag should be a direct child element of <v-tabs>.
Otherwise, the tab styles will not be applied correctly.
So your template should be similar to:
<div id="app">
<v-app id="inspire">
<v-toolbar>
...default toolbar content
<template v-slot:extension>
<v-row>
<v-col cols="3" class="lime accent-1">Three cols item</v-col>
<v-col cols="6">
<v-tabs
dark
background-color="primary"
grow
>
<v-tab>
Item One
</v-tab>
<v-tab>
Item Two
</v-tab>
<v-tab>
Item Three
</v-tab>
</v-tabs>
</v-col>
</v-row>
</template>
</v-toolbar>
</v-app>
</div>
Test this at CodePen.
I have a <mat-drawer-container> that contains a <mat-selection-list>. Whenever the <mat-selection-list> has enough elements to overflow, the scrolling is not starting at the top when the elements are rendered. It's starting at the first element in the list, which hides the title and subtitle. Is there a way to force the scroll to start and the top?
[edit] I'm aware that I could leverage something like a scrollTo(), but it seems hack-y, and I'm trying to determine the best-practice approach for this.
<mat-drawer-container class="container">
<mat-drawer #drawer (openedChange)="onOpenedChange($event)" class="sidenav" mode="push" opened>
<p class="drawer-title">Data Validation</p>
<p class="drawer-subtitle">{{integrationName}}</p>
<mat-selection-list [multiple]="false">
<mat-list-option (click)="getTableNames(date)" (click)="drawer.toggle()" class="date-item" *ngFor="let date of dataServiceDates">
{{date}}
<mat-divider></mat-divider>
</mat-list-option>
</mat-selection-list>
</mat-drawer>
</mat-drawer-container>
<mat-selection-list> kind of pseudo-selects the first item in the collection of <mat-list-option>'s. This can be disabled by defaulting all of [selected] Input()'s to false
The fix was put in place like so:
<mat-drawer-container class="container">
<mat-drawer #drawer (openedChange)="onOpenedChange($event)" class="sidenav" mode="push" opened>
<p class="drawer-title">Data Validation</p>
<p class="drawer-subtitle">{{integrationName}}</p>
<mat-selection-list [multiple]="false">
<!--here--> <mat-list-option [selected]="false" (click)="getTableNames(date)" (click)="drawer.toggle()" class="date-item" *ngFor="let date of dataServiceDates">
{{date}}
<mat-divider></mat-divider>
</mat-list-option>
</mat-selection-list>
</mat-drawer>
</mat-drawer-container>
I'm working on a web application, and I have a datatable where you can filter via an API call. Upon adding filters, Material Design chips get added in horizontal orientation. When I add too much chips, my text in my div goes over the text above it.
This is my code:
<!-- ABOVE IS ANOTHER MAT TOOLBAR ROW WITH 3 INPUTS AS SHOWN IN THE PICTURE BELOW -->
<mat-toolbar-row class="controls">
<div class="col-md-9">
<span>Filtering {{getTotalDataSize()}}
<span *ngIf="type === 'user'" i18n>users</span>
<span *ngIf="type === 'role'" i18n>roles</span>
<span *ngIf="type === 'entitlement'" i18n>entitlements</span>
<span *ngIf="type === 'application'" i18n>applications</span>:</span>
<span *ngIf="clusterConditions.length == 0"> no filters applied</span>
<div *ngIf="clusterConditions.length > 0 || isInGroupByMode()">
<mat-chip-list>
<mat-chip *ngFor="let condition of clusterConditions" [selectable]="false" [removable]="true" (removed)="removeCondition(condition)">
<span *ngIf="condition.attr.name">{{condition.attr.name | capitalize}} {{condition.match}} "{{condition.val}}"</span>
<span *ngIf="!condition.attr.name">Contains "{{condition.val}}"</span>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<mat-chip *ngIf="isInGroupByMode()" [selectable]="false" [removable]="true" (removed)="changeGroupByMode(false)">
<span>Grouped by {{groupByAttribute.name}}</span>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
</div>
<div class="col-md-3">
<mat-paginator #paginator [length]="getDataSize()" [pageIndex]="0" [pageSize]="10"></mat-paginator>
</div>
</mat-toolbar-row>
I tried fiddling with some display: block/flex; and box-sizing: border-box;, but I can't seem to figure it out!
An example of what it looks like when adding too much chips:
I'd like the 'Filtering ...' to show beneath the input fields!
EDIT: Wanted behaviour:
Note: The row has two columns, the chips column and the navigator on the right. When there are to much pills, a next row has to start as shown in the picture above, in the column div of the pills, not of the paginator.
Either the pills start next to the 'Filtering ... :' or beneath it (doesn't really matter)
Thanks in advance!
I am trying to implement a simple "hover on a comment to show a reply button" implementation in my angular application. Is there a way to achieve this effect by using template reference variables only?
Something along the lines of...
<mat-list>
<mat-list-item *ngFor="let comment of comments" #SomeRefToThisParticularElement (mouseenter)="SomeRefToThisParticularElement=true" (mouseleave)="SomeRefToThisParticularElement=false">
<h4>{{comment.text}}</h4>
<p> 3 replies </p>
<mat-icon *ngIf="SomeRefToThisParticularElement==true">reply</mat-icon>
</mat-list-item>
</mat-list>
Obviously, the above doesn't work cause angular won't let you assign or set template variables the way I have shown in the snippet above. But I would like to explore options to achieve this at the html template level.
Is this a good approach to do this?
Edit
Click here for a summary of possible solutions.
try this, Hide and show based on the hover index of an array.
<mat-list>
<mat-list-item *ngFor="let comment of comments; let i = index" (mouseenter)="commentIndex= i" (mouseleave)="commentIndex = -1">
<h4 mat-line>{{comment.text}}</h4>
<p mat-line style="font-size:x-small; color:rgba(0, 0, 0, 0.54)"> 3 replies </p>
<mat-icon *ngIf="commentIndex == i">reply</mat-icon>
</mat-list-item>
</mat-list>
Use a dynamic object to do this, like comment.isVisible. Now the isVisible object is dynamically created and it will be modify the value while hover in/out.
Please try this way
<mat-list>
<mat-list-item *ngFor="let comment of comments" (mouseenter)="comment.isVisible = true" (mouseleave)="comment.isVisible= false" >
<h4 mat-line >{{comment.text}}</h4>
<p mat-line style="font-size:x-small; color:rgba(0, 0, 0, 0.54)"> 3 replies </p>
<mat-icon *ngIf="comment.isVisible">reply</mat-icon>
</mat-list-item>
</mat-list>
Simplest Solution (Credit: Rahul Sharma) - use index of the element and set that as the value of a dynamic variable that is used within an *ngIf statement for show/hide behavior of an element.
Next Best Solution (Credit: Ramesh Rajendran) - Add a dynamic property to the iterable object. This assumes that the iterable object is not immutable.
Thanks to the respective contributors. Hope this helps someone in the future.
you can use css:
mat-icon{
color: transparent;
}
mat-icon:hover, mat-icon:active{
color:black;
}
I'm currently attempting to switch the tabbing inside of an MD-Gridlist to tab hoizontally rather than vertically. I have tried using tab indexes and had no luck. I want to be able to tab through this dynamically growing or shrinking grid list horizontally.
<ng-container *ngFor="let field of fieldsTable; let i = index">
<!--condition in the grid-list tag checks if the key filed can be shown -->
<md-grid-list class="static-column" cols="1" rowHeight="25px" *ngIf="field.$type == GlobalVariables.typeClasses.Static && (field.Name !== '' || showKey)">
<md-grid-tile class="field-name-tile theme-primary" *ngIf="!field.IsKey;">
{{field.Name}}
</md-grid-tile>
<md-grid-tile class="field-name-tile theme-primary" *ngIf="field.IsKey && showKey" mdTooltip="Key field used to update data for this row via the api, values must be unique.">
<md-icon>vpn_key</md-icon>
</md-grid-tile>
<md-grid-tile class="static-field-tile theme-accent-alternating " *ngFor="let content of field.ContentData; let i = index">
<md-input-container class="content-data-input">
<input class="field-input" mdInput (keyup)="content.Value=$event.target.value" value="{{content.Value}}">
</md-input-container>
</md-grid-tile>
</md-grid-list>
</ng-container>
Any help would be greatly appreciated because I've hit a roadblock.
Thank you in advance!
I managed to remedy this by:
Adding this to the input container html which live in the grid tiles of the grid list
tabindex={{setTabIndex(i,j)}}
and this in the TypeScript
setTabIndex(outerIndex: number, innerIndex: number): number {
return (outerIndex + 1) + (innerIndex * this.staticTableLength);
}