When using Material UI GridTile, the actionIcon will not be shown if there is no title present

In my React application, I am utilizing Material-UI GridList to showcase some images. I am interested in adding an IconButton on top of the image in my GridTile component. Currently, I can achieve this by providing the button to the actionIcon prop. However, it seems that the IconButton is only visible when I also provide a title prop. Here is an example with title='image':

https://i.stack.imgur.com/vmnmbm.png

If I exclude the title prop, the overlay containing the IconButton does not appear. Interestingly, using title='' or title={null} yield the same outcome.

Is there an alternative method to place an IconButton on top of the image within a GridTile? My objective is to achieve a layout similar to this:

https://i.stack.imgur.com/ehJyAm.png

Any suggestions or guidance would be greatly appreciated. Thank you!

cssreactjsoverlaymaterial-ui

Answer №1

The GridTile component will show the overlay and actionIcon only if the title returns a truthy value (you can check this around line 200 of the source code here). If the title is null, undefined, or an empty string, it will evaluate to false, causing the overlay not to appear.

A workaround for this issue is to provide a non-empty title that won't affect the display, such as a space (' '). Here's an example showing how you can use a space to achieve this:

<GridTile
 key={tile.img}
 title={' '}
 actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
>

While this is a temporary fix in material-ui v0, a more elegant solution can be found in material-ui v1. In v1, there is a GridListTileBar component that offers precise control over how the overlay, icon, and title are displayed. This allows you to implement your desired behavior without needing workarounds.

It may seem challenging to fully transition to v1 due to the numerous breaking changes. However, if you prefer to migrate partially, you can have both versions coexisting by following this guide here. This way, you can benefit from the new features of GridList in v1 without requiring extensive changes in your application.

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

Breaking down a lengthy series of items into several smaller lists

I have created a <ul> using the code below: function ListItem(props) { return <li>{props.value}</li>; } function ListLinks() { const listItems = footerLinks.map(section => { return section.data.map(({id, name, to}) => { ...

javascriptreactjs

Unable to include Authenticated Routes in react router dom

Currently, I am utilizing react-router-dom to manage routing for users who are authenticated and non-authenticated. However, I have encountered an error in Element due to missing properties. Is there a way to make withoutAuth() function properly for authe ...

javascriptreactjsreact-router-dom

Managing state changes with a slider in ReactJS

I am currently working with the Foundation slider found at this link: click for doc. To access the slider's current value, they recommend using a hidden input like this: <div class="slider" data-slider data-initial-start="50" data-end="200"> & ...

javascripthtmlreactjs

CSS - changing images for the menu based on user interaction

I'm in the process of designing a website and I have a unique challenge - I need to figure out how to create a dynamic triangle below an item on the menu bar using CSS. The catch is that the horizontal position of this triangle will shift based on wh ...

htmlcssmenu

How can we retrieve data from the back-end MongoDB and display it on the front-end using React JS?

I am working on displaying backend data from MongoDB in the frontend and calculating the balance of a specific member. Below is the code snippet: export default function BuySellInfo() { const[xnaLogData,setXnaLogData]=useState([]); const [balance,setB ...

node.jsreactjsmongodbexpress

Clicking on a movie doesn't reveal any details for me

I am encountering an issue where I click on a movie to view its information, but only the details of popular movies are displayed, not the ones I have searched for. Even though the URL indicates that I am viewing the correct movies, no information is shown ...

reactjs

Potential Bug Detected in Internet Explorer on Mouseenter Event

I'm facing a challenge with my HTML/CSS code. I have a carousel that includes two li elements positioned absolutely on each side for navigation but they are not displaying correctly in IE versions 7-9 - they appear behind the main element regardless o ...

jqueryhtmlcssinternet-explorer

Foundation 6: Alignment issues with Top Bar

Exploring Foundation 6 and trying out the sample code. I'm puzzled as to why the "Site Title" is not in alignment with the rest of the top-bar, it seems to be slightly higher up. <div class="top-bar"> <div class="top-bar-title"> ...

csshtmlzurb-foundationzurb-foundation-6

Utilizing unique background images tailored to different screen resolutions

In order to enhance the user experience on my website, I am looking to implement a feature that dynamically changes the background images based on the user's screen resolution. My plan is to use a small snippet of JavaScript within the <head> s ...

javascriptcsssecuritybackground-imagescreen-resolution

A guide on adding a href link to a button within a stepper in a React Material-UI

I am looking to create a functionality where, upon clicking the "Book now" button at the end of a Stepper, the user is redirected to another page instead of seeing the message "Thank you for your interest". Is it possible to achieve this by adding an href= ...

reactjsmaterial-uihrefstepper

Ensuring full height on Bootstrap 4 columns without triggering a scrollbar in the browser

I'm currently working with Bootstrap 4 and attempting to make 3 columns on the page fill 100% height, only displaying scrollbars within the columns and not on the entire page. I have experimented with applying h-100 to the row div, as well as implemen ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to center the background button in bootstrap?

Having an issue with the alignment of the + sign on the bootstrap button, it's not centered as shown in this image : https://i.sstatic.net/lxacy.png. Attempted to enclose the button within a div using justify-content-center align-content-center text ...

cssbootstrap-4

What is the difference in performance between using element.class { ... } compared to just .class { ... } in CSS?

Is there any impact on performance when specifying div.class or p.class instead of just .class if a certain class will only be used on divs or paragraphs? ...

cssperformanceoptimization

Easily transform a CSS file for optimal use on dark backgrounds from scratch

I've got around 200 CSS files that look like this: /** * GeSHi Dynamically Generated Stylesheet * -------------------------------------- * Dynamically generated stylesheet for bnf * CSS class: , CSS id: * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 ...

phpcssalgorithm

Instructions for incorporating a personalized document in NextJs version 13

In order to enhance the design of my upcoming Next.js 13 project, I am looking to integrate a custom design system package. This particular package necessitates the creation of custom documents within the page directory, as outlined in the official Next. ...

javascriptreactjsnext.jsnext.js13

Tips for arranging HTML image sources to prepare for future updates

Incorporated into the HTML are a series of images, each accompanied by text and/or transitions. To streamline positioning, each image set along with other elements (text, video, etc...) is enclosed within a div. Furthermore, every image is labeled with a n ...

htmlcss

Tips for incorporating an image into the background of a mobile device

My attempt to set an image as a background was successful on desktop, but unfortunately, it doesn't work on my phone. I have specified 'cover' as the background-size, expecting it to cover all the space on mobile as well. Here is the code s ...

htmlcssresponsive-designbackground

Adjusting font size in dynamic containers relatively

Imagine we have a slider named .outer, which adjusts its height based on the width of the viewport. Inside this slider, there is an example slide called .inner that contains some text. However, when we shrink the window width, the content in slide .inner s ...

javascriptjqueryhtmlcss

Creating a multiline centered navigation bar item using Bootstrap 4

My navigation bar is functioning properly with single-line items, but encounters alignment issues when dealing with multi-line items: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> ...

csstwitter-bootstrapsassbootstrap-4

Issues Arising with Deploying Gatsby to Github

Encountering some issues with this particular situation. I have successfully downloaded and installed locally, the Gatsby starter pack from: https://github.com/ChangoMan/gatsby-starter-dimension . My goal is to deploy it to my Github webpage: Even thoug ...

reactjsdeploymentgithub-pagesgatsby