PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, November 2, 2022

[FIXED] How to use overflow:hidden in Angular for only one page?

 November 02, 2022     angular, css, html, indexing, overflow     No comments   

Issue

I would like to make my window pane unscrollable. If I set my element to overflow: hidden, I can not scroll on any page, so I tried to do it in the CSS file of the component which I want unscrollable. However, the only way I managed achieve this was adding the unscrollable class name to the element of index.html.

.unscrollable{
    overflow: hidden;
}

However, in that case, all windows are unscrollable wherever I navigate on the page.

I tried to solve the problem by adding the following only to the component's CSS file:

.unscrollable{
    overflow: hidden !important;
}

but to no avail.

Does anyone have an idea on how to solve it? I am very confused by not being able to influence index.html depending on the component, especially since the tag is there.


Solution

This can be done by using angular's Renderer2

You can add overflow hidden css from that component to document's body using this.

import like this

import { Renderer2 } from '@angular/core';

then declare in constructor

constructor(private _renderer: Renderer2)

then use it on ngOnInit()

ngOnInit(){
  this._renderer.setStyle(document.body, 'overflow', 'hidden');
}

this will add overflow hidden to body and page will be unscrollable.

and then make sure to remove overflow hidden from body on that component destroy use ngOnDestroy() to do that

ngOnDestroy(): void {
    this._renderer.removeStyle(document.body, 'overflow');
  }


Answered By - Aniket Gawas
Answer Checked By - Clifford M. (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing