New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Single page Dashboar application using Angular theme.


Hi,

I am planning to purchase angular template theme. Is it possible to make the dashboard with out scroll.That means want to see the header and footer on the first page.Let me know what are the steps to be done.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)


Interesting discussion! Just like using unofficial modded apps like Spotify Premium APK can create risks and complications, trying to force a dashboard to fit entirely on one screen without scrolling can lead to layout or usability issues. It’s usually better to follow best practices use a responsive Angular layout that adapts cleanly to different screens instead of restricting the design



I completely understand the issue — integrating a purchased theme into Angular can sometimes create dependency or build errors if the structure isn’t aligned properly. I faced something similar while working on my project for yacinetvv.com
, which focuses on live football and sports streaming interfaces. What helped me was checking the Angular version compatibility and ensuring that all assets were loaded via angular.json instead of direct HTML imports. Maybe try running npm install again and rebuilding with the correct configuration.



Car Parking Multiplayer is an open-world driving simulator that goes beyond parking challenges. It offers realistic car physics, free-roam gameplay, and multiplayer interaction where players can explore cities, race, and trade cars. With a wide range of vehicles, customization options, and real fuel and traffic systems, it delivers an immersive driving experience. Players can chat, role-play, and compete online, making it both a parking simulator and a dynamic social driving game.



Yes, it’s possible to design an Angular dashboard without scroll by adjusting layout height using CSS flexbox or grid. Set the body and container heights to 100vh and use overflow: hidden where needed. For projects like biotech beauty platforms, clean, scroll-free layouts enhance user experience. Make sure content fits within the viewport or use responsive adjustments.



Hi Preetha,

Could you please provide a screenshot of the issue? It would help us better understand the problem.

It seems like the scroll is appearing because the content height is longer than the screen height. One way to resolve this is to reduce the content so that it fits within the screen height, which should make the scrollbar disappear.

Alternatively, the above code changes for adjusting the layout to make sure that the header and footer are fixed to the top and bottom of the screen respectively.

Thanks



Hi Preetha,

demo1/src/app/_metronic/layout/core/configs/dark-sidebar.config.ts

In the above config file, there is an option to set the fixed footer. You can set the option app.footer.fixed.desktop to true.

The layout below will add the attribute in the body tag; data-kt-app-footer-fixed="true"

demo1/src/app/_metronic/layout/layout.component.ts


this.appFooterFixedDesktop = this.layout.getProp("app.footer.fixed.desktop", config) as boolean;
if (this.appFooterFixedDesktop) {
document.body.setAttribute("data-kt-app-footer-fixed", "true")
}

this.appFooterFixedMobile = this.layout.getProp("app.footer.fixed.mobile") as boolean;
if (this.appFooterFixedMobile) {
document.body.setAttribute("data-kt-app-footer-fixed-mobile", "true")
}


Thanks



Hi

After setting up the above value still i can see the scroll then only footer is visible.Typically i want to see the header and footer with out scroll.that means scroll should come inbetween header and footer.after applying this changes also i canot see header and footer with out scroll.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(