A button featuring an extensive label that utilizes text-overflow ellipsis is initially set with a max-width of 700px. However, it should dynamically shrink when the viewport size decreases

My Request

I need a button that can accommodate both long and short labels, with the text getting cut off at 700px using ellipses. The button should adjust to the available space when the viewport is smaller than 700px. The length of the label can vary greatly, but the button width should always match the content, up to a maximum of 700px.

The Issue I'm Facing

Currently, the button fits the text correctly but maintains a fixed width of 700px even as the viewport size decreases.

Check Out My Demo

https://codesandbox.io/s/mui-testing-forked-opmp8?file=/src/App.js

I am utilizing React and Material-UI for this project, although the problem lies within the styling aspect.

Attempted Solutions

I have experimented with various combinations of max-width, width, and min-width on different containers, yet I have not found a suitable solution thus far.

cssmaterial-ui

Answer №1

The solution to the problem I was facing involved adding the CSS property overflow-x: hidden to the box element. Credit for this helpful tip goes to a fellow community member, and they even provided a demo showcasing the fix:

https://codesandbox.io/s/mui-testing-forked-qbcnn

Below is the updated styling code snippet with the necessary change highlighted:

const useStyles = makeStyles((theme) => ({
  box: {
    flex: "1 1 100%",
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    overflowX: "hidden", // Updated line
    // maxWidth: "100%",
    // width: "100%"
  },
  button: {
    width: "100%",
    maxWidth: 700,

    "& .MuiButton-label": {
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      overflow: "hidden",
      textAlign: "left",
      display: "block"
    }
  }
}));

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

Place the div absolutely on top of the Flash content

Can a <div /> be absolutely positioned over a Flash banner without including wmode="transparent" in the banner? I am trying to display a lightbox above my ads, but I cannot make changes to the banners since they are provided by a third party. Edit: ...

javascriptcssflashinternet-explorerxhtml

Replacing the left styling using CSS

Struggling to adjust the position of a side panel that pops up when hovering over an option. This is the code I found in Chrome Developer Tools: <nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show"> <ul ...

htmlcsscss-selectors

The shade of grey on the curve appears instead of the usual red on the iPad. Any ideas on how to fix

I am having trouble creating a curve like the one shown below on my iPad. The color appears to be gray and does not work properly. Is this a bug with ChartJS or is there a solution to fix this issue? This problem occurs when the type value is set to "lin ...

javascriptcssipadchart.jsvisualization

Navigate through previous and next siblings in jQuery until a difference is found

Here's the issue: I have a div with multiple siblings positioned before and after it. For example: <div id="parent"> <div class="invalid"></div><!-- break iteration here !--> <div class="operand"></div> <div cl ...

jqueryhtmlcss

switching the color of a path in an SVG when hovering over a

In the midst of working on SVG, I'm trying to implement a color change effect upon hover. The desired functionality is such that when hovering over the .business div, the color of the SVG business path should also change accordingly as specified in th ...

javascriptjqueryhtmlcsssvg

Transforming CSS styles into Material UI's makeStyles

My CSS styling was originally like this const Root = styled.div` display: flex; flex-direction: row; margin: 0 auto; width: 100%; position: relative; @media (min-width: ${(p) => p.theme.screen.md}) { width: ${(p) => p.theme.screen.md ...

cssreactjsmaterial-ui

Warning message in ReactJS Material UI Typescript when using withStyles

I am facing an issue even though I have applied styling as per my requirements: Warning: Failed prop type validation- Invalid prop classes with type function passed to WithStyles(App), expected type object. This warning is originating from Wi ...

htmlcssreactjstypescriptmaterial-ui

Adjust the CSS property dynamically based on the quantity of items within a div container

Can CSS3 be used to style the children divs of a parent div with specific conditions, such as: If there are 3 divs, apply property x to divs 1 and 2. If there are 2 divs, apply property x to div 1. If there is 1 div, do not apply property x to it. Is jQ ...

jqueryhtmlcss

Animate.css bxSlider text animations

As I am in the process of setting up a slider for my website, I have encountered some issues. I am utilizing bxslider and wished to incorporate animations for the text on each slide by integrating animate.css. Animate.css is quite simple: just add "animat ...

jquerycssanimationbxslider

Enhance the appearance of the circular heading

Is there anyway to customize the look of this rounded header? I am having trouble setting a white background. Update #1: This is my current header HTML code: Here is how it currently appears: I utilized Bootstrap along with some custom CSS. Update #2: ...

csshtmlcss-shapes

Is there a way to replicate this prompt using Material UI?

Just dipping my toes into the world of programming and seeking some guidance. Does anyone know how to create a similar prompt using Material UI? Check out this link for an example: Example ...

reactjsmaterial-ui

Support for ReactJS version 16.4 and Material UI version 4.x synergy

Encountering an issue while trying to run my project locally using React 16.4.1 and material-ui 4.1.1. The error message I am receiving is as follows: TypeError: _react.default.memo is not a function createSvgIcon c:/apps/projects/app/node_modules/@materi ...

reactjsmaterial-ui

Issues have arisen with Google Maps functionality following the API integration, resulting in a blank grey

I am experiencing an issue with Google Maps where it is displaying a grey box or sometimes showing nothing/white. I have tried various solutions found online but none of them have worked for me. Does anyone have a solution? I even attempted to change the ...

javascripthtmlcssgoogle-mapstwitter-bootstrap-3

The alignment of Material-UI Button and ButtonGroup is not consistent

I'm puzzled as to why the Button and ButtonGroup elements are not aligned on the baseline in the code snippet provided. Is there a specific property that can be adjusted on the ButtonGroup element to achieve alignment? <!DOCTYPE html> <htm ...

cssreactjsmaterial-ui

Encountered an Issue: Material-UI reported that the `anchorEl` prop being passed to the component is invalid

Encountered an issue while trying to open a popper in a grid table. Here are the details of the error: Error: Material-UI - The anchorEl prop given to the component is invalid. The anchor element must be part of the document layout. Ensure that the elemen ...

reactjsmaterial-ui

Ensure that the child div with a background color extends all the way to the bottom of its parent div

Having trouble getting two divs inside another one to stretch to the bottom without cutting off content? The goal is for both divs to adjust in height based on whichever one is longer, filling the outer div completely. When the left div (menu) is longer t ...

htmlcss

Distinguishing CSS Variances on ASP.Net Site with Android 4+

I am encountering an issue with my current ASP.Net Mobile Website design. It is rendering correctly on android phones pre 4, iPhones, and Blackberries. This problem requires a bit of setup to explain... CSS tr { color: #00ff00; } #MasterBackButton { ...

asp.nethtmlcssandroid-4.0-ice-cream-sandwich

Validating HTML forms using Javascript without displaying innerHTML feedback

Hey, I'm just diving into web development and I'm struggling to figure out why my innerHTML content isn't displaying on the page. Can anyone offer some assistance? I'm trying to display error messages if certain fields are left empty, b ...

javascripthtmlcss

Injecting CSS into a dynamically created element within a Polymer component using jQuery

Having an issue when trying to add a CSS class to a jQuery created element within a Polymer component. The code for the Polymer component is as follows: <dom-module id="image-add"> <style> .image { height: 100%; } </sty ...

jquerycsspolymer

Add buttons to images to provide further explanations

While browsing the Excel Learn website, I came across a picture that displayed buttons explaining various functions in Excel. By clicking on the picture, a menu would open up to further explain the corresponding button. If you want to see this in action, ...

javascripthtmlcss