The table is too wide for its parent mat-nav-list, stretching to 100%

Here is the code snippet I am using to display a table inside a mat-nav-list:

<mat-nav-list>
    <table>
        <tr>Node Information</tr>
        <tr>
            <td>Name</td>
            <td *ngIf="activeNode">{{activeNode.Name}}</td>
          </tr>
        <tr>
            <td>AutomationId</td>
            <td *ngIf="activeNode">{{activeNode.AutomationId}}</td>
        </tr>
        <tr>
          <td>ClassName</td>
          <td *ngIf="activeNode">{{activeNode.ClassName}}</td>
        </tr>
        <tr>
            <td>ControlType</td>
            <td *ngIf="activeNode">{{activeNode.ControlType}}</td>
        </tr>
      </table>
    <mat-accordion>
        <app-tree-display  [nodeElements]="nodeElements" (clickedNodeCallback)="clickedNode($event[0])"></app-tree-display>
    </mat-accordion>
</mat-nav-list>

This is how it currently looks:

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

I want the table to occupy the full width of the mat-nav-list, but when I set the width to 100%, it expands beyond the parent element like this:

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

Is there a way to restrict the width to match that of the parent element?

htmlcssangularangular-material

Answer №1

To adjust the width of your mat-nav-list, simply include the desired custom width below the border style declaration

    table{
    width:100%;
    }
    mat-nav-list{
    display:block;
    border:1px solid;
    /*width:600px;  this is an example*/
    }
    <mat-nav-list>
        <table>
            <tr>Node Information</tr>
            <tr>
                <td>Name</td>
                <td *ngIf="activeNode">{{activeNode.Name}}</td>
              </tr>
            <tr>
                <td>AutomationId</td>
                <td *ngIf="activeNode">{{activeNode.AutomationId}}</td>
            </tr>
            <tr>
              <td>ClassName</td>
              <td *ngIf="activeNode">{{activeNode.ClassName}}</td>
            </tr>
            <tr>
                <td>ControlType</td>
                <td *ngIf="activeNode">{{activeNode.ControlType}}</td>
            </tr>
          </table>
        <mat-accordion>
            <app-tree-display  [nodeElements]="nodeElements" (clickedNodeCallback)="clickedNode($event[0])"></app-tree-display>
        </mat-accordion>
    </mat-nav-list>

If you prefer a fluid width (100% auto), do not specify the width in the stylehttps://i.sstatic.net/x0KyC.png

For a fixed width of 600pxhttps://i.sstatic.net/H6gdN.png

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

In Angular 9, when using ngOnChange, the attribute SimpleChanges.firstChange will always be false even if the value has been

There is a specific task I am trying to accomplish with my component. I need to execute a certain action only the first time the @Input property changes. However, I have encountered an issue where the value of changes.firstChange always returns as false, r ...

angularngonchanges

What happens when absolute positioning looks for "relative" inside nested divs?

I'm struggling to grasp the concept of nested divs and how they work together. I understand that when you have a "position absolute" element inside a "position relative" element, the former looks for the latter as its reference point. But what happens ...

htmlcss

I'm curious as to why styled components weren't working before

I'm attempting to utilize the before on styled components in React, but it doesn't seem to be functioning correctly. Prior to adding before, the background image was displayed, but after its inclusion, the image is no longer showing up; import st ...

javascripthtmlcssreactjs

Creating an AI adversary for a simple Tic Tac Toe game board: a step-by-step guide

Being new to programming, I recently completed a basic Tic Tac Toe gameboard successfully. However, as I progress to the next phase of my assignment which involves implementing an AI opponent, I encountered several challenges. As a novice in programming, ...

javascripthtmlcss

Elements on the page are being truncated beyond the visible viewport

Encountering an issue with a web page I'm currently developing that is proving challenging to explain. The problem occurs when the page is viewed in a small browser window and cuts off when scrolling horizontally to content outside of the viewport. Wh ...

htmlcss

A guide to spinning an image in every direction with CSS

