I have a mat drawer to the right of the screen and I am trying to stick a button to it, so the overall design is clear.
Example
How can I manage to do this action? So far I have tried adding the button inside of the drawer and giving it a negative left: -10px in order to overlay the drawer.
<mat-drawer-container class="example-container" [hasBackdrop]="false">
<mat-drawer style="width: 600px;" position="end" #drawer2 [mode]="over">
<button style="left: -10px; z-index: 1000;" mat-raised-button (click)="drawer2.toggle()">Side Nav</button> HERE
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon> layers</mat-icon>
<span>Componenti</span>
</ng-template>
<components [itemCategoryAreas]="itemCategoryAreas"></components>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>wallpaper</mat-icon>
<span>Disegno</span>
</ng-template>
Content 1
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>list</mat-icon>
<span>Checklist</span>
</ng-template>
Content 1
</mat-tab>
</mat-tab-group>
</mat-drawer>
🚂 Might help! Try something like this:
.app-toolbar {
position: sticky;
position: -webkit-sticky; /* For macOS/iOS Safari */
top: 0; /* Sets the sticky toolbar to be on top */
z-index: 1000; /*app's content doesn't overlap the toolbar */
}
don't forget to change the classname though, Hope it helps :)
Then,
If you want your button to stick permanent to its position, you should use
position: fixed;
instead of
position: sticky;
Related
I need to have 2/3 tabs, but in the end and on the same line, I need to add buttons, custom component etc etc ...
I didn't found a way to do it, and there is no responses when googling :-o
<p-tabView>
<p-tabPanel header="Header 1">
Content 1
</p-tabPanel>
<p-tabPanel header="Header 2">
Content 2
</p-tabPanel>
<p-tabPanel header="Header 3">
Content 3
</p-tabPanel>
<!-- here start my custom html - without tabs content -->
<p-tabPanel>
<button></button>
<app-my-custom-component></app-my-custom-component>
</p-tabPanel>
</p-tabView>
Here an example of what I need.
On the same line, I want to add custom html, and when I click on it, there is no tab, but other actions ... like dialog for example
Try this:
<p-tabView>
<p-tabPanel header="Header 1"> Content 1 </p-tabPanel>
<p-tabPanel header="Header 2"> Content 2 </p-tabPanel>
<p-tabPanel header="Header 3"> Content 3 </p-tabPanel>
<!-- here start my custom html - without tabs content -->
<p-tabPanel>
<ng-template pTemplate="header">
<p-button icon="pi pi-chevron-up" (click)="openPrev()">
</p-button>
</ng-template>
</p-tabPanel>
<p-tabPanel>
<ng-template pTemplate="header">
<app-my-custom-component></app-my-custom-component>
</ng-template>
</p-tabPanel>
</p-tabView>
In addition to this answer.
To prevent the content from opening and only trigger the button action, try this:
Add $event.stopPropagation() to the button (click) method:
<button pButton type="button" label="Action button"
(click)="performRequiredAction();$event.stopPropagation();" >
</button>
Using CSS, disable clicking on the parent element, which is the tab, and enable it for the child button:
:host ::ng-deep {
.p-tabview-nav-link:has(button){
pointer-events: none;
button {
pointer-events: all;
}
/* Additional styling for a better button look */
border: none !important;
padding: 0 4px !important;
height: 100%;
align-items: center;
}
}
Under my App , i ve a mat-select widget, it's a list of options which i'm used to scroll within the list to see all the options:
I want to add a header on the top of the the options list , thus , it keeps always appearent while scrolling
<mat-select placeholder="Selectionner la boutique"
id="libelleShop"
#inputSelectShop
[(value)]="selectedlibelleShopoValue"
ngDefaultControl
formControlName="libelleShop"
(selectionChange)="onShopSelectionChanged($event)">
/* THIS IS MY HEADER DIV */
<div id="myHeader" class="m-2">
<span class="myHeaderClass"></span>
</div>
<mat-option *ngFor="let shop of bad3ShopsListSortedByName"
[value]="shop.edoId">
{{shop.storeName}}
</mat-option>
</mat-select>
How may i fix this div to be always on the top , and prevent it to diseppear while scrolling to the bottom of the list
Suggestions ?
add the following to your css (you are missing the top: xxx px value) as this determines where to stick to exactly.
.m-2 {
position: sticky;
top: 0px;
z-index:1000;
margin-bottom: <whatever you need>px;
}
I have a question. I didnt find any familiar question on stack so i asking here, is it possible to make <mat-selection-list> scrollable (Angular 7)? I want to display scroll-bar on the right when items are too many to fit a window.
<mat-card fxFlex="33%">
<mat-selection-list>
<mat-list-item
*ngFor="let product of products"
[class.selected]="product === selectedproduct"
(click)="onSelect(product)"
>
</mat-list-item>
</mat-selection-list>
Simple CSS
mat-selection-list {
max-height: 400px;
overflow: auto;
}
StackBlitz Demo
By setting custom CSS properties?
CSS for fancy scroll bar which only supports Chrome browsers:
.custom-scroll-bar{
height:70vh;
overflow-y:scroll;
overflow-x: hidden;
}
.custom-scroll-bar::-webkit-scrollbar{
width: 5px;
}
.custom-scroll-bar::-webkit-scrollbar-thumb{
background: rgba(0,0,0,.26);
}
For Firefox and Internet explorer just simply use:
.custom-scroll-bar{
height:70vh;
overflow-y:scroll;
}
HTML:
<mat-selection-list #shoes class="custom-scroll-bar">
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
StackBlitz Example
You can try with:
<mat-card fxFlex="33%">
<mat-selection-list [style.overflow]="'auto'" [style.height.px]="'300'">
<mat-list-item
*ngFor="let product of products"
[class.selected]="product === selectedproduct"
(click)="onSelect(product)">
</mat-list-item>
</mat-selection-list>
I am trying to insert footer to the Vuetify's list or menu or combobox. They all are pretty same. I tried every possibe css solution I could without solution.
This is what I want but I want the bottom button to be statically visible at the bottom even if scrolling:
Regular fixed css solution do not work no matter on what element I do apply styles.
This is the combobox I am trying to implement it to:
<v-combobox
style="min-width: 260px;"
dense
:value="item.description"
:items="products"
item-text="name"
item-value="id"
:error-messages="item.description_error"
:filter="filter_products"
#input="product_selected"
ref="description">
<template
slot="item"
slot-scope="{ index, item, parent }">
<v-list-tile-content v-if="!item.footer">{{ item.name }}</v-list-tile-content>
<v-btn v-else flat dark small style="padding-left:0!important;margin-left:0!important;display:table-row;width:100%"
color="primary"
depressed
:ripple="false"
#click.stop="add_new_product"><v-icon left>add_box</v-icon>{{ item.footer }}</v-btn>
</template>
</v-combobox>
Also tried using v-menu and v-list
<v-menu max-height="250px">
<v-text-field label="Hello" slot="activator"></v-text-field>
<v-list>
<v-list-tile v-for="item in 10">hello</v-list-tile>
</v-list>
<p style="position: fixed; bottom: 0;">IUWHEGIuiHWEGIUHGIWUEHGIUWHEGIUHWEIUG</p>
</v-menu>
Codepen
We need to add max-height and overflow: auto to the v-list element so that we can scroll the list, and not the whole menu.
Add "footer" to the bottom of the v-menu and it should work as expected.
And just wrap it inside the v-card for example so that menu is not transparent.
<v-menu v-model="menu" offset-y>
<v-btn slot="activator">Menu</v-btn>
<v-card>
<v-list class="custom-list">
<v-list-tile v-for="item in items"></v-list-tile>
</v-list>
<v-divider></v-divider>
<div class="pa-1" #click.stop="">
<v-btn flat dark small color="primary" depressed :ripple="false">
<v-icon left>add_box</v-icon>
footer button
</v-btn>
</div>
</v-card>
</v-menu>
css
.custom-list {
max-height:200px;
overflow: auto;
}
We can use #click.stop="" to prevent it from closing the menu.
In my project, I have a scrollable list of items, and each item has a menu that is opened when its activator button is hovered.
By default, v-menu elements are attached to the v-app element, which serves as a mounting point for many Vuetify elements. When I use this default behavior, the generated HTML contains many detached div elements for the popup menu, one per item in the list, in the generated v-app div:
<div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div>
This is impacting the reading of the rendered DOM, and the result is a bit messy especially when debugging.
Also, once the menu is opened, and the list is scrolled, the menu remains at a fixed position and therefore gets visually detached from its activator button.
How could I attach the menu to each item of the list in order to have a more readable rendered DOM (see below)?
<my-list>
<my-item>
<div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div>
</my-item>
</my-list>
And how can I have the v-menu stick to its activator button when the list is scrolled?
Check out the documentation under the following link and search for "attach":
https://vuetifyjs.com/en/components/menus
"Attach": Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
So when you have a menu like e.g. this:
<v-menu>
<v-btn slot="activator">
Click
</v-btn>
<v-card>
Content
</v-card>
</v-menu>
You can attach it to an element, let's say the button itself, like so:
<v-menu attach="#fooAnchor">
<v-btn slot="activator" id="fooAnchor">
Click
</v-btn>
<v-card>
Content
</v-card>
</v-menu>
And of course you can place id="fooAnchor" wherever you want.
This is the latest solution you can try this one below
<v-menu
offset-x
bottom
right
attach="zoom-feature"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
id="zoom-feature"
v-bind="attrs"
v-on="on"
>
Click Me
</v-btn>
</template>
<v-card>
I am Card
</v-card>
</v-menu>