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

populating an array with objects

I am working with an array of objects var photos: Photos[] = []; The structure of Photos [] is as follows interface Photos { src: string; width: number; height: number; } I have a component that requires an array of strings export type PhotosArr ...

reactjstypescript

What methods can I utilize to transmit Global variable data from a view to a controller?

In my Angular view file, I have the following code snippet. <!DOCTYPE html> <video id="myVideo" class="video-js vjs-default-skin"></video> <script> var dataUri; var videoData; var player = videojs("myVideo", { controls ...

javascriptangularjshtml

CSS - turn off inheritance for font styling

I am trying to figure out how to turn off the font:inherit property in Ionic's global CSS. This property is causing issues when I try to style text using ng-bind-html, as it adds unnecessary classes to elements like i and bold. I attempted to override ...

htmlcss

List of Nodes with five links

I'm encountering an issue when trying to reference the final node. The expected output is: Linked List with 5 nodes Node Value: Head Node / Next Node Value: Second Node / Last Node Value: null Node Value: Second Node / Next Node Value: Third N ...

javascriptnode.js

Creating a notification for specific choices in a dropdown menu

I am working on a form that includes a select element with multiple options. Depending on the option selected, a different form will be displayed. My concern is if a user starts filling out one form and then decides to select another option, I want to add ...

javascriptjqueryhtmlcssforms

When a specific function is called, the DayPickerRangeController in the airbnb/react-dates library will update the

Is it possible to dynamically set the visible month in DayPickerRangeController after the component has been rendered? I have a 'handleMonthChange' function that I want to use to change the visible month, but setting 'initialVisible' mo ...

javascriptreactjsreact-dates

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

cssangularjsfont-awesome

Vue does not consistently update HTML when the reference value changes

I am trying to showcase the readyState of a WebSocket connection by utilizing a Ref<number> property within an object and displaying the Ref in a template. The value of the Ref is modified during WebSocket open and close events. However, I am encount ...

javascriptvue.js

What is the best way to add a key to a JavaScript array while keeping it reactive in Vue.js?

If there's an array in the state: state: { users: [] }, Containing objects like: { id: 1, name: "some cool name" } To add them to the store using a mutator like users.push(user);, how can we ensure that instead of 0:{...}, it uses the ...

javascriptarraysvue.jskeyvuex

The optimal placement for the business logic of a Chrome extension

As I dive into building my inaugural Chrome extension, a pressing inquiry arises regarding the optimal placement of the main logic and API calls. Given that I utilize React for the popup interface, one potential approach is housing all of the logic within ...

reactjsgoogle-chrome-extensionbusiness-logic

The SpinButton object has an undefined public property called 'value' and the public method 'focus()' is not available

Recently, I've delved into using reactjs, typescript, and Office UI Fabric. However, I'm facing a challenge with one of the components from fabric. In this scenario, I have a simple Product component containing a SpinButton and a DefaultButton. M ...

reactjstypescriptoffice-ui-fabric

Getting started with WebTorrent: A beginner's guide

I have been brainstorming some ideas for using WebTorrent. While I am comfortable with JavaScript and jQuery, I have never ventured into Node.js or Browserify territory. Can someone guide me through how to implement the following straightforward code? var ...

javascriptnode.jsnpmbrowserifywebtorrent

What are some recommended methods for creating an under maintenance page in a ReactJS application?

I am looking to create a maintenance page for my Reactjs Application. The maintenance status information will be fetched from an API. My approach is to place the hook for calling the API in App.js like this: const getMaintenanceState = async () => { ...

reactjsnext.jsaxios

What are the specific constraints for CSS within web components?

<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>someone created a very general selector</p> <isolated-stuff></isolated-stuff> </body> <s ...

htmlcssweb-component

Vue js for filtering and replacing prohibited words

For this scenario, our objective is to screen the words in our input: <input type="text" class="form-control" placeholder="Write something..." v-model="todoInput""> Below are the restricted words that we aim to substitute in the input "restrict ...

javascriptvue.jsvuejs2

Unable to direct to the main page in index.js of the next.js application

I have been working on a next.js application and encountered an issue with a component I created called <ButtonGroup>. I added a button with the code <Button href="index">Home</Button> to allow users to navigate back to the home ...

javascriptreactjsnext.jsreact-bootstrap

What steps do I need to take in order to modify information within a table using Symfony?

Working on my Symfony project, I frequently need to display various views in table format. I wish I could easily update the data by clicking on table cells, entering new information, and saving it dynamically. After exploring jqGrid, DataTable with jEdit ...

jqueryangularjssymfonyjqgridreactjs

The Ajax GIF Loader is not functioning in the latest versions of Internet Explorer and Firefox, but it is running smoothly in

The animated GIF loader functions correctly in the latest version of Chrome, but does not animate when viewed in IE and Firefox. Below is the code snippet: $("#DIALOG").dialog({ buttons : { "Yes" : function() { ...

javascriptjqueryajaxfirefox

Encountering a warning stating "the key specified for the classes property is not recognized" when using class overrides in material-ui v1.0.0-beta-1

I am currently attempting to customize the appearance of Material-UI v1 components by using the method of overriding with classes. However, when I try to modify a nested property such as the :hover pseudo class on the root key, I receive a warning message ...

reactjsmaterial-ui

Customizing the display field in an ExtJs Combobox

I am working on a java web application that utilizes an entity class to populate a combobox with ExtJs. The issue I am facing is as follows: Some entries in the displayField may contain html code. To prevent any issues, I used flexjson.HTMLEncoder during ...

javajavascripthtmlextjsencoding