How can I add an ellipsis to a title within a Material UI CardHeader?

Currently, I am utilizing the Material-UI library and facing an issue with applying ellipsis to the Typography component within the CardHeader. Despite trying to use noWrap in the titleTypographyProps, the expected behavior is not achieved.

I wonder if there is a need to override the default settings in CardHeader. I experimented with setting max-width: 100% on both the CardHeader and the Typography component inside it, but unfortunately, it did not yield the desired result.

Check out the demo here:

https://codesandbox.io/s/determined-archimedes-p8pvj?fontsize=14&hidenavigation=1&theme=dark

cssreactjsmaterial-ui

Answer №1

The problem lies in the MuiCardHeader-content flex property. To resolve this issue, add a specific width to ensure it displays properly within its parent element.

.MuiCardHeader-content {
    flex: 1 1 auto;
    width: 100%;
}

Answer №2

To further elaborate on @Awais's answer, adjusting the content CSS class for the header like so:

.header-content {
    display: contents;
}

Will ensure that your header can properly display ellipsis even when using an icon.

Answer №3

Dealing with a flex issue caused by an avatar and an action icon, I had to experiment with a different approach until I found a solution that worked:

Here is the code snippet that needs to be added to the CardHeader component:

    sx={{
      '& .MuiCardHeader-content': {
          display: 'block',
          overflow: 'hidden',
       },
    }}

    titleTypographyProps={{
      noWrap: true,
      textOverflow: 'ellipsis',
    }}

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 efficiently adding an object along with its key to a new array by utilizing the spread operator

I am having trouble with adding a new element to the array in my code. The bug notification is confusing me and preventing it from working as expected. My goal is for a new card to show up when the user clicks on the color picker input, enters a title, and ...

material-uiuuiduse-state

Exploring Next.js 14: Leveraging localStorage with SSr and Sequelize

Using Next.js 14 for my current project, one of the key features is the ability to add products to favorites, with their IDs stored in localStorage. In the Page.jsx file (located at /favorites), the code snippet below can be found: import { getFavoritePro ...

reactjsnext.jslocal-storageserver-side-renderingclient-side

Having trouble executing the npm start command for ReactJS

Below is the code snippet from my file named server.js if(process.env.NODE_ENV !== 'production') { require('dotenv').parse() } const express = require('express') const app = express() const expressLayouts = require(' ...

javascriptnode.jsreactjsmongodbnpm

maintaining a specific variable within React

I am working on integrating pagination into my app. I have written the code below, but unfortunately, I am encountering an issue. Below is the implementation of my useEffect: useEffect(() => { let x = null; const unsubscribe = chatsRef . ...

javascriptreactjsreact-native

What sets apart :first-child from :first-of-type?

I need help understanding the distinction between element:first-child and element:first-of-type Let's consider a scenario where you have a div element div:first-child → Refers to all <div> elements that are the first child of their parent. ...

csscss-selectors

Rendering only a portion of a component when the state updates using MobX or SWR Mutation

Issue: I am facing a problem where updating the state in MobX or calling a mutation in SWR causes all components to re-render, but I want only one element to update. For example, in the React sandbox, rendering happens twice when selecting an element (lik ...

reactjsnext.jsrenderingmobxswr

Tips for showcasing content by hovering over buttons with the help of Bootstrap3 and Jquery

My code and fiddle are currently set up to display buttons when hovered over, but I want to modify it so that only the relevant button is displayed when a specific text is hovered over. For example, if "Water" is hovered over, only the button for Water sho ...

javascripthtmljquerycss

Discover the impact of images.google.com on enhancing your image gallery

I am currently working on creating a website that features an image gallery. When a user clicks on a thumbnail, I want a hidden div to slide out and display more information about the image, possibly even including a slideshow. After extensive searching o ...

jqueryhtmlcssimage-gallerygoogle-image-search

Missing inkbar in Material UI tabs when using ReactJS

For some reason, the small inkbar is not appearing under this tab. I suspect it might be a css issue that I can't seem to figure out. It's possible that I'm missing something I don't know about or maybe the height of the tab is too high ...

cssreactjsmaterial-ui

Troubleshooting Material-UI: The Mystery of the Missing Dialog

I have been struggling with getting a pop-up dialog to appear when a form is incorrectly filled out. Despite my efforts, the code that should trigger the dialog upon submission does not seem to be working as expected. The function renderError(), responsib ...

javascriptreactjsmaterial-ui

Choose the descendant element of the element that has a specific attribute

One of the issues I am facing is related to a button with a span tag inside for the text. Occasionally, this button might be disabled, and my goal is to have it appear grey when in that state. However, I am encountering difficulties making this work proper ...

csshtmlattributescss-selectors

Move the DIV element to the bottom of the webpage

On my website, I have implemented a countdown timer and a responsive wallpaper. My goal now is to center the div at the bottom of the page and make sure it always stays there. I've tried some code snippets from StackOverflow, but they either gave me a ...

htmlcss

JS not functioning properly in specific pages causing display issues with page height set to 100%

I am facing an unusual issue where certain pages do not stretch to 100% page height in the middle section, causing the left-hand border to be incomplete. For example, on the 'Brentwood' site (please click on the 'Login' link in the top ...

javascripthtmlcss

What is the best method for retrieving the value of a selected option using React hooks?

Here is a snippet of my React Component: const ProductCell = (props) => { const [option, setOption] = useState(); return( <div> <NativeSelect value={option} onChange={e => setOption(e.target.valu ...

reactjsreact-hooksmaterial-ui

The ConnectedRouter component, which is a type of Router, allows only a single child element in its structure

Code snippet from my App.tsx file using react-router 4: import { Rate } from 'antd' import * as React from 'react' import './App.scss' import { Route, Switch } from 'react-router' // react-router v4 class App exte ...

reactjsreduxreact-routerreact-router-redux

Switching the image on click of an option tag

I'm looking to create a dynamic image changing feature using two select tags in my HTML. One select tag is for the model and the other is for the color. When a user selects a model from the first dropdown, I want the image to change to reflect that mo ...

phpjqueryhtmlcssimage

Component in NextJS

Is there a way to automatically refresh a remote JSON every 30 seconds in NextJS? I had it working smoothly in ReactJS, but after migrating to NextJS, errors started popping up. The issue seems to be related to certain elements that work fine in my ReactJ ...

node.jsreactjsnext.js

Is there a way for me to utilize the imported data from one component in the context API using an arrow function?

I am trying to utilize placeInfo, reviews, detailsInfo, news from a data file. Instead of using value='hello', I am unsure if I can directly use it like this: value={placeInfo, reviews, detailsInfo, news}, as it is producing an error. Should I st ...

javascriptnode.jsreactjs

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

My current situation involves creating several panels that are stacked side by side within a main container. Each panel takes up 100% of the viewport width and height. I want to be able to horizontally scroll to each panel when clicking on their respective ...

javascriptjqueryhtmlcssviewport

Ways to incorporate horizontal scrolling into a flex container within a Bootstrap navigation bar

I am encountering an issue with my Bootstrap navigation menu that uses a flex container (). The goal is to have horizontal scrolling for the menu items when they surpass the width of the container. I have implemented the following CSS style on the containe ...

htmlcssbootstrap-5