Create table cells made of material that have widths determined by predefined lengths

First, let me showcase my code.

<ng-container matColumnDef="position">
   <th mat-header-cell *matHeaderCellDef> No. </th>
   <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

Everything is functioning perfectly, but I need to display text with a fixed length. For instance, if the text is 50 characters long, I want only 40 characters to be displayed. Each row contains multiple cells of set lengths.

The issue lies in setting the width based on the text length itself. Although I've come across several examples online, most rely on defining column widths in the CSS file. How do I go about achieving this? Any help would be greatly appreciated.

csstypescriptangular-material

Answer №1

To easily accomplish this, you can adjust the width of the td element using Angular's built-in [ngStyle] directive along with a calculation based on the length of the element.

<ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"
      [ngStyle]="{'max-width': ((element.name.length) - 20) + 'ch', 'overflow': 'hidden' }">
      {{element.name}}</td>
</ng-container>

In this setup, the max-width (measured in ch, as explained on MDN) is determined by subtracting 20 from the length of element.name. Additionally, we set overflow: hidden to prevent overflowing text within the table cell.

Below, you'll see a comparison between a fixed table and a normal table.

Fixed table

Normal table

For a visual demonstration, check out this StackBlitz example.

Answer №2

Give this a shot: Feel free to customize the maxCharLength according to your needs. It's worth noting that mat-table does not require the use of <th> or <td> tags.

<ng-container  matColumnDef="position">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let element" [innerHTML]="element.position" [maxCharLength]="40">
        </mat-cell>
</ng-container>

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

Updating the color of specific buttons using ngFor in Typescript and Angular 8

I have successfully implemented a feature where text is displayed word by word using an ngFor directive. Within the ngFor loop, there is an if-else statement that determines whether each word should be displayed as a <span> or a <button>. Now, ...

angulartypescriptngfor

Select the element to emphasize it and reduce the visibility of others

I'm currently facing an issue with a block that contains multiple divs representing products. My goal is to have the selected product highlighted while the rest appear less prominent when clicked. I've managed to achieve this functionality, howev ...

jquerycssonclick

Need to fix the problem of loading SVG files one by one and the issue with fading or replacing them

I'm looking to insert svg files into a single div and I've managed to do it successfully on this link: var div_svg = d3.select("div#example"); svg1 = "https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"; svg2 = "https://upload.wik ...

javascriptcssd3.jssvg

Disable the "top" property for the Material UI Drawer component

I'm currently working on implementing a Persist Left Drawer from Material UI that slides in from the left side. However, I don't want the drawer to cover the entire left side of the page. Essentially, I want to remove the "top" style property men ...

cssreactjsmaterial-ui

Flashing Dropdown Navigation Bar on Internet Explorer and Firefox

Hey there! I have been working with a drop-down menu on various websites without any issues, but for some reason, it's acting up in this specific application (). The menu seems to flicker and is not properly positioned in Firefox and IE8-10, although ...

jquerycssdrop-down-menunavigation

What are some ways to get Angular2 up and running in a newly created distribution directory?

Trying to setup my own Angular2+Typescript (+SystemJS+Gulp4) starter project has hit a roadblock for me. I encountered issues when transitioning from compiling TypeScript in the same folder as JavaScript with access to the node_modules folder, to organizin ...

javascripttypescriptgulpangularsystemjs

How can I make my image shine when the mouse hovers over

I have recently come across a fascinating effect where an image glows up when the mouse hovers over it. This is not your typical border glow, but rather a unique enhancement of colors within the image itself. I discovered a library called Pixastic that can ...

jqueryhtmlcssstylesheetpixastic

Difficulty in displaying JavaScript function output as text

I'm currently developing a program that randomly selects and prints a function from an array list. I am facing difficulties in getting the result to print correctly. Below is the snippet of code: const hiddenElements = document.querySelectorAll( &qu ...

javascripthtmlcss

Guide to building interactive dropdown menus in Angular 8

In my user interface, each row contains three dropdowns for level 1, level 2, and level 3, as well as an "Add Level" button. When the "Add Level" button is clicked, a new set of three dropdowns for level 1, level 2, and level 3 should be added dynamically ...

javascriptangulartypescriptangular8

Dynamically change the fill color of an SVG using styled-components

I've been attempting to target the fill property of my SVG using CSS in styled-components without any luck. Here is my SVG: <svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www. ...

javascriptcssreactjssvgstyled-components

Guide to applying conditional styling to Material-UI TextField

After creating a custom MUI TextField, I implemented the following styling: const CustomDisableInput = styled(TextField)(() => ({ ".MuiInputBase-input.Mui-disabled": { WebkitTextFillColor: "#000", color: "#00 ...

cssnode.jsreactjsmaterial-ui

Can display-inline-block support top margin and text alignment?

Can you please explain if the top margin and text-align properties work for both display: inline and display:inline-block? If they do, could you provide some insight as to why? ...

htmlcssblockinlinedisplay

The div smoothly descended from the top of the page to the center under the control of jQuery

I am trying to implement a feature where a div slides down from the top of the page to the center when a button is clicked. However, my current code seems to be causing the div to slide from the bottom instead of the top. Ideally, I want the div to slide ...

javascriptjquerycssslideslidetoggle

Efficiently utilizing CSS classes

My dilemma involves styling a textfield in two different locations on my website, each with its own parent element. The second location requires an additional margin-top that the first does not. What is a clever way to adjust the original margin-top withou ...

htmlcss

Achieve a disabled scroll bar feature on Firefox

I am experiencing an issue with a Javascript tabbed dialog where the pages have varying heights. Some of them are larger than the browser window. In Internet Explorer, there is always a scrollbar present on the right side. When it is not needed, it appear ...

htmlcssinternet-explorerfirefoxscrollbar

Expanding content to cover the entire width using CSS Bootstrap 5

As a newcomer to Bootstrap, I am working on customizing an existing Bootstrap example. My objective is to expand the width of the div tag (with id "inner") to fill the entire screen. I have experimented with various approaches, such as resetting the margi ...

htmlcsstwitter-bootstrapbootstrap-5

Get the CSS3 Challenge: Achieving a Gradient Background Pattern without the Need for Multiple Divs!

Seeking advice from experienced CSS designers on creating a similar background pattern without relying on div tags like in this example: http://codepen.io/juanbrujo/pen/IrAfF ...

css

Creating a function generator using a string parameter in TypeScript

Is there a way to pass a string parameter to a function and retrieve an object with that key? function getFunction(name: string): { [name]: () => number } { return { [name]: () => { console.log(1); return 2; }, }; } const { m ...

javascripttypescriptfunctiondynamic

Detect when a child li element is clicked and then toggle the class of its parent div

I have a div container that contains an unordered list tab menu. By clicking on each tab, the menu content changes correspondingly. The functionality is working well, but I want to alter the background image of the container div based on which li is clicke ...

javascriptjqueryhtmlcssjquery-ui-tabs

The CSS property :read-only is used on elements that do not have the readonly attribute

Could someone please clarify why the CSS pseudo class :read-only is being added to elements that are not actually readonly? To see an example, check out this link I have tested this in recent versions of Edge, Chrome, and Firefox. All of them apply the i ...

htmlcss