How do I get a material UI button to left align the label? There are no props to directly change the inline-styles on the button element and the only way I can figure to do this is to add a class and write some gross css selector like thisClass > div > button.
http://www.material-ui.com/#/components/raised-button
I had a similar issue with buttons that have an icon. I fixed it by justifing the content:
<Button
startIcon={<AccountCircleIcon/>}
fullWidth={true}
style={{justifyContent: "flex-start"}}>
button text
</Button>
You can give the label absolute positioning by using the labelStyle property on the element.
This works:
<RaisedButton
label="Primary"
primary={true}
lableStyle={{position: 'absolute',top: 0,left: -10}} />
Edit: Updating my answer with better ways to do this
Using text align on the button:
<RaisedButton
style={{textAlign: 'left'}}
label="Primary"
primary={true}/>
Using float on the label:
<RaisedButton
lableStyle={{float: 'left'}}
label="Primary"
primary={true}/>
Related
I want to show another Box component above Modal component. Both are material ui component.
There is Parent Box component and there is another Box component inside Parent Box component.
Thing I want to do is show the second/child Box component on the top.
Right now it seems like the second/child Box component is under the image.
You can click a open modal button and inspect modal.
You will see there will be <img />, <div></div> and <svg />
<div></div> should be Box component but I can't see it over the top.
return (
<div>
<Button onClick={handleOpen}>Open modal</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box // parent Box component
sx={{
...style,
width: width,
height: height
}}
className={classes.imageExpand}
>
<img
src="https://cdn.pixabay.com/photo/2022/06/13/15/36/grain-7260250__340.jpg"
alt="sample"
className={classes.imageExpand}
/>
<Box className={classes.conainer} /> // child Box component
<CloseIcon className={classes.closeIcon} />
</Box>
</Modal>
</div>
);
Attempts
1, set z-index:1000 and position:'relative'
2, set lower z-index to the parent component
3, z-index:'1000 !important'
4, set transform and opacity
None of them worked. Is there any other way to show <Box /> top?
I even tried to switch Box component to regular div tag and this also doesn't work.
Several MUI components utilize z-index, employing a default z-index scale in MUI that has been designed to properly layer drawers, modals, snackbars, tooltips, and more.
The z-index values start at an arbitrary number, high and specific enough to ideally avoid conflicts:
mobile stepper: 1000
fab: 1050
speed dial: 1050
app bar: 1100
drawer: 1200
modal: 1300
snackbar: 1400
tooltip: 1500
so you should use a z-index greater than 1300.
you can get more info at https://mui.com/material-ui/customization/z-index/
I am using Material-UI in one of my ReactJS projects.
I have a few buttons: some - primary, the rest are secondary. What I want to achieve is to disable the tabIndex property on secondary buttons, leaving only the primary buttons accessible with the keyboard tab.
Turns out setting tabIndex attribute to the Button component does not work, nor setting the tabIndex via inputProps:
<Button
variant="contained"
tabIndex="-1" //does not work
size="small"
startIcon={SearchIcon}
color='secondary'
inputProps={{ tabIndex: "-1" }} //does not work either
> some text
</Button>
How do I achieve disabling the accessibility of the secondary buttons via keyboard tab?
I can't set tabindex attribute to an element via CSS, can I?
Any help would be appreciated.
Thank you.
for textfield and input you must code like this
<TextField label="1" inputProps={{ tabIndex: "1" }} />
for button your code must be like this
<Button tabIndex="2">Button 2</Button>
I just went through this on the MUIv5 update. For me, using braces worked:
<Button tabIndex={2}>Button 2</Button>
I want to embed a custom react component inside an SVG but it's not working. Is it even allowed in an SVG? if not, are there workarounds?
Below is my code, trying to insert the Modal component:
<polygon
id="Paris"
<Modal show={show} handleClose={hideModal}>
<p>Modal</p>
<p>Data</p>
</Modal>
<button type="button" onClick={showModal}>
open
</button>
stroke="#010101"
fill="rgb(251, 106, 106)"
stroke-width="2"
stroke-miterlimit="10"
points="1596.182,374.685 .../>
What I am trying to accomplish is to display a popup when we click on a province inside an svg map.
For what your are trying to achieve, I will wrap svg's inside the modal. Something like this:
<Modal>
<svg></svg>
</Modal>
In your modal component, make sure to display svg as children:
return (
<Fragment>
{props.children}
</Fragment>
);
Take a look in the doc for more info: https://reactjs.org/docs/composition-vs-inheritance.html
Following #Robert Longson's comment, I inserted the Modal component inside a foreignObject and it works. Still the Modal window needs to be adjusted manually as far as the x, y coordinates are concerned so that it pops up exactly over the clicked svg element:
<foreignObject x="58%" y="6%" width="200px" height="250px">
<Modal show={show} handleClose={hideModal}>
<p style={{ padding: "10px" }}>Modal</p>
<p>Data</p>
</Modal>
</foreignObject>
Please note that you must set the x,y, height, width attributes for this to work, as documented in this answer React - html tags inside svg
i have this code, what i want to do on the tab prop is add Tooltip on the icon:
<Tabs.TabPane tab={<Tooltip placement="left" title="adasd"><Icon size="1.2" name="cog" /></Tooltip>} key="map">
<MapProperties onChange={onChange} canvasRef={canvasRef} />
</Tabs.TabPane>
i was expecting for the hover to show but it's not working. is it possible to add ant design tooltip on tabs pane?
Anuj's answer isn't correct since TabPane should be direct children of Tabs component. I also had such problem and I find out that i can solve it like this:
<TabPane
key="3"
tab={(
<Tooltip title="Your hint that appears after user's mouse will be over the tab title">
<span>tab title</span>
</Tooltip>
)}
disabled={mode === PageMode.NEW}
>
tab attribute accepts any ReactNode so we can just wrap our tab name with any component. And tooltip isn't exception.
Proof that this works
It should be like
<Tooltip title="foo">
<Tabs.TabPane>....</Tabs.TabPane>
</Tooltip>
https://ant.design/components/tooltip/#header
I am new to Material design UI components and struggling with real basic alignment question.
I have a select control that uses an Icon for the drop down and then right next to this, another Icon to cancel the action.
Here is all that is in render() part of page:
<div style={{display:'flex', alignContent:'center'}}>
<Select IconComponent={ArrowDropDownCircleOutlined} disableUnderline={true}
renderValue={() => { return ('') }}>
<MenuItem value={'contains'}>Contains</MenuItem>
<MenuItem value={'startswith'}>Starts with</MenuItem>
<MenuItem value={'EqualTo'}>Equal to</MenuItem>
<MenuItem value={'isNull'}>is Null</MenuItem></Select>
<CancelOutlined onClick={() => console.log('hello world')} />
</div>
this is what's displayed:
I have tried various style changes, verticalAlign:'middle", 'top', 'buttom', etc..but nothing aligns them.
If I change the select component to just an Icon, the two icons are aligned correctly however.
What am I missing?
Instead of alignContent: 'center' use alignItems: 'center'.
Here's a demo where it works: