Position the Mui Card Action at the Upper Right corner

Struggling to align a checkbox within a MUI card to the top right? It has been a challenge for me as well. Here is an image of my current layout https://i.sstatic.net/BwH9o.png. I really want that button to be placed in the top right corner, even when the window size changes.

Below is my existing code for creating these cards and the associated styling:

<Card
    key={index}
    variant="outlined"
    className="course card"
>
    <CardHeader
        title={
            <Typography
                className="course title"
                sx={{
                    fontFamily: "Computer Modern Sans, sans-serif",
                    color: "black"
                }}
            >
                {course}
            </Typography>
        }
    ></CardHeader>
    <CardActions disableSpacing>
        <Checkbox size="small" color="primary">
        </Checkbox>
    </CardActions>
</Card>


.course.card{
    margin-right: 1%;
    min-height: 100px;
    max-width: 25%;
    min-width: 20%;
    flex: 1 1 20%;
    border-radius: 15px;
    display:flex;
    justify-content: center;
    align-items: center;
}

Answer №1

Considering that the Card lacks a CardContent, you may want to try including flex: 1 for the CardHeader in order to shift the CardActions to the right, and then style the CardActions to position the Checkbox at the top right corner.

For a simplified demonstration, check out: stackblitz

If you need to further customize the position of the Checkbox, feel free to modify the padding within the CardActions.

<Card key={index} variant="outlined" className="course card">
  <CardHeader
    sx={{
      display: "flex",
      flex: "1",
    }}
    title={
      <Typography
        className="course title"
        sx={{
          fontFamily: "Computer Modern Sans, sans-serif",
          color: "black",
          display: "flex",
          justifyContent: "center",
        }}
      >
        {course}
      </Typography>
    }
  ></CardHeader>
  <CardActions
    disableSpacing
    sx={{
      alignSelf: "stretch",
      display: "flex",
      justifyContent: "flex-end",
      alignItems: "flex-start",
      // 👇 Edit padding to further adjust position
      p: 0,
    }}
  >
    <Checkbox size="small" color="primary"></Checkbox>
  </CardActions>
</Card>

In case CardContent is introduced later, it could be assigned the property flex: 1 instead to preserve the layout.

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

Utilize HTML to resize image to fit within container

I've encountered an issue while working with Adobe Dreamweaver CS5. I added a swap behavior to an image in an html document, expecting it to pop up at its original size and restore on mouse out. However, the swapped image ends up filling the entire sc ...

Develop a DIV element that remains constant throughout different web pages without having to reload

How can I create a non-reloading div at the top of my website that contains an MP3 player which plays continuously while users browse through the site? I am working with Joomla and would like to avoid using Iframes for search engine optimization purposes ...

What steps can I take to ensure that the browser prints out a PDF copy of a webpage?

Imagine you have a website page saved as example.html, and also a printable file named example.pdf. Is there a way to prompt the browser to open and print example.pdf instead of example.html when users attempt to print? If this isn't achievable, how ...

Step-by-step guide: Logging into next js with auth0

Having trouble logging in to a Next.js app with Auth0? I followed the quickstart guide on the Auth0 website, but I'm encountering an error on the login page. <a href="/api/auth/login">Login</a> This is pages/api/[...auth0].js i ...

Guide on extracting a JavaScript string from a URL using Django

How can I extract "things" from the JavaScript URL "/people/things/" without any unnecessary characters? I've attempted inefficient methods like iteration, but struggle with removing the undesired parts of the string, leading to slow performance. Th ...

Tips for transforming a date into a time ago representation

Can someone help me with converting a date field into a "timeago" format using jquery.timeago.js? $("time.timeago").timeago(); var userSpan = document.createElement("span"); userSpan.setAttribute("class", "text-muted"); userSpan.appendChild(document.crea ...

Increase the spacing around the content in a textfield

I'm trying to figure out how to prevent text in a textfield from extending all the way to the end of the field. My setup includes a textfield with a background image and a button positioned on the right side of the textfield. I want to ensure that the ...

Is it possible to deactivate the onclick event following a successful ajax request?

I am looking to disable the onclick event after a successful ajax request. <div class="report_button" id="report_button" title="Reportthis" style="width:65px;height:15px;" onclick="reported_text(user_id,lead_id);">Report</div> This is the div ...

Align the image in the center of the page horizontally

Is there a reason why aligning an arbitrary image horizontally is so challenging (or as one response mentioned, "It is not possible.")? I previously had centered images that were functioning correctly for years; however, suddenly they stubbornly position t ...

Tips for displaying videos with sound when the autoplay has been successfully implemented, but the audio is not working

I've been working on creating a video player with autoplay functionality, but I'm facing an issue with the sound not playing. Here's what I currently have in my code, but it's not behaving as expected: var myaudio = docum ...

"Utilizing the Next.js framework for React to handle context data and efficiently pass values to a custom

I am currently facing an issue with consuming data from context in a custom hook. The problem arises when the data is not ready, causing the hook to default to initial values. How can I ensure that my custom hook updates with the correct values once the co ...

Excluding Gitlab's node_modules from the .gitignore: How to modify and upload a module?

I've added node_modules to .gitignore but now I need to update a module (Searchbar from reactnativeelements). What's the best and cleanest way to push this change to my GitLab repository? Creating a separate folder for the complete module and upd ...

Change the text color of the Vuetify button to customize its appearance

Is there a way to change the default active color for button text in a toolbar using CSS? v-btn(:to="item.path" active-class="v-btn--active toolbar-btn-active") {{item.meta.title}} I attempted to override it with this custom class: .toolbar-btn-active { ...

Tips for implementing a checkbox (with tick/untick functionality) as a replacement for a plus/minus toggle using HTML

Is it possible to use checkboxes instead of plus and minus signs for expanding and collapsing sections? Can the plus and minus symbols be incorporated into the checkbox itself, so that clicking on the checkbox toggles between plus and minus states? Any hel ...

Is there a way to utilize the reset() function within an input form?

Is there a way to automatically reset the textbox when submitting a value? Below is my code: <!DOCTYPE html> <html> <body> <ul id="myList"> </ul> <input type="text" id="myText" value="&q ...

Improving the layout of text by adjusting the width within a flex-box styled card

I have a card with the style property "display: flex;" applied to it along with other stylings, all of which are checked in the snippet below. My goal is for the text within the card to move to a new line once its width reaches either 120px or 7 ...

What is the best way to eliminate shadow effects for all Buttons in MUI?

I'm trying to eliminate the shadows on all buttons within my customized MUI theme, but I'm unsure of the best approach. Can someone guide me on how to achieve this? I attempted setting the boxShadow property to Zero for each Button separately, bu ...

Is it possible to replicate an HTML table using JavaScript without including the headers?

Discover a JavaScript snippet in this stack overflow post that allows you to create a button for automatically selecting and copying a table to the clipboard. When pasting the data into an Excel template, my users prefer not to include the header informat ...

ClickEvent (or element selector) is experiencing functionality issues

I'm currently working on creating a small calculator using HTML, CSS, and JS. However, I'm facing an issue with selecting buttons of the calculator from the HTML script and adding EventListeners to them. Here is a snippet of my HTML code: `< ...

Revamping the purpose of a function found within an HTML <script> tag

index.html: <script id="change"> function methods(){ return 1; } </script> js.js: ... button.addEventListener("click", ()=>{ document.querySelector("#change").innerHTML = ` function ...