this is a part of my project : app
I want the header be fixed in scrolling and I added bootstrap fixed-top class to my header in header.component.html file. but when I change the mode of my sidenav to side the header doesn't change and be pushed to left.
how can I fix this problem?
You don't need to used bootstrap's fixed-top - you just need to place your header in the right place. For your 'side' mode, the header needs to be inside the sidenav content so that it is pushed along with the content. For 'over' mode, the header needs to be above and outside the sidenav altogether. You can do this using template logic:
<ng-container *ngIf="!pushed" [ngTemplateOutlet]="appHeader"></ng-container>
<mat-sidenav-container class="theme-sidenav-container" autosize>
<mat-sidenav class="theme-sidenav" #sidenav [mode]="mode" position="end" opened="false" (mouseleave)="pushed? 2+2 :sidenav.toggle()">
...
</mat-sidenav>
<mat-sidenav-content class="theme-main-content">
<ng-container *ngIf="pushed" [ngTemplateOutlet]="appHeader"></ng-container>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
<ng-template #appHeader>
<app-header (toggleSidenav)="sidenav.toggle()" [menuAvailable]="pushed"></app-header>
</ng-template>
Here it is on StackBlitz. Note that I also removed the fixed-top class and defined defaults for mode and pushed.
This may not be exactly what you want, but it shows you how to dynamically change the header position. You may need to add layout to app-sidenav and the theme-main-content class.
Related
I'm working on a project, but am fairly new to aspects of Angular and I just can't seem to get this positioning figured out. Currently I have an app with a header (toolbar), a sidenav, and a main content area. There is a "toggle" button on the header that uses a service to toggle open and close the sidebar. This is working as expected so far.
However, the issue I am running into pertains to the main content area that is supposed to be to the right of the sidenav. So when the sidenav is open, it stays to the right, and when it is closed, it stays to the right. From what I have seen so far is that I need to be using the <mat-sidenav-content> to keep this content positioning.
Currently in my app.component.html I am using a router outlet so I can display different content in the main content area. Here is what that looks like:
AppComponent
<app-header></app-header>
<mat-sidenav-container class="main-sidenav">
<app-sidenav></app-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>
App-Sidenav
<mat-sidenav [disableClose]="true" autosize class="sidenav" mode="side" opened #sidenav>
...
</mat-sidenav>
And this is working great with my header
Header
<mat-toolbar class="header">
<a routerLink="/workouts" href="#" class="logo--link">Logo Goes Here</a>
<button (click)="toggleSidenav()">toggle sidenav</button>
</mat-toolbar>
The main content area I am trying to keep always to the right of the sidenav.. Currently I am trying to get the workouts.component to work properly so I can use the method for the other components:
WorkoutsComponent
<mat-sidenav-content>
<h1>Workout list will go here</h1>
</mat-sidenav-content>
How can I get this content to stay over to the right of the sidebar whether it is opened or closed?
I have tried a few methods such as wrapping the elements in the appcomponent with <mat-sidenav>... and <mat-sidenav-content>... but doing so ends up breaking my app altogether.
Here is a stackblitz of my app so far.
There is some routing set up, and I have a couple of components ready to go, but if even one can work I am certain the rest can be implemented without much problem
Thank you, and let me know if I can answer any questions that will help solve this.
I got this fixed. The issue was that I couldn't just wrap my appcomponent in a sidenav, but rather I needed to use all the same properties from the app-sidenav.component. So in the AppComponent, I changed it to the following:
<app-header></app-header>
<mat-sidenav-container class="main-sidenav">
<mat-sidenav [disableClose]="true" autosize class="sidenav" mode="side" opened #sidenav>
<app-sidenav></app-sidenav>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
Then, I moved the sidenav service to be part of the app component as well. By completely removing the <mat-sidenav>... and <mat-sidenav-content>... from the individual components, and instead putting them on the app module with exact specifications as before, this was able to work.
If you don't wrap the app component with the correct properties, Angular will attempt to change your margin properties and it will throw off the layout.
I am building a search UI in Angular 8 with the Angular Query Builder module.
The Angular2 query builder module is working correctly. I am customizing the styling for Angular Material following the customization instructions in the documentation. I am using Angular Material and Angular FlexLayout for the styling.
I want to move the "remove" button (the red X) all the way on the RIGHT side of the flex row, to the right of the "value" field.
The flexLayout settings should be showing all of the elements side-by-side in order. However, some sort of style is being applied that places it on the left side despite being the last element in the flex row. I have tried margin-left and other styles but was not able to figure out how to get the X to go all the way to the right side.
Here is the stackblitz:
https://stackblitz.com/edit/angular-aqyt4u?file=src/app/app.component.ts
Here is the snippet of markup for the customization of the remove button:
<!-- Query Builder -->
<query-builder [(ngModel)]='recordsQuerySet' [config]='config'>
<!-- Override remove button -->
<ng-container *queryRemoveButton="let rule; let removeRule=removeRule">
<div fxFlex>
<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)">
<mat-icon>clear</mat-icon>
</button>
</div>
</ng-container>
<!-- etc -->
</query-builder>
You can add a custom class to remove rule button then set its position absolute, some thing like below:
In html file:
<button type="button" mat-icon-button color="accent" (click)="removeRule(rule)" class="remove-rule-btn">
<mat-icon>clear</mat-icon>
</button>
In css/scss file:
.remove-rule-btn{
position: absolute;
right: 5px;
}
I have a v-app-bar control, and I'm trying to add a logo/image to it.
Is there a standard approach in Veutify for adding a logo to the AppBar?
You can add a v-img component like this:
<v-app-bar color="light-blue lighten-3" app>
<v-img
class="mx-2"
src="https://i.imgur.com/qgGY4tB.png"
max-height="40"
max-width="40"
contain
></v-img>
<v-toolbar-title class="ml-2">
Page title
</v-toolbar-title>
</v-app-bar>
It's important to set a max-height and max-width, otherwise the image will overflow the nav vertically and push over the title horizontally. And also set contain to preserve the aspect ratio
Demo in CodePen
Note: If you're using Nuxt/Webpack, etc, you might need to build the image path with something like this: :src="require('~/assets/logo.png')"
Use v-avatar with a tile property set to true, just like this:
<v-avatar :tile="true">
<img :src="require('#/assets/logo.png')" alt="logo">
</v-avatar>
The full v-app-bar example:
<v-app-bar app light>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-avatar :tile="true">
<img :src="require('#/assets/logo.png')" alt="logo">
</v-avatar>
<v-toolbar-title>Header text</v-toolbar-title>
</v-app-bar>
Yon can juste use the <img> balise from native html to set your logo.
Then you can resize them with width or height property.
I've started a blank project with Ionic 3 and the default style is not applying to the buttons.
I'm using a default button with
<button ion-button>Prueba</button>
But I get this
Am I missing something?
UPDATE
Using
<ion-button block color="primary">Acceder</ion-button>
Fix the problem but I notice that is not using full width in the div than contains the button
<div padding>
<ion-button block color="primary">Acceder</ion-button>
</div>
Not sure where is the problem
I have a component that uses MatExpansionPanel to display a list of products.
I'm using some CSS to hide the overflow of the product's description. Please, see this stackblitz for the current looking.
So I'm trying to extract the panel header into a child component and to apply the exact same CSS to it. However, the CSS doesn't seems to be working. Please, see this stackblitz.
Am I doing something wrong there ? Or is it that this Angular Material component is implemented in a way that it shouldn't be split in different components ?
You can wrap your product-panel-header.component between a div with display:flex like this:
html:
<div class="panel-header">
<mat-panel-title>
{{product.noProduit}}
</mat-panel-title>
<mat-panel-description class="product-name">
{{product.designation}}
</mat-panel-description>
<mat-panel-description>
{{product.quantite}}(+{{product.supplement}})
</mat-panel-description>
</div>
css:
.panel-header {
display: flex;
}
see working stackblitz