How to position footer at the bottom of Material UI cards - see example below

After getting inspiration from the material-ui example of cards, I wanted to create a grid layout with multiple cards. My goal was to make all the cards have equal height (which I achieved using height:100%) and position the footer at the bottom of each card. However, my attempt to use a flex column layout did not produce the desired result. The length of the text in the card is affecting the placement of the footer.

If you would like to take a look, I have created a code example showcasing the issue: https://codesandbox.io/s/material-demo-forked-xijum?file=/index.js

I would appreciate any tips or hints on how to successfully display the footer at the bottom of each card.

javascriptcssreactjsmaterial-ui

Answer №1

To ensure all content inside your card element is displayed in a single column, include display:flex and flexDirection: column in the styling.

<Card className={classes.root} style={{ display: "flex", flexDirection: "column" }}>

Add marginTop: auto to CardContent to apply automatic margin at the top.

<CardContent style={{ marginTop: "auto" }}>

You can view a working example here: https://codesandbox.io/s/material-demo-p23d0

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

Check out this unexpected margin issue affecting the first element within the Container! Can you please provide an explanation for this anomaly?

Take a moment to check out this fiddle. In Container1 and Container2, the background color is set to #ccc, and h1 and .logo div have margins. While the left and right margins are working properly, the top and bottom margins are not functioning as expected. ...

htmlcssmargin

Expanding the width of the textfield is not possible in CSS styling

My current search bar design features an input area that does not match my expectations. The input length is restricted and starts from the center rather than the black border I had envisioned. If you'd like to see the code and design in action, chec ...

cssreactjsmaterial-ui

JavaScript: A guide to solving systems of equations

I'm attempting to perform algebraic operations in JavaScript using certain conditions and known variables. However, I lack proficiency in mathematics as well as JavaScript to comprehend how to articulate it. Here are the conditions: var w1 = h1/1.98 ...

javascriptalgorithmalgebra

Bringing in a JavaScript file into a Svelte component

Today, I stumbled upon Svelte and I am really intrigued by the concept. However, I encountered an issue while attempting to import a small helper.js file. No matter what I try, whenever I reference the class, I receive the error: ReferenceError: Helper ...

javascripthtmlimportsvelte

What is the reason for all the buttons activating the same component instead of triggering separate components for each button?

I am facing an issue with my parent component that has 3 buttons and 3 children components. Each button is supposed to open a specific child component, but currently all the buttons are opening the same child component when clicked. The children components ...

javascriptreactjsmaterial-ui

Accessing results from geocoder.geocode is restricted to local variables only

I need to extract longitude and latitude coordinates from google.maps.GeocodeResults in order to store them in an external Array<any>. Currently, I am able to display results[0], but encounter an OVER_QUERY_LIMIT error when attempting to add it to t ...

javascriptangulartypescriptgoogle-mapsgoogle-geocoder

The text alignment in Internet Explorer is off

After testing this website on both Firefox and Chrome, the alignment in the "Releases" section appears to be correct: However, when viewed in Internet Explorer, some of the text seems to be aligned in the center for unknown reasons. I have been struggling ...

htmlinternet-explorercssalignment

Executing a JavaScript function when an HTML page is loaded within an OBJECT Tag

I have a situation where I am loading an HTML page inside an object tag. Since the iPad does not support iFrames, I decided to use the object tag to load external HTML pages into a container. Everything is working well so far, but now I want to be able t ...

javascriptjqueryhtmlobject

What is the function of async in Next.js when triggered by an onClick

Need help with calling an async function pushData() from a button onClick event async function pushData() { alert("wee"); console.log("pushing data"); try { await query(` //SQL CODE `); console.log("Done&quo ...

javascriptreactjsnext.js

Resize a group of images to match the parent's width and height dimensions

I am working with a div that contains variously-sized images and is nested inside a parent container. <div id="parentContainer"> <div id="boxToScale"> <img src="http://placehold.it/350x150" /> <img src="http://placehold.it/150 ...

javascriptjqueryhtmlcss

The renderValue function in ReactJS/Material-UI is not being executed as expected

Having an issue with the select function in a material-table (module that was installed). Also incorporating the Chips component from Material-UI. Oddly enough, the renderValue function doesn't seem to be getting called when selecting something and I& ...

reactjsmaterial-uimaterial-table

`How can I effectively integrate react-i18next with the Semantic UI label element?`

Currently, I am working with Semantic UI along with the integration of [react-i18next][2]. My goal is to enable translation for label strings, but these labels include HTML tags, such as span. Unfortunately, the system only allows hardcoded or variable s ...

javascriptjsonreactjsmaterial-uireact-i18next

The perfect way to override jest mocks that are specified in the "__mocks__" directory

Within the module fetchStuff, I have a mock function named registerAccount that is responsible for fetching data from an API. To test this mock function, I've created a mock file called __mocks__/fetchStuff.ts. Everything seems to be functioning corre ...

javascriptreactjsunit-testingjestjsmocking

What is the best way to connect a series of checkboxes within a form utilizing Angular?

I created a form with checkboxes that allow users to select multiple options. However, when I submit the form, instead of receiving an array of objects representing the checked checkboxes, I'm not getting anything at all. Here is what I see in the co ...

javascriptangulartypescript

What is the best way to place a button within a line of text

I am trying to achieve a layout similar to this: -------------------button------------------ I can add text inside the line, but it doesn't look good when I add a button. Any suggestions on how I can improve this? ...

htmlcss

Tips on integrating Angular's ui-grid with an array of strings

I have utilized Angular ui-grid to display an array of json objects received in the response. However, my current scenario involves getting an array of string values instead. How should I configure the grid for this situation? $http.get(url) .success(func ...

javascriptangularjsarraysui-grid

When I attempt to view my calendar in a modal popup, the opening action causes it

Recently, I encountered an issue with the bootstrap datepicker in a modal pop-up. The problem arises when it gets cut off unexpectedly. I am seeking suggestions or solutions to resolve this inconvenience. <input id="doohMediaStartDate" name="startDate" ...

htmlcssangularjstwitter-bootstrapdatepicker

Looking to reload a div with a captcha in a contact form without the need to refresh the entire page

I have integrated a div tag into my contact form to contain the captcha elements. If the user is unable to read the captcha image, I want to provide them with an option to refresh that specific section without reloading the entire page. I have tried variou ...

javascriptjqueryhtml

Can a gulpfile be written in ES6 syntax?

Question: Is there a way to write my gulp file in ES6 to utilize import instead of require, and use => syntax in place of function()? I have the option to use io.js or any version of node.js. gulpfile.js: import gulp from "./node_modules/gulp/index.j ...

javascriptnode.jsgulpecmascript-6

Mongoose encountering an issue with undefined properties (specifically 'prototype') and cannot read them

I am currently using Mongoose 7.0.1 on Next JS 13.2.2 and React 18.2.0. After tirelessly searching for a solution to my problem, I am still struggling with connecting to a MongoDB. Every time I try to import mongoose into my project for the connection, an ...

javascriptnode.jsmongoosenext.js