I'm working on rotating an image in all directions using CSS and Vue.js. To demonstrate this, I have created a CodePen with the necessary code below. <div id="app"> <v-app id="inspire"> <div class="text-xs-center image-rotation" ...

htmlcssvue.jssass

Rejuvenate a just-launched window.open starting from the about:blank

After receiving data from an ajax result, I am trying to open a pdf in a new window. However, the pdf viewer is only displayed if I manually resize the window (using manual hotspot resizing). How can I ensure that the contents display properly in its popu ...

javascripthtmlajaxwindow

Creating a dynamic and adaptive horizontal SVG line for your website

Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are ...

htmlcsssvg

Having trouble with CSS and javascript files not resolving after moving app to a new Windows 7 development machine

I have recently migrated my ASP.Net 3.5 web site from my old XP sp3 machine to a new Win 7 64-bit dev machine. The web application utilizes Master Pages, App_Themes with style sheets and images, as well as an image folder located off the main root. Additio ...

asp.netjavascriptcss

Adjustment of Image Placement

I'm describing my desired outcome briefly - I want the inputs in the code to appear in the top left corner of a large image. Despite trying multiple approaches, I have been unable to achieve this layout. When considering 2 columns, the inputs should b ...

htmlcsscss-position

Leverage native dependencies in AWS CodeBuild for an Angular project

I am facing an issue with a build project on CodeBuild. One of the dependencies required for the project is located on the build machine itself, specifically in my own directory. The specific section in package.json that mentions this dependency is: &quo ...

angularamazon-web-servicesnpmaws-codebuild

Bringing tex2max.js into an angular application using npm and index.html

Every time I attempt to import tex2max with the command declare var tex2max: any;, I encounter a ReferenceError: tex2max is not defined. Interestingly, this issue does not arise with other npm packages. Despite trying various methods such as installing the ...

javascriptangularnpmimport

What is the best way to insert a hint into an asp:textbox?

Is there a method to insert a hint or placeholder text within an asp:TextBox element? I am looking for a way to have text appear in the textbox that disappears when the user clicks on it. Can this be done using html / css? ...

asp.netcsshtmlplaceholderhint

Revealing elements with AngularJS ng-show directive prior to concealing them

Currently, I am in the process of implementing a slide effect for bootstrap badges to showcase hierarchical data relationships using AngularJS. My goal is to have a slider-effect that smoothly reveals new sub-categories while concealing previously open su ...

javascriptcssangularjstwitter-bootstrap

Open a new window using the HTML <a> tag and pass POST values

I need to open a new window and send a POST value to a PHP file. For example: <a href='URL.php' target='_blank'> This is a link </a> How can I achieve sending a POST value? Edit: I have already tried the following method ...

phphtml

Hide the <footer> element unless there is extra space

I am trying to create a footer that only appears when the viewer has scrolled to the bottom of the page. This means that if you haven't reached the bottom yet, the footer is not visible. The concept seems simple enough, but as I am still in the learni ...

htmlcssfooter

Showing the Enum name rather than the value in an Angular HTML template for a bound Typescript Interface

After retrieving an array of objects with various properties from a .NET Controller, I am utilizing the following Typescript code: import { Component, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Co ...

angulartypescript

Setting up Firebase in an NX Workspace

Looking for a way to set up an Nx Workspace with Firebase that can deploy multiple applications within the monorepo. Ideal file structure would resemble something like this: https://i.sstatic.net/oKJrT.png To deploy the various applications, hoping to pas ...

angularfirebasedeploymentnrwl-nxnx-workspace

Tips for having <script> update onchange instead of just onload

Is there a way to update the output of the <table id="mortgagetable"> each time a user changes the input values in the form? Currently, it only updates on load. Additionally, the content of the <div id="years" style="display:inline-block;">25 ...

javascriptjqueryhtml

Has CSS3 been recognized as an official standard?

Can you confirm whether CSS3 has been officially recognized as a W3C standard or is it currently in the status of "CR" (Candidate Recommendation)? ...

cssw3c