Base solution for your next web application
Open Closed

How to display my component in whole main section of screen? #7829


User avatar
0
fguo created

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)
  • User Avatar
    0
    ismcagdas created
    Support Team

    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,

  • User Avatar
    0
    fguo created

    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: `&lt;div [@routerTransition]&gt;
        &lt;div style=&quot;background-color:#F5FFF2;width:100%;height:100%&quot;&gt;
            Panel
        &lt;/div&gt;
    &lt;/div&gt;`,
        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: `&lt;div [@routerTransition] style=&quot;width:100%;height:100%;&quot;&gt;
        &lt;div style=&quot;background-color:#F5FFF2;width:100%;height:100%;&quot;&gt;
            Panel
        &lt;/div&gt;
    &lt;/div&gt;`,
    

    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,

  • User Avatar
    0
    ismcagdas created
    Support Team

    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.

  • User Avatar
    0
    fguo created

    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,

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @fguo

    You can define a setting and use its value to show/hide footer bar. You can check settins of visual settings page.

  • User Avatar
    0
    fguo created

    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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @fguo

    It is not implemented by default. So, There is no setting for hiding/showing Footer. You have to implement it yourself.

  • User Avatar
    0
    ismcagdas created
    Support Team

    This issue is closed because it has not had recent activity for a long time.