How would I align the <a> element, containing the Button with the string Push Me to the right side of the <div> (<Paper>)?
https://codesandbox.io/s/eager-noyce-j356qe
The application is in demo.tsx file.
Note: I cannot set the position of the button to absolute and then position it right: 0px because I need to adjust the height of the <div> (<Paper>) according to its content, which includes the height of the <Button>.
Based on your demo i'd suggest you'd wrap the text in a <div> and give display: flex property for your <Paper>. Then you could use flex-gow: 2 on that div
<Paper style={{ display: 'flex' }}>
<div style={{ flexGrow: '2' }}>
<p>This is some text </p>
<p>This is even more text </p>
</div>
<Link
component="button"
variant="body2"
onClick={() => {
console.info("I'm a button.");
}}
>
<Button
variant='contained'>
Push Me
</Button>
</Link>
</Paper>
Here's the forked Codesandbox
More about flexbox if you're not familiar with it
Related
I have a block element,
I want to change the element to flex and add it no wrap,
now when I change the element to flex, the items inside it just keep expanding the entire page,
I don't want to change my entire project
and I don't want to have to use fixed width,
why doesn't the flex element behave just like block element?
<div>
<div
style={{
display: 'flex',
}}>
{chips.map((option, index) => {
return (
<Tooltip
key={option.name}
title={isChipFoundInOptions ? '' : 'Option not found in this profile context.'}>
<Chip
label={`${option.displayName} - ${option.name}`}
// {...getChipProps({ index })}
/>
</Tooltip>
)
})}
</div>
</div>
[]i want my button should be like that.but my button always stay in left1
I think the easiest way to do it is to just use a div! or you can create a custom component that does that for you.
<ListGroup.Item>
<div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
<Button variant="primary">Primary</Button>
</div>
</ListGroup.Item>
I have a table with a custom right side control, where the user can set the columns visibility as well as reorder them. Upon clicking a button, the control expands and the user can now make changes. The basic functionality is there. I am now trying to make the transition a smoother and that is where I am failing.
Here is the minimal markup that is rendered:
<div
style={{
display: "flex",
justifyContent: "flex-start"
}}
>
<div style={{ flex: "auto" }}>
<Table columns={columns} dataSource={data} pagination={"false"} />
</div>
<div
style={{
flex: hasExpandedControls ? "2 1 1" : "0 0 1",
transition: "all 500ms ease-in-out"
}}
>
<div
style={{
display: "flex"
}}
>
<div>
{hasExpandedControls ? (
<Tree
checkable
draggable
treeData={columnsTree}
checkedKeys={visibleColumns.map((col) => col.key)}
onCheck={handleCheck}
onDrop={handleDrop}
style={{ marginRight: "0.5em" }}
/>
) : null}
</div>
<div>
<div style={{ padding: "50% 0", height: 0, width: "40px" }}>
<Button
onClick={() => setHasExpandedControls((prev) => !prev)}
style={{
marginLeft: ".5em",
display: "block",
transformOrigin: "top left",
// transform: 'rotate(-90deg) translate(-100%)',
transform: "rotate(90deg) translate(0, -100%)",
marginTop: "-50%"
}}
>
Spalten
</Button>
</div>
</div>
</div>
</div>
Clicking the button triggers a state change, which causes the Tree to be rendered and in this instance the div 'snaps' to its full width. I am failing to accomplish my goal using css transitions, so I was wondering if there was an easier way to accomplish my goal.
I've tried setting the transition on various wrapping elements and all elements, but the 'snap' into existence remains.
Codepen to reproduce: https://codesandbox.io/s/basic-usage-antd-4-17-3-forked-yq2u7?file=/index.jshttps://codesandbox.io/s/gu4hs
I have two charts on top of each other that extend to the bottom of the screen. The first is collapsible via an Accordion.
However, if I do the following two things in sequence:
Make my browser window bigger
Then, collapse the Accordion (i.e., minimize the first graph).
Then there will be unwanted whitespace below the second graph.
<Flex direction="column" height="calc(100vh)" className="flex-wrapper">
<Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
<Flex className="flex-wrapper0">
<div>123456789010</div>
<Box className="accordion-box-container">
<Accordion className="accordion-wrapper" allowToggle>
<AccordionItem>
<h2 className="accordion-title">
<AccordionButton
className="accordion-button"
borderRadius="md"
borderWidth="0px"
_focus={{ boxShadow: "none" }}
>
<Box
textAlign="left"
h={3}
_focus={{ boxShadow: "none" }}
></Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel p="0">
<Box height="30vh">
<ThreeDataPoint />
</Box>
</AccordionPanel>
</AccordionItem>
</Accordion>
<div className="graph-wrapper">
<ThreeDataPoint />
</div>
</Box>
</Flex>
</Flex>
It seems like some interaction problem between browser resizing and css? I think I need to force a re-rendering of <ThreeDataPoint /> whenever the accordion button is pressed so that it can pick up the new height that it's supposed to be using. I wonder how to force such a re-rendering?
Here's codesandbox:
https://codesandbox.io/s/elegant-fermat-bugv1?file=/src/index.tsx
And the app URL:
https://bugv1.csb.app/
It was because of this !important flag causing troubles in the css file:
.graph-wrapper div {
height: 100% !important;
}
After commenting this out, it worked as expected.
I have three buttons in a Dialog like so:
The JSX is
<DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} >
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()} >
Clear
</Button>
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()} >
Cancel
</Button>
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose(this.state.selectedValue)} >
Select
</Button>
</DialogActions>
The 'buttonRoot' style simply determines the button coloring. How to I left align the 'Clear' button so it sits on the left? It seems the buttons are each in a div with a MuiDialogActions-action class.
Just use divider element with flex: 1 0 0 CSS style:
<DialogActions>
<Button>
Left
</Button>
<Button>
Buttons
</Button>
<div style={{flex: '1 0 0'}} />
<Button>
Right
</Button>
<Button>
Buttons
</Button>
</DialogActions>
No need for complicated answers:
Just set the DialogActions component style to {justifyContent: "space-between"}
<DialogActions style={{ justifyContent: "space-between" }}>
<Button>
Left
</Button>
<Button>
Right
</Button>
</DialogActions>
You can do it with Flexbox:
DialogActions {
display: flex; /* displays flex-items (children) inline */
}
DialogActions > Button:first-child {
margin-right: auto;
}
<DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} >
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()}>
Clear
</Button>
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()}>
Cancel
</Button>
<Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose(this.state.selectedValue)}>
Select
</Button>
</DialogActions>
Note: See it in full screen.
Edit: This does not answer the question. It will align all the buttons to the left.
According to the DialogActions API the classes you can override are root and spacing.
After taking a look at the implemantation of the component you can see in root class the rule justifyContent: 'flex-end'.
I simply apllied justifyContent: 'flex-start' with another class:
<DialogActions classes={{ root: classes.leftAlignDialogActions }}>
....
</DialogActions>
Make sure to create the class leftAlignDialogActions with makeStyles
const useStyles = makeStyles(theme => ({
leftAlignDialogActions: {
justifyContent: 'flex-start'
}
}))
I would also disableSpacing and then add the flex attributes and MUI styles overrides I need via the sx prop. In my case I had to modify the spacing (gap) from 8px to 10px.
<DialogActions disableSpacing sx={{gap: '10px'}}>
<Button>Cancel</Button>
<Button>Submit</Button>
</DialogActions>
Maybe in your case another option is to wrap the 2nd and the 3rd buttons in a Box component and on the container to add justifyContent: space-between. In this way in the flex container you will have 2 flex items which will be pushed to the left inner edge and right inner edge of the container. The left item will be the first button and the right item will be the Box which has the 2nd and 3rd buttons as children.
You can use first child selector because first button is clear button in tag DialogActions
DialogActions button:first-child {
float:left;
}
OR
You can try. You need to adjust left and bottom property accordingly.
DialogActions{
position:relative;
width:100%;
}
DialogActions button:first-child {
position:absolute;
left:10px;
bottom:10px;
}
Hope it helps you.