Activate the Scrolling Feature in Angular Version 7

I am facing an issue with Angular 7 where scrolling is disabled for some unknown reason. I am not sure if this problem is related to using router-outlet or something I have implemented in the CSS.

Below, I am sharing the code for one of my components. All components use similar CSS for the container div.

The issue arises when a component is placed in the router-outlet and its content exceeds the screen size. In such cases, there is no scrollbar provided, causing users to be unable to scroll down to view the offscreen content.

Here is part of app.component.html:

<app-navigation></app-navigation>
<router-outlet></router-outlet>

And here is an excerpt from view-ratings.component.html:

<div class="container" >
    /* lots of content */
</div>

For view-ratings.component.css:

.container {
    position: fixed;
    top: 7em;
    width:90%;
    max-width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    display: flex;
    flex-wrap: wrap;
}
cssangulartypescript

Answer №1

It seems like your container is fixed and may be extending beyond the bottom of your page. The .container element cannot create a scroll bar for a fixed box. One potential solution is to adjust the position of the bottom of your box by adding bottom: 5px, as shown below:

.container {
  position: fixed;
  top: 7em;
  width: 90%;
  max-width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;
  /* solution */
  bottom: 5px;
  overflow: auto;
  
  /* style */
  box-sizing: border-box;
  background-color: red;
  padding: 15px;
  
}
<div class="container">
  [Lorem ipsum text omitted for brevity]
</div>

Alternatively, you can try setting your box's position to absolute instead of fixed, allowing the body to create the scroll bar. Here is an example:

.container {
  
  top: 7em;
  width: 90%;
  max-width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  display: flex;
  flex-wrap: wrap;
  /* solution */
  /* position:fixed; */
  position: absolute;
  overflow: auto;
  
  /* style */
  box-sizing: border-box;
  background-color: red;
  padding: 15px;
  margin-bottom:50px;
  
}
<div class="container">
      [Lorem ipsum text omitted for brevity]
    </div>

The best approach will depend on the specific outcome you are aiming for.

I hope this information proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to collapse the bootstrap navbar on a targeted screen size

My intention was to collapse the Bootstrap navbar when the screen width reaches 1280px. However, instead of collapsing, the navbar appears at the top. Here is the code snippet I am using: body { padding-top: 90px; ...

htmlcssbootstrap-4navbar

Encountering difficulties running Angular application because of errors related to ɵɵinject and ɵɵdefineInjectable during compilation

Encountering this issue after running npm install: +-- UNMET PEER DEPENDENCY @angular/[email protected] +-- UNMET PEER DEPENDENCY @angular/[email protected] `-- [email protected] Getting this error after compiling: WARNING in ./node_mod ...

javascriptangularnpmangular6node-modules

Analyze two sets of JSON data and compile a new JSON containing only the shared values

I am trying to generate two JSON arrays based on a shared property value from comparing two sets of JSON data. this.linkedParticipants =[ { "id": 3, "name": "Participant 2", "email": "<a href="/ ...

javascriptjquerytypescript

Accessing value from an Angular response can be achieved by extracting the desired

Is there a way to correctly assign the value of the user_id from my response to the user_id variable? Here is an example of my response data: {"token":"1a68322c4cad219c94d9554e30e4c8a00339e428","user_id":23,"username":"test5","first_name":"test5","email": ...

angularrouter

Nav bar taking up full width of page, centered to the right with content area

I am facing an issue with aligning my full-width navbar with my fixed content area. The ul keeps changing based on the browser or resolution. Check out this fiddle for reference: http://jsfiddle.net/fwyNy/ subject site CSS Code: #topribbon{ width: 10 ...

htmlcssnavmenubarnavbar

What is the best way to create horizontal lines that span multiple Bootstrap columns?

I am working with a Bootstrap grid that consists of three columns in a row. My goal is to add a line across all columns under every row of content written in the columns. <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.boo ...

htmlcssbootstrap-4

What is the best way to position the 'search' box on the right side of an Angular mat table?

Utilizing mat-card, I need the add button and search box to be aligned horizontally in a single line. Specifically, I want the add button on the left side and the search box on the right side. I have crafted the following html structure, but unfortunately ...

htmlcssangularformsmat-table

Safari does not support the use of nth-child

My CSS code is functioning properly in Firefox and Chrome but not in Safari (5.1). Even though I have confirmed that Safari supports nth-child, it still does not work. Can someone please help me identify what I'm doing wrong? CSS: option:nth-child ...

htmlcss

Adjusting the height of flex items to 100%

I'm currently diving into the world of flexbox by exploring various tutorials. Here's an example I created without utilizing Flex. Instead, I relied on float:left. Check out the example: https://jsfiddle.net/arhj8wxg/4/ I attempted to convert t ...

htmlcssflexbox

Issue with importing service layer into child component

I have created a service layer that calls a REST API to fetch some data. Everything works fine when I import this service in app.component.ts, but I encounter an error when I try to import it in a child component called user-credentials.component.ts: ERRO ...

angular

Identifying browser with appCodeName to apply specific CSS styling

My task was to detect which browser is being used and then load CSS files depending on the specific browser. I decided to accomplish this using JavaScript. However, I encountered a problem where regardless of the browser I use, it always displays "Mozilla" ...

javascriptjqueryhtmlcss

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...

htmlcssmarginpaddingspacing

Halt a CSS spin animation gracefully

In order to create a smooth rotation effect for an image in my HTML page, I've created a CSS class named 'rotate' that rotates the image indefinitely. Here is the code: .rotate{ animation: rotation 2s infinite linear; } @keyframes rota ...

javascriptjquerycsscss-animations

Encountering an error consistently when assigning an interface to an object in Typescript

Encountering an issue when assigning an interface to an object in TypeScript. I have defined two interfaces as shown below. export interface UserInfo { firstName: string, lastName: string, lastUpdateTime: string, status: string } export i ...

javascriptangulartypescripttypes

Challenges transitioning syntax from Firebase 4 to Angularfire2 in Angular 4

Currently, I'm in the process of updating my Angular 2.3.1 and Firebase 2.x.x project to the newest version. However, I'm encountering difficulties with syntax and imports. I've been exploring resources like https://github.com/angular/angula ...

angularfirebasefirebase-authenticationangularfire2

An error occurred in the code while working with a React functional component defined as an arrow function

I am encountering an issue with the code below that is producing this error message: Type '() => void' is not assignable to type 'FC<{}>'. Type 'void' is not assignable to type 'ReactElement<any, any> | nul ...

reactjstypescript

What is the method for storing the values of a Select tag from react-select into a state?

I am currently facing an issue with setting values that I receive when selecting multiple items from a tag using "react-select". The state outcome I am looking for when selecting values from the tag should be: ['user._id', 'user._id', & ...

javascriptreactjstypescriptreact-functional-component

Incorporating information into the output of an HTTP request with Angular 7

I have a list of asset IDs (assetIDs) and I need to fetch data using these IDs. Each HTTP request returns one or more datasets. My goal is to include the request ID in each dataset and then return the data. The process of fetching and returning the data i ...

javascriptangulartypescripthttprxjs

Exploring the Power of Map with Angular 6 HttpClient

My goal is to enhance my learning by fetching data from a mock JSON API and adding "hey" to all titles before returning an Observable. Currently, I am able to display the data without any issues if I don't use the Map operator. However, when I do use ...

javascriptangulartypescriptrxjs

Advanced background styling in CSS

I am looking to design a link with inner shadows on both sides (left and right) while keeping the rest of the item transparent. My desired effect is illustrated below: The challenge I'm facing is that I do not know the exact width of my link in adva ...

cssbackgroundbackground-image