The fix for the unresponsive fixed container in Angular 2 Material

I've encountered an issue with CSS and Angular 2 material. Any element with a fixed position doesn't behave as expected inside an md-sidenav-container. However, when it is placed outside the container, it works perfectly. I have created a Plunker demo to illustrate this problem:

Simply copy and paste the md-toolbar into the container to see the difference.

Check out the live demo here

It seems that if any HTML element (including Angular Material components) is within the container, the fixed positioning fails and the element either stays in place or disappears (acting like position: relative). Am I overlooking something or could this be a bug?

Any insights would be greatly appreciated. Thanks!

cssangularangular-material

Answer №1

Not sure if it's a bug or just expected behavior, but I ran into the same issue a few months back. The workaround that worked for me was setting the css property height: 100% on the following elements (assuming your sidenav is at the root level): html, body, main.

Make sure to place every fixed element inside the <md-sidenav-container> tag, and that should do the trick.

I would have loved to make changes in your plunker, but systemJS seems to be generating a strange DOM with multiple instances of <html>, <body>, etc. You'll need to apply height: 100% on all parent tags of your <md-sidenav-container>.

UPDATE

Don't forget to also give <md-sidenav-container> the style of height: 100%. To tackle the double scrollbar issue, try using overflow-y: auto on <md-sidenav-container>.

However, this might not completely resolve the problem because of the unique nature of systemJS's DOM. If you can work without it, I would recommend trying a project without systemJS. Unfortunately, if you must use it, I may not be able to offer further assistance.

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

Tips for maintaining the webcam video in the center of the screen even when the height is set to 100% and the window is being resized

When using React, I encountered an issue with centering a webcam video while maintaining its height at 100% of the screen. Although the video fills the screen vertically correctly, adjusting the width of the window causes the video to lose its centered pos ...

htmlcssreactjs

datepicker in bootstrap 4 obscured by the div

I am currently utilizing Bootstrap datepicker v4. However, I am facing an issue where the datepicker view is getting hidden behind the 'map' div. I have attempted to solve this problem by adding overflow: visible, but unfortunately, it does not s ...

jqueryhtmlcssbootstrap-4leaflet

Imitating elegant angular input styles

Just before launch, the higher-ups have decided that they prefer a modern aesthetic for input controls - underlines rather than boxes, with labels that slide out of the way when the input is in focus. Check out the effect on this page: https://material.an ...

angularangular-forms

Is there a way to adjust the border color of my <select> element without disrupting the existing bootstrap CSS styling?

In my Bootstrap (v4.5.3) form, the select options appear differently in Firefox as shown in the image below: https://i.sstatic.net/3suke.png Upon form submission, I have JavaScript code for validation which checks if an option other than "-- Select an Op ...

javascripthtmlcssbootstrap-4

Showing a cell border when a radio button is chosen

I am working with a table that contains input/radio buttons, and I am trying to figure out how to apply a border to a specific cell when the user selects the radio button within it. This will give the appearance of the cell being selected. I am not sure ho ...

htmljquerycss

Achieving horizontal scrolling for tables without using div wrappers

Whenever the width of tables in my articles exceeds the available space in the webpage layout, I wanted to enable horizontal scrolling. Despite trying to accomplish this with CSS alone, I was unsuccessful. As a result, I resorted to enclosing everything i ...

htmlcssoverflowcss-tables

What is the best way to show/hide group items in a PrimeNG dropdown menu?

Is it possible to show or hide group items when clicking on the group header if the group contains items? For instance, I would like to display 3 items (AA, BB, CC) in a dropdown menu. The first 2 options (AA and BB) should be selectable, but when I click ...

angulartypescriptdrop-down-menudropdownprimeng

In Firefox, right floated elements vanish when utilizing columns

Utilizing the ol element with column-count and column-gap properties to organize the list into 2 columns, each list item contains a span element floated right. However, I am encountering an issue where the span element is not displayed for certain items li ...

htmlcssfirefox-quantum

Unable to utilize SASS variables in Angular from a global file, even though other styles are functioning correctly

After implementing the SASS code in my component's style, it functions correctly. $test-color: pink; div{ background-color: $test-color; } However, when I transfer the definition to styles.scss, the desired outcome is not achieved. I have attempted u ...

cssangularsass

How can I turn off the animation for a q-select (quasar select input)?

I'm just starting out with Quasar and I'm looking to keep the animation/class change of a q-select (Quasar input select) disabled. Essentially, I want the text to remain static like in this image: https://i.stack.imgur.com/d5O5s.png, instead of c ...

javascriptcssvue.jsquasar-framework

Exploring the Contents of an ASP ListView

I am attempting to align the odd-numbered items to the left using float:left, and the even-numbered items to the right using float:right. However, it seems like every item is being considered as odd AND element 1 regardless of the actual order in the list. ...

c#htmlasp.netcss

Issue encountered while setting up controls and AbstractControls in form development

Here is a snippet of code showing how I create and manipulate a form in Angular: this.myForm = new FormGroup({ points: new FormArray([ new FormGroup({ date: this.date, startTime: new FormControl(null, Val ...

angulartypescriptangular9

Can you provide examples of design patterns commonly used in HTML and CSS?

Starting out with Ruby on Rails is exciting, but I am feeling overwhelmed by CSS and HTML. While there are plenty of books on CSS and HTML patterns, I am more interested in learning what is actually used on real webpages. For example, when creating a simpl ...

htmlruby-on-railscss

How can I implement 'blocked tails' using the :after pseudo-element?

Apologies, I'm uncertain of the right term for these elements. I have a module that reveals another box with information when hovered over. I want them to be visually connected by an angled rectangle or tail to indicate their association. Something a ...

jqueryhtmlcss

What is the best way to verify the presence of a route in Angular with Jasmine testing framework?

I'm currently in the process of developing a test to verify the presence of a specific route within my Angular application using Jasmine: import { routes } from './app-routing.module'; import { UsersComponent } from './users/users.comp ...

angularunit-testingjasmineintegration-testingangular2-routing

Tips for adjusting the font size of a Chip using Material-UI

I am using a widget called Chip const styles = { root:{ }, chip:{ margin: "2px", padding: "2px" } } const SmartTagChip = (props) =>{ const classes = useStyles(); return( <Chip style={{color:"white&q ...

javascriptcssmaterial-ui

CSS hover effect ceases to function after the button has been clicked once

I am facing a dilemma with styling that I can't seem to resolve. There is a basic toggle feature on my page with two options -- the user can select either Toggle1 or Toggle2, resulting in different data being displayed dynamically based on the active ...

javascripthtmljquerycss

How to prevent right-clicking on an entire website using Angular, not just specific pages

I have been searching for a solution to disable right-click on my entire Angular 2+ application, but all I can find are solutions that only work for specific components such as, <someSelector appDisableRightClick></someSelector> Where "someSel ...

angular

Using jQueryUi Tabs for Organizing Div Tables

Recently, I implemented a jQuery tab on my website using the following code snippet: <div id="tabs"> <ul> <li><a href="#tabs-1">Basic Info</a></li> </ul> <div id="tabs-1"> ...

cssjquery-ui

Having trouble with Material Angular NavBar not being mobile-responsive on iPhone browsers?

Exploring the world of Material Design with Angular is my latest interest. I stumbled upon this helpful guide on Angular Material from codepen and decided to give it a try. However, as I tested the code on different platforms, I noticed that while it was r ...

angularjsmaterial-designangular-material