Is it possible for the child of mat-dialog-content to have a height of 100%?

Check out this demo showcasing the issue: https://stackblitz.com/edit/stackblitz-starters-tdxfuc?file=src%2Fapp%2Fapp.component.ts

When the content within the mat-dialog-content becomes too tall, I aim to have control over where the scrollbar will be visible. As shown in the image, it currently scrolls the entire mat-dialog-content section, but my goal is to have it scroll only inside the contents of the mat-tab, and not extend beyond the tab group.

https://i.sstatic.net/puwCt2fg.png

The mat-dialog-content has a defined maximum width of 65vh, which translates to 629.85px in this scenario.

https://i.sstatic.net/pBtoSSGf.png

Despite having a width set at 100%, the mat-tab-group still overflows its container (mat-dialog-content) with a width of 1553px, seemingly ignoring the relative height.

https://i.sstatic.net/mLElNnPD.png

I've come across information suggesting that relative height only functions correctly when the parent element has an explicitly set height (here). Is this the root cause of the problem here? And what steps can be taken to address this situation, considering that the proposed solution mentioned in that source (html { height: 100% }) does not seem to apply in this context?

csssassmaterial-uiangular-materialscrollbar

Answer №1

To eliminate the scrollbar, apply overflow: hidden to the container mat-mdc-dialog-content.

Next, set the same container to flex so that its children inherit the parent's height.

Lastly, enable overflow-y: auto to display a scrollbar on the container located below the tabs.

@import '@angular/material/prebuilt-themes/azure-blue.css';

.mat-mdc-dialog-container .mat-mdc-dialog-title + .mat-mdc-dialog-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mat-mdc-dialog-content > :first-child {
  display: flex;
  overflow: hidden;
}
.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content {
  overflow-y: auto;
}

Check out the Stackblitz Demo here!

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 display images on mobile devices using HTML

I recently created a website using HTML and CSS. I have successfully added images to some of the web pages, and they display properly on laptops and desktops. However, I am facing an issue where the images do not appear on small screens, even though all im ...

htmlcss

Is it possible to trigger a mouseover event on a background div that is obscured by a foreground tooltip in jQuery?

I created a unique effect where a background div fades in when moused over, followed by the foreground div fading in. However, I encountered an issue where the tooltip ends up "flashing" as the foreground steals focus from the background. For reference, h ...

javascriptjqueryhtmlcss

Customizing CSS for AGM Info Windows

After creating an agm-info-window with an image and a small text (tittle), here is the code: <agm-marker [latitude]="lat3" [longitude]="lng3" [iconUrl]="icon"> <agm-info-window [disableAutoPan]="true" [isOpen]="true"> <div route ...

cssangulargoogle-mapsagm-map

Angular Material Elevation Not Displaying When Positioned Between Two Components

My Angular project consists of 2 components designed with material design - a header and a body. The header is a toolbar styled using the 'mat-elevation-z4' class: <mat-toolbar color="primary" class="mat-elevation-z4"> <mat-form-field ...

angularangular-material

Is the table not displaying properly in the print preview with a messy

I have a large table with multiple rows. Due to its length, I have provided a link to the jsfiddle where you can view it: jsfiddle. The table is structured in HTML and contains many rows with various attributes. <table> <thead>text here!</t ...

htmlcsshtml-tablepage-break

The height of the content in the polymer core-scaffold cannot be set to 100%

I am working with a polymer element that I have defined. The main objective is to make the conversation_container element have a height of 100% so that the message_box_container can be positioned at the bottom of the entire panel using position: absolute; ...

htmlcsspolymer

The AutoComplete feature of MaterialUI Component fails to function properly even when there is available data

I am facing an issue with my component as it is not displaying the autosuggestions correctly. Despite having data available and passing it to the component through the suggestions prop while utilizing the Material UI AutoComplete component feature here, I ...

javascriptreactjstypescriptmaterial-ui

Looking for assistance with aligning an image in a <td> cell that doubles as a link?

How can I center a play icon in the middle of a td cell and make the entire content clickable as a link, including the background image? I've tried various methods but can't seem to get it right without breaking the alignment. Any suggestions wou ...

htmlcss

How to Ensure an Absolutely Positioned Element Occupies the Full Width of its Container

My main content area has a sidebar positioned absolutely to the right side due to various reasons. However, I am facing an issue where if the main content area is shorter, the sidebar extends beyond the content. Do you know of any CSS technique that can h ...

htmlcsslayout

Is it possible to nest an HTML <span> inside a label tag in a Rails form_for?

Is it possible to nest a span element inside a form_for label tag? I am trying to achieve this in order to style a specific part of the label using CSS, such as making the text red. While it seems like valid HTML based on my research, it is causing some is ...

ruby-on-railscssformshtmlruby-on-rails-3

Create dynamic modals in ReactJS that appear when a row is clicked

Engaged in a project for an undisclosed entity where patient data is retrieved from their API and displayed as modal on the page. Clicking on a modal reveals more threat information in another modal. The objective is for these modals to render based on a c ...

cssreactjstypescript

Using SVG as a background image on Internet Explorer with zoom capabilities

I am having an issue with my SVG used as a background image: <div class="bubble"></div> Here is the CSS I am using: .bubble { background-image: url(https://beta.creasoft.cz/Images/bubble-small.svg); background-repeat: no-repeat; width ...

cssinternet-explorersvg

Incorporating unique typography onto your website (HTML/CSS)

I am currently struggling to implement a custom font on my website. I'm not very experienced with programming, and since my friend isn't available to help, I'd appreciate a solution from anyone. The issue I'm facing is that while the Ca ...

htmlcss

Dealing with Inline Styling Woes

Trying to style a row of buttons on the left, a center-aligned navigation list, and another row of buttons on the right. The navigation buttons are grouped to account for layout changes. How can I horizontally center the navigation within the parent elemen ...

htmlcss

"Troubleshooting a Animation Problem in the Latest Version of

I have discovered an issue with animations on the latest version of Firefox Quantum. Upon loading a page with certain animated elements set to display: none;, when a script changes it to .display = "block";, some parts of the animation may be missed or no ...

javascriptcssfirefoxfirefox-quantum

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

javascriptjqueryhtmlcss

Encountered an issue while trying to access the 'value' property from an undefined field in the available options

When attempting to showcase the value of the select field, I encountered this error message: Cannot read properties of undefined (reading 'value') https://i.stack.imgur.com/Q0d2k.png You can find the codesandbox link here: https://codesandbox.i ...

javascriptreactjsmaterial-ui

Themed CSS for Header in HTML Tables

Looking to add some creative CSS theming to the header of a table? Unfortunately, tables don't support this natively. But fear not – there's a workaround! My solution is to insert an element BEHIND the table head and apply the desired styles t ...

htmlcsshtml-tablez-index

Dynamically adjust the height of a parent div to match its child div's height upon clicking using JavaScript

Within my div element (divChatContainer), there is a top div (divChatContainerTop) containing a "span" element. When this "span" element is clicked, I want the container div to resize to the height of the "divChatContainerTop" (essentially minimizing the c ...

javascripthtmlcss

"Two columns of identical width, each occupying 50% of the screen height

I am currently working on a design featuring two columns, each set to occupy 50% of the width. I am facing a challenge with ensuring that the height of these columns stretches to the full height of the screen, even when they are empty, so I can showcase th ...

javascriptjqueryhtmlcss