I am using Core+Angular version 7.2.3. I made my own component similar to “PhoneBook Component” example. I just like to display it on the whole main section of screen (i.e. right of side-bar, below of top-bar, above of foot-bar, and left of screen’s right edge). Here is my sample.component.html:
<div [@routerTransition] class="?" style="border:dashed; width:100%; height:100%">
<!-- add some html tags here -->
</div>
First of all, I like to border the section to make sure the inside element (e.g. a background image) can fill the whole area.
What css class should be used for this purpose? I’ve tried “kt-content”, “kt-container”, “kt-portlet”, “kt-portlet__body kt-portlet__body--fit”, and so on, but all of them cannot draw the border around the whole main section.
Can you give me a clue?
Thanks,
8 Answer(s)
-
0
Hi @fguo
If you haven't solved this issue and if you can share the generated html with us, we can try to help.
Thanks,
-
0
Hi, ismcagdas:
I haven't solved this issue. I actually like to take the whole area right to the side-bar (no footer and header). Here is my simplified test.component.ts for light-green background color on the entire of this area:
import { Component, Injector, OnInit } from '@angular/core'; import { AppComponentBase } from '@shared/common/app-component-base'; import { appModuleAnimation } from '@shared/animations/routerTransition'; @Component({ template: `<div [@routerTransition]> <div style="background-color:#F5FFF2;width:100%;height:100%"> Panel </div> </div>`, animations: [appModuleAnimation()], preserveWhitespaces: true }) export class DevtestComponent extends AppComponentBase implements OnInit { ngOnInit(): void { } constructor( injector: Injector) { super(injector); } }Here is the result screen shot:
You may see it is not stretched to the full area.I've tried several ways. The only workaround is adding "100%" on both div AND adding "app-root" as the selector:
selector: 'app-root', template: `<div [@routerTransition] style="width:100%;height:100%;"> <div style="background-color:#F5FFF2;width:100%;height:100%;"> Panel </div> </div>`,To stretch to "subheader" area, I need to uncheck the "Fixed header" in Administration > Visual Settings > Subheader tab.
I still no idea how to remove footer-bar and header-bar. I've tried to uncheck the "Fixed header" and "Fixed footer", but it doesn't help.
I like to use the Metronic's built-in style classes. It has plenty well designed classes with BEM name convention. However, it is not easy to learn. Right now, I try to dig out a class from style.boundle.css file, but it is a big file and hardly to search out what I need. It's too much guess-work involved. I couldn't find a clear visual document/tutorial. Hope you can recommend one.
Thanks,
-
0
Hi,
You can define a custom style file for your component and set ViewEncapsulation to ViewEncapsulation.None , see https://angular.io/api/core/ViewEncapsulation#None. In that way, your custom css can affect the entire app.
-
0
Thank you for suggestion! I tried it, but it seems no help.
Ok, never mind. I will try some alternative. I like to use Metronic css classes,. It looks powerful, but just realized how hard to learn without a well-organized document/tutorial. I have to give up.
For now, can you just tell me how to hide the footer-bar dynamically from your code?
I don't want to configure it hidden all time, but just hide it when I route to this particular page.
Thanks,
-
0
Hi @fguo
You can define a setting and use its value to show/hide footer bar. You can check settins of visual settings page.
-
0
I still no idea how to remove footer-bar and header-bar. As I said, I've tried to uncheck the "Fixed header" and "Fixed footer" from "Visual Settings", but it doesn't work.
-
0
Hi @fguo
It is not implemented by default. So, There is no setting for hiding/showing Footer. You have to implement it yourself.
-
0
This issue is closed because it has not had recent activity for a long time.
