Open Closed

Adjust vertical size of main view in Lepton theme #2819


User avatar
0
mpvismer created

Hi,

Simple question...We have added an extra line to the footer in MainFooterComponent.razor which gets configured into the Lepton theme with: options.FooterComponent = typeof(MainFooterComponent);

However, the extra line causes the layout to be bigger and enables scrolling on the main view by 1 line to see the extra line of the footer.

i.e A footer with one line of text, no scrolling. With two lines of text, there is scrolling. Would it be possible to advise how to adjust the layout and sizing so that the view does not scroll when 2 lines of text in the footer?

Thanks


6 Answer(s)
  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Hi, can you provide the below information?

    • ABP Framework version: vX.X.X
    • UI type: Angular / MVC / Blazor
  • User Avatar
    0
    mpvismer created

    Thanks

    • ABP Framework version: v5.1.4
    • UI type: Blazor Server (but I think applies to WebAssembly as well)
  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Thanks. I'll try to reproduce it and write you back asap.

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Hi, you need to add a custom style to the lp-footer class. I think below style snippet is what you're looking for.

    .lp-footer {
        position: fixed;
        bottom: 0;
    }
    

    You can add this style to the blazor-global-styles.css.

  • User Avatar
    0
    mpvismer created

    Thanks! Appreciate that. This will work until the content fills the screen and then scrolling never enables.

    I think we need to find the place where the minimum height of the main content view is calculated and adjust that to be a few lines shorter.

    (I.e. i don't think a generic fix is possible - it will have to be an adjustment which is tweaked specifically to the height of your footer.)

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Hi, you can download the source code of the Lepton Theme, find the footer-related styles and change them to your needs.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11