CODEWITHSUNDEEP
javascriptreactjsmaterial-design
Broken Mind
Broken Mind

Reputation: 541

Material UI's CardHeader action styling

I have a CardHeader which has a dropdown within it, I use the to select various options for the table, however currently it looks awful and im not entirely sure how to style it in a more appropriate way, I am using material UI's framework to do this.

 formControl: {
        flexBasis: 'auto',
        position: 'relative'
    },

<CardHeader className={classes.cardHeader} classes={{ title: classes.cardHeader }}
                        avatar={
                            <Home />
                        }
                        action={
                            <FormControl className={classes.formControl}>
                                <InputLabel htmlFor="Available Contracts" style={{ marginRight: 20, color: 'white' }}>Contract Type</InputLabel>
                                <Select
                                    value={contractType.contractObject}
                                    onChange={handleChange}
                                    inputProps={{
                                        name: 'contractObject',
                                        id: 'contractObject',
                                    }}
                                >
                                    <MenuItem value={10}>Local Contract</MenuItem>
                                    <MenuItem value={20}>Framework Contract</MenuItem>
                                </Select>
                            </FormControl>
                        }
                    />

A screen shot below of the table enter image description here

As you can see the Contract Type is currently on the right, I would like this on the left next to the Home icon if possible, any ideas?

Upvotes: 2

Views: 4316

Answers (2)

twumm
twumm

Reputation: 395

The 'Card' component has further sub components - 'CardHeader', 'CardContent'. To style the CardHeader for instances, the API indicates that you can do the following:

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import {
  Card, CardContent, CardHeader, Divider
} from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  action: {
    margin: 0
  }
}))

const CustomerInfoCards = ({ customer }) => {
  const classes = useStyles();
  return (
    <Card>
      <CardHeader
        action={
          <p>{customer._id}</p>
        }
        classes={{ action: classes.action }}
        className={classes.action}
        subheader={customer.email}
        title={customer.name}
      />
      <Divider />
      <CardContent>
        <h2>Some text</h2>
      </CardContent>
    </Card>
  )
}

export default CustomerInfoCards

Main thing here is classes={{ action: classes.action }} - which removes the default margin top and right of 8px for the action prop. Take a look at the API link above to know the various CSS exposed by material-ui and have fun styling!

Upvotes: 2

Ujjawal Raj
Ujjawal Raj

Reputation: 150

In your styling for formControl add a new property flex and have its value as flex: "0 1 auto",

formControl: {
        flexBasis: 'auto',
        position: 'relative',
        flexgrow: '1',
        flex: '0 1 auto',

    }

Hope this helps. flex usually adjust the component to relative right of the earlier component.

Read more: CSS flex on W3Schools

Upvotes: 0

Related Questions