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.
Related
I'm working in ReactJs and unable to find out how can I customize scroll for a specific section.
<div>
<div>
Some header
</div>
<div style={{ height: "210px", overflow: "auto", }}>
// this section is only scrollable and I want to customize this scroll bar.
</div>
</div>
It was easy in html because I was able to use webkit. However, I don't know how to do this thing in react any help will be really appreciated. Thanks well in advance!
If I use the webkit then I'm getting this sort of error:
Styling scrollbars is somewhat possible, depending on the browser. if you want to completely restyle it, you will have to hide the real scrollbar, create a new one, and add functionality to it with code.
It is probably easier to use a tool like simplebar, which works with react:
import SimpleBar from 'simplebar-react';
import 'simplebar/dist/simplebar.min.css';
const App = () => (
<div>
<div>
Some header
</div>
<SimpleBar style={{ maxHeight: 210}}>
// this section is only scrollable and I want to customize this scroll bar.
</SimpleBar>
</div>
);
https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react
Use this package react-custom-scrollbar for custom behaviour and styling.
Also it is compatible with all browsers(Chrome/Firefox/Safari) etc.
In an Angular app I'm building, I have a toolbar component with three links. The first leads back to the app, the others to different components. Both link elements have class="mat-button" applied, because I wanted to use existing styling.
The first component contains a button with attribute mat-raised-button.
The second component just contains text.
When the application initially loads, the toolbar looks ugly.
When clicking the second link, the second component is loaded, but the toolbar is still ugly.
When clicking the first link, the first component is loaded and the toolbar looks much better.
If I then click Home, I go back to the app page and the toolbar still looks good.
What I see in the toolbar is that the link elements have very little style applied initially:
Once I've clicked the first link, they have much more style applied:
But I thought if I load a module in AppModule, all of the module is loaded, including any available styles.
How can I make it so that the toolbar is pretty also initially? I could just use something other than mat-button, but I'm genuinely curious why this behaviour manifests.
StackBlitz with relevant code: https://stackblitz.com/edit/angular-wwlrtv
I changed the toolbar from
<mat-toolbar>
<a routerLink="" routerLinkActive="active" class="mat-button">Home</a>
<a routerLink="path1" routerLinkActive="active" class="mat-button">Link 1 - Style is applied</a>
<a routerLink="path2" routerLinkActive="active" class="mat-button">Link 2 - Nothing happens</a>
</mat-toolbar>
to
<mat-toolbar>
<a routerLink="" routerLinkActive="active" mat-button>Home</a>
<a routerLink="path1" routerLinkActive="active" mat-button>Link 1 - Style is applied</a>
<a routerLink="path2" routerLinkActive="active" mat-button>Link 2 - Nothing happens</a>
</mat-toolbar>
and this fixed the problem.
I've just had it with a new Angular 11 installation. Everything is by the book, default values, been close to copy-pasting elements from the material docs so far.
Suddenly I realized the mat-toolbar (MatToolbarModule) has no styles and appears like a white space on the page:
After the first click on any button, the styles would load and stay until the next page reload. I had to go back and check the set up and I found that the MatCheckboxModule was not imported. There was no compilation errors/warnings.
Not imported module would break the styles that belong to other modules. All modules must be imported.
After importing the Checkbox module the styling went to normal.
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.
I'm trying to create a fixed Navbar using Project Clarity
I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?
<clr-header class="header-6">
In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.
The general structure for A Clarity Application layout takes this form:
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...
You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.
if someone has also either very this problem, or another problem where some css does not work within Angular:
Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.
So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:
:host { display: contents; }
This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?