I have an issue on CSS with the header (mat-toolbar). I try put "A" on the left side and "B" on the right side.
What is working:
<mat-toolbar>
<mat-toolbar-row>
A
<span class="flex-spacer"></span>
B
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container class="prometheus-sidenav-container">
...
</mat-sidenav-container>
<app-footer></app-footer>
I tryed now to move now A and B in a component as header.
<mat-toolbar>
<mat-toolbar-row>
<app-header></app-header>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container class="prometheus-sidenav-container">
...
</mat-sidenav-container>
<app-footer></app-footer>
the header template:
A
<span class="flex-spacer"></span>
B
The header looks like following picture:
in style.scss
.flex-spacer {
flex: 1 1 auto;
}
some idea way flex is not working here?
When you move inside the a component two things happen
The parent is now no longer mat-toolbar-row and has the display rule value as block
flex-spacer CSS is in your component style, so it will not update any other components that have the flex-spacer class
To solve the problem
Move .flex-spacer {
flex: 1 1 auto;
} to styles.css
And in the parent component CSS add these rules
app-header {
flex-grow: 1;
display: flex;
}
Related
I am trying to add some small .png icons in a horizontal row in a main container. I am struggling to figure out the easiest way to go about doing this
Here is a code sandbox of what I have created so far
https://codesandbox.io/s/broken-dew-76c4rf
I have been struggling with this for a while now and I cannot seem to get it. I have tried creating a div, inserting tags in the div but I don't think this is correct. Any help is greatly appreciated!
Do like this
First import the img_path at the top
import imgurl1 from "../public/img/aws.png";
import imgurl2 from "../public/img/c.png";
import imgurl3 from "../public/img/java.png";
Then define a div with style flex flex-direction:row like this
<div className="img-container">
<div className="img">
<img src={imgurl1} alt="aws" />
</div>
<div className="img2">
<img src={imgurl2} alt="c" />
</div>
<div className="img3">
<img src={imgurl3} alt="java" />
</div>
</div>
and style like this
.img-container {
display: flex ;
flex-direction: row ;
}
.img1, .img2 ,.img3 {
/* any style for the images */
background-color: black;
}
Just set the style from the div with the images to display: 'flex', flex-direction: 'row'
In Ionic, the ion-title component has the content encapsulated in an extra div within its shadow-dom.
This div has the class .toolbar-title set. How can i select this div via scss-selector to change its overflow behavior?
I tried:
.toolbar-title { ... }
ion-title .toolbar-title
ion-title::shadow .toolbar-title { ... }
ion-title::shadow(div) { ... }
and a lot other combinations including :host & ::ng-deep selectors.
And, yes i know , ::shadow and ng-deep is deprectaded.
I also know that ionic has introduced css-variables for this purposes, but unfortunatley not for the overflow attribute.
THX in advance!
The concept of shadowDOM is you can't touch its content with CSS from the outside.
It is an open shadowDOM, so you can change it with JavaScript.
document.querySelector("ion-title")
.shadowRoot
.querySelector(".toolbar-title")
.style
.overflow = "initial";
Ionic v6 allows you to target and modify shadowDOM contents with CSS. See https://ionicframework.com/docs/theming/css-shadow-parts
However, the element you want to select inside the shadowDOM needs to expose a part attribute. For instance the ion-select element:
<ion-select>
#shadow-root
<div part="placeholder" class="select-text select-placeholder"></div>
<div part="icon" class="select-icon"></div>
</ion-select>
You can select the placeholder element with:
ion-select::part(placeholder) {
color: blue;
opacity: 1;
}
Unfortunately, the ion-title element does not expose any shadow parts. You need to wrap the contents of ion-title in a container to be able to modify them:
<ion-title>
<div class="content">
<img src="..." />
Hello World!
</div>
</ion-title>
CSS:
.content {
display: flex;
align-items: center;
}
StackBlitz example: https://stackblitz.com/edit/ionic-title-modification-8a1qst
Is it possible to reduce the height of the v-select in Vuetify ?
I don't understand why this elements are so big / fat...
My code is :
<template>
<div>
<v-select
outline
dense
v-model="filtresActivites"
:items="activitesGroupees"
item-text="activiteNomComplet"
item-value="activiteCode"
multiple
>
<template v-slot:selection="{ item, index }">
<span v-if="index === 0" class="deep-orange--text">{{ filtresActivites.length }} activités</span>
</template>
</v-select>
</div>
</template>
"You can add height property to your v-select like this:" : it dosn't work
I added .v-select__selections { min-height: 30px } in the style of the component and it dosn't work.
You can add height property to your v-select like this:
<v-select
:items="items"
height=50
></v-select>
If you want to change the css property of v-select, you can do so by adding this class
.v-select__selections {
min-height: 30px
}
The min-height is 42px by default
It is also hard to understand your problem when we cannot see your code
You don't have to use outline style in v-select. Remove it.
Image example from vuetify:
I am working on the dynamic side bar for our project, basically what we want to do is to set up a dynamic side bar when user click on the side bar it will spread when user click back sidebar should collapse and show only icons (but not totally collapse it will keep the icons) for example before user click the icon. We are using sidenav.toggle()from angular material function which basically closes the sidebar completely and if I don't use toggle() function "Side" mode for navbar does not work. So I want collapse to icon with side mode. (The other reason we need to keep the side mode is that we also need to make sure when user spread the sidebar, right side content should push to right)
After user click the icon
Is there a way to do that?
Thanks.
Option 1: Generating Automatically:
You can create a navigation component from templates provided by Material itself using 'Angular CLI component schematics'
ng generate #angular/material:nav your-component-name
The above command will generate a new component that includes a toolbar with the app name and a responsive side nav based on Material breakpoints.
See more about angular material schematics here
Option 2: Implementing Manually:
To implement that, you just have to refer these two links:
Resizing Sidenav | Angular Material
Navigation List | Angular Material
glance through the following code. Implementation will be something like this:
<mat-drawer-container class="example-container mat-typography" autosize>
<mat-drawer #drawer mode="side" disableClose="true" opened="true">
<button mat-mini-fab (click)="isExpanded = !isExpanded" color="warn" style="margin: 10px;">
<mat-icon aria-label="Menu">menu</mat-icon>
</button>
<mat-nav-list>
<mat-list-item>
<mat-icon mat-list-icon>person</mat-icon>
<h4 mat-line *ngIf="isExpanded">Management A</h4>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>assignment</mat-icon>
<h4 mat-line *ngIf="isExpanded">Management B</h4>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>domain</mat-icon>
<h4 mat-line *ngIf="isExpanded">Management C</h4>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>folder_shared</mat-icon>
<h4 mat-line *ngIf="isExpanded">Management X</h4>
</mat-list-item>
</mat-nav-list>
</mat-drawer>
<div class="example-sidenav-content">
You cards and screen Contents goes here..
Will be pushed towards right on expanding side navbar.
</div>
</mat-drawer-container>
I did this with a bit of CSS
mat-sidenav:not(.mat-drawer-opened) {
transform: translate3d(0, 0, 0) !important;
visibility: visible !important;
width: 60px !important;
overflow: hidden;
}
So when the draw is NOT open, the width of the sidenav is 60px and not 0. Just enough to show your icons.
OK, the next issue is that you'll need to hide a bunch of stuff like button name and other descriptive stuff, for me I need to change the height of the profile image and hide additional text. I did this in the same way as above using the :not selector:
mat-sidenav:not(.mat-drawer-opened) div.leftNav div.navProfile img {
width: 40px; margin: 16px 0 0px 0;
}
mat-sidenav:not(.mat-drawer-opened) .navTitle,
mat-sidenav:not(.mat-drawer-opened) .profileTitle {
display: none;
}
When collapsed I didn't want to show the button names so I wrapped the name in a *ngIf
<span class="navName" *ngIf="opened">{{ page?.name }} </span>
This should work, and it does but there is a problem. The ngIf is bound to the opened event and you will notice a delay when the event is firing (to account for it animation) to show your labels when the drawer is open.
To fix this I had to delve into the api of sidenav and found an eventemitter call openedStart and closedStart. I created a new bool in the component class,
showNavLabels: boolean;
then bound the events to this bool in the HTML.
<mat-sidenav class="sidenav" #sidenav mode="side" [(opened)]="opened"
(openedStart)='showNavLabels = !showNavLabels'
(closedStart)='showNavLabels = !showNavLabels' >
I am sure there is better way as I am not that experienced with Angular yet.
I hope it helps you out.
I created an example based on scss. Maybe someone can help to create the mobile version according to this sample.
Step 1: Add below style to styles.scss
// src/styles.scss
:root {
--menu-width-open: 200px;
--menu-width-closed: 64px;
}
.mat-drawer-container {
.mat-drawer {
box-sizing: content-box;
width: var(--menu-width-open);
transition: all 0.3s ease-in-out !important;
}
.mat-drawer-content {
// transform: translateX(200px);
margin-left: var(--menu-width-open) !important;
transition: all 0.3s ease-in-out !important;
}
&.container-closed {
.mat-drawer {
width: var(--menu-width-closed);
}
.mat-drawer-content {
// transform: translateX(64px) !important;
margin-left: var(--menu-width-closed) !important;
}
}
}
Step 2: Add drawer to app.componenet.html
<mat-drawer-container class="example-container" autosize [ngClass]="{ 'container-closed': !showFiller }">
<mat-drawer #drawer class="example-sidenav" mode="side" disableClose="true" opened="true">
<button (click)="showFiller = !showFiller" mat-raised-button>click</button>
</mat-drawer>
<div class="example-sidenav-content">
<router-outlet></router-outlet>
<button type="button" mat-button (click)="drawer.toggle()">Toggle sidenav</button>
</div>
</mat-drawer-container>
Step 3: And add showFiller = false; to app.component.ts file.
// app.component.ts
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
showFiller = false;
}
There is a feature request for this https://github.com/angular/material2/issues/1728
if you read the comments you'll also find a few examples on how to implement it yourself while it's not officialy available.
I have an angular2 application using the Angular2-material library for styling. I'm trying to add a FAB (Floating Action Button) to hover in the right corner of the application, but it's fixing itself to its parent component, and not the window.
The hierarchy of the application is as follows:
app.component
|-detail.component
Within the app.component template, I am using the md-sidenav-layout directive with router-outlet in the body of the layout directive:
<md-sidenav-layout>
<md-sidenav #sideNav (open)="closeStartButton.focus()">
<router-outlet name="navMenu"></router-outlet>
<br>
<button md-button #closeStartButton (click)="sideNav.close()">Close</button>
</md-sidenav>
<md-toolbar color="primary">
<button md-icon-button (click)="sideNav.toggle()">
<md-icon class="md-24">menu</md-icon>
</button>
<span>{{title}}</span>
</md-toolbar>
<div role="main">
<router-outlet></router-outlet>
</div>
</md-sidenav-layout>
Inside the detail component template, I have the following at the top of the template:
<button md-mini-fab class="fab" (click)="toggleAdd()">
<i class="material-icons">add</i>
</button>
And the css for that component:
.fab {
display: block;
position: fixed;
right: 2rem;
bottom: 2rem;
z-index: 10;
}
However, when I navigate to the detail page, the .fab is positioned relative to the component, not the window. I've tried using encapsulation: ViewEncapsulation.None on the detail component, but that doesn't affect it either. Is there a way to keep the fab defined within the detail component, but have it still be fixed relative to the window?
Look for something applying a CSS transform up the chain. In my case I was applying a transform via Angular animations. Apparently transform breaks position:fixed. Why does `transform` break `position: fixed`?
I hope I can figure out how to make this work, now.
in your app.component.html add this code:
<md-sidenav-container>
<md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
<div class="my-content">Main content</div>
</md-sidenav-container>
global styles.css:
html, body, material-app, md-sidenav-container, .my-content {
margin: 0;
width: 100%;
height: 100%;
}
it works for me! ;)
I answered a very similar question here.
The gist: I solved this with a quite heavy workaround. I removed the FAB from the main content, defined a secondary router outlet in my template (outside md-sidenav-layout), created a standalone component for the FAB, and used an Observable in a service to broadcast the click events to the main components.
The answer in the other thread contains code samples and a working plunker example.