The Mat-Card inside the Mat-Table fails to expand to its full width when using overflow-x property

When I inserted a mat-card in a mat-table and set the width to 100%, I noticed that when scrolling with overflow-x from left to right, the whole wrapper was not completely filled with the mat-card. Can anyone suggest CSS optimizations for this issue?

Here is my code:

// HTML
<div class="app-table-wrapper">
  <table mat-table [dataSource]="dataSource" id="app-table">...</table>
    <mat-card class="change-width"></mat-card>
</div>

// CSS
.app-table-wrapper {
  position: relative;
  background-color: #fbf9f9;
  min-width: 200px;
  overflow: auto;
  padding: 0;
  height: 300px;
}

.change-width {
  width: 100%;
}

View my work here

cssangularangular-materialmat-table

Answer №1

In my opinion, there might be an alternative approach available. One option is to hold off on displaying the mat-card until after the table has finished loading. This way, the mat-card can adjust its width accordingly to match the table's width.

To achieve this, you could utilize a variable for binding with *ngIf within the mat-card tag.

Answer №2

One issue I encountered was that my table wasn't filling up the entire dialog box. To resolve this, I made some adjustments in my SCSS file:

.mat-table {
    width: 100% !important;
}

I also made changes in my template like so:

<mat-table [dataSource]="dataList">
...
</mat-table>

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

Replicate the Bootstrap flexbox grid system with customized media breakpoints

I'm trying to replicate the flexbox grid system found in Bootstrap. Everything is working smoothly except for the media query aspect. The columns are stacking horizontally as intended, but when a specific breakpoint is reached, I aim to have the divs ...

csssassbootstrap-4

A guide to using JavaScript to create a button that can dynamically change stylesheets

Just a heads up, I'm not using classes in this particular scenario. Can't seem to find the answer to this exact question. With javascript, how can I code a button to switch stylesheets every time it's clicked? I've experimented with d ...

javascripthtmlcss

Retrieving Age from HTML5 Date Input in Angular 2+

I need assistance in calculating the age from a date input in an existing form using HTML5 and Angular. I want to achieve this without requiring the user to click anything. Although I am able to retrieve the date, the format is causing issues with my code ...

angulartypescriptdate

jQuery-UI tabs appearing on various elements

My web page layout includes three different divs: header, wrapper, and footer. The header is set to a fixed position. Within the wrapper, there are various components, including some jqueryUI tabs. However, as I scroll down the page, the wrapper and its ...

jqueryhtmlcssjquery-uijquery-ui-tabs

Utilizing the ternary operator in Angular HTML templates

Using the ternary operator in HTML can simplify your code: <div> {{ showStringOneFlag ? 'Display String 1' : 'Display String 2' }} </div> This approach could save you from setting a string variable multiple times in JavaSc ...

htmlangularconditional-operator

Excessive whitespace appearing on the right and bottom edges of the Angular application

I'm fairly new to web development, so this may be a silly question, but I really could use some help. I've created my first Angular app and noticed that there is a lot of white space on the right side of the landing page, as well as at the bottom ...

htmlcssangularsass

Problem: Angular's HttpClientModule is not defined

I am encountering an issue with the HttpClientModule while trying to load this ModuleType in Angular. The error message I receive is related to the registerNgModuleType method. function registerNgModuleType(ngModuleType) { if (ngModuleType.ɵmod.id != ...

angularangular-ngmodel

Tips for displaying an absolute div component on top of a table with a scroll bar visible

I am trying to work with an HTML table that has a scroll feature. When a cell is clicked, a custom component opens. However, I am having trouble getting the custom component to scroll as well. Take a look at my jsfiddle here:: https://jsfiddle.net/rujz69n ...

htmlcss

Eliminating the border of a table that is contained within a cell

I am facing an issue with a nested table where I need to remove the borders from specific cells (around A and B). Here is the code snippet: <style> .withBorders tr td{ border: 1px solid black !important ; } .withBorders table. ...

cssborderparent-child

Error: SVG graphic fails to render in live platform environment

I am encountering a problem with viewing the svg elements in production mode, even though they worked perfectly fine in development mode (localhost). My team and I suspect that the issue lies with gulp. <img src="assets/logo.svg" alt="Log ...

htmlangularsvggulp

Arrange the bootstrap columns in a grid layout both vertically and horizontally adjacent to one another

I need help with displaying my columns in this specific layout https://i.stack.imgur.com/2hzju.jpg Code <div class="row"> <div id="id-orders-stats" class="col-md-6 col-sm-6"> </div> <div class="col-md-6 col-sm-6 stats-box"&g ...

csstwitter-bootstrap

Guide to Setting the Color of a Link Using CSS

I’ve been attempting to change the color of an ALink using CSS, but it seems like I just can’t get it right. It’s clear that I’m missing something, as I’ve spent quite a bit of time tinkering with this seemingly simple issue and still can’t fi ...

htmlcss

Identify the currently active subitem within the item-active class in a PHP carousel slider

I am working on creating an image carousel slider with 4 items and 4 slides each. These images will act as radio buttons, and I want to highlight the slide corresponding to the selected radio button. So, when the carousel loads, the selected slide should b ...

javascriptphptwitter-bootstrapcss

Issues persist while attempting to save sass (.scss) files using Atom on a Mac

When attempting to work with sass files, I encountered an error message every time I tried to save the file: Command failed: sass "/Users/bechara/Desktop/<path of the file>/test.scss" "/Users/bechara/Desktop/<path of the file>/test.css" Errno: ...

cssnode.jsnpmsassatom-editor

What is the secret to planning an event that spans a significant period of time?

Let's say there's this div in the code: <div [hidden]="!isNotificationDisplayed" class="notification"> <h2 align="center" class="set-margin" #notification>Node was...!</h2> <h4 alig ...

javascriptangulartypescript

When the page is fully loaded, I am trying to utilize jQuery with functions like $(window).ready(), but unfortunately, it does not seem to be functioning as expected

Utilizing jquery to dynamically adjust the content on my html page based on the page width. Upon the page being fully loaded (using the $(document).ready(function({\\there is some code here!}));), I aim to execute certain functions. My objectiv ...

javascriptjqueryhtmlcss

What is the best way to ensure the navigation bar stays at the top of the window once it has reached

I have a sample js fiddle provided here. The navigation bar is positioned right below the "Hello World" section, and the content follows beneath the nav bar. Is there a way to make the navigation bar stick to the top of the window once it reaches that poin ...

htmlcssfixednav

In TypeScript, enhancing an interface with additional properties

Currently, I am working on an Angular project and have developed this interface to display some data: export interface UserData { name: string, vorname: string, strasse: string, plz: string, ort: string, handynummer: string, telefonnummer: s ...

angulartypescript

Troubleshooting the Ineffectiveness of AJAX in Image Map Coordinate Hover Feature

I am currently facing an issue with setting up an image map with ajax hover functionality to retrieve information from the database table major_occurrence. Unfortunately, the ajax call does not seem to be working at all. The hover element is clickable and ...

phphtmlcssajaximagemap

Adjusting text alignment to span the entire width with consistent automatic spacing

Imagine if I have a collection of N words. To illustrate, consider the following: Dog Peanut Oranges Lemon Disciplinary All these words vary in length. Let's assume there is a container with a variable width X (the container may adjust its size ac ...

htmlcss