I have a clickable text component with Material UI Typography:
<MDBox mt={2} mb={1}>
<MDTypography variant="body2" style={{color: 'white', cursor:"pointer"}}
onClick={()=>dispatch({type: "goBackToPage1"})}
>
Go back to previous page
</MDTypography>
</MDBox>
As you can see, the Typography takes up the entire row area, such that even if I put the mouse on the green area (on the same row but outside the text area), the mouse still turns into a pointer and you can still click it.
How do I restrict clicking to be strictly on the text, instead the whole row area?
You can try to pass "component" prop to MUI Typography and and set it as span
<Typography component="span">
...
</Typography>
Related
I am trying to change the tab icon colour of the Tab which is highlighted and keep unchanged for the rest but I am unable to figure it out. I am passing MUI component inside the icon button.
<Tab
icon={
<Icon
color={cinchdark}
name={item.icon}
size='small'
/>
}
key={item.name}
label = {
<Typography variant='button'>{item.name} </Typography>
}
{...a11yProps(index)}
/>))}
</Tabs>
WHAT I AM TRYING TO ACHIEVE
HOW IT IS LOOKING RIGHT NOW
For Icon, you can add color in classname in component
className={classes.icon}
icon: {
color: '#F48273',
},
To change the indicator color either you can use props
TabIndicatorProps={{className: classes.tabIndicator}}
and add background color in the class or if this is from your theme you can simply add
indicatorColor="primary"
textColor="primary"
In your Tabs component.
For example i have a TextInput like this
<ScrollView style={{flex: 1}}>
<TextInput
placeholder="Input"
style={{fontSize: 50}}
value={'Sample text'}
/>
</ScrollView>
So normally, when we click on the TextInput, it will automatic show caret at the end of text ( on android ), no matter where we click, at the first time, it will have the caret at the end, like this
BUT HOW can we set the caret in where we click, for example when we click the "m" letter, it will have caret after the "m", like this
Problem is, as i said, on android we always have the the caret at the end first, then if we click other, the caret will more to that, like this
I mean, it not a problem when text is short, but imagine, the text will like this
And we want to edit some text that already exist, so it scroll all the way down to the bottom (because the bottom contain the lastest text)
So my question is
HOW CAN WE SET THE CARET ON WHERE WE TOUCH (OR CLICK), NOT FROM LASTEST WORD IN TEXTINPUT?
You need to request focus to this TextInput.
<TextInput
placeholder="Input"
autofocus={true}
style={{fontSize: 50}}
value={'Sample text'}
/>
Or if it will not be working, write this please
https://github.com/react-native-modal/react-native-modal/issues/516
I am trying to write a React App that has text lined up in a row, and I want the last item to be aligned to the far right. I am using Material UI with a Box API to contain all my elements, with each item being a Typography element.
<Box display="flex" flexDirection="row" alignItems="flex-start">
<Typography align='left' className={classes.currentlyPrinting}>
Currently printing:
</Typography>
<Typography align='left' className={classes.filenameText}>
Filenamjoojpe
</Typography>
<Typography className={classes.completion}>
(3 of 4 completed)
</Typography>
<Box justifyContent="flex-end">
<Typography className={classes.percentage}
style={{display: 'inline-block'}}>30%
</Typography>
</Box>
</Box>
So I tried putting the last Typography element within a box container, and used "justifyConent = flex-end" but it did not work out. The following image shows what I want to happen:
So I want the text that says "30%" to be aligned with the right side of that progress bar I have. The reason for this is that the other three typography elements can have varying characters of text, so I cant just use padding for it. Any ideas?
I am trying to scroll to div when clicking on Tab with Material UI Tabs, UseRef and ScrollTo.
Sand box Link: https://codesandbox.io/s/exciting-sound-mrw2v
when clicked on Tab 2, I am expecting to scroll onto Tab2 Contents and Tab 1 contents visible on scrolling.Currently it requires two clicks to scroll onto the div, I am wondering why its behind one click. Any leads appreciated. Thanks!
I edited your example and I added a useEffect hook and if you press a tab 2 is scrolling into this content.
https://codesandbox.io/s/lingering-voice-y45cg
use this syntax
<Tabs
classes={{ root: classes.root, scroller: classes.scroller }}
value={active}
onChange={(event, newValue) => {
setActive(newValue);
}}
indicatorColor="primary"
textColor="primary"
variant={"scrollable"}
scrollButtons={"on"}
>
{cities.map((city, index) => (
<Tab key={index} label={city} value={city} />
))}
</Tabs>
this two line of properties important
variant={"scrollable"}
scrollButtons={"on"}
full example link: https://codesandbox.io/s/material-ui-centered-scrollable-tabs-ud26w?file=/index.js:645-1048
I want to design textfield according to job requirement. I am assigning background to TextField. Now when background color is assigned then its hintText is gone. Then i have to set z-index of that label manually.
Now hintText is showing but when i click on that text then Textfield is not working and when i click outside of text then it is working.
This is my textfield style:
<TextField
hintText="Rate"
className="rateText"
inputStyle={{background:"#fff",paddingLeft: "3px"}}
style={{paddingBottom:"10px"}}
hintStyle={{color: "rgba(0,0,0,.26)",zIndex: "1",bottom: "20px",left: "5px"}}
/>
Try setting the backgroundColor on the style, rather than the inputStyle. The textbox itself will remain transparent and its placeholder text will continue to work, but the white background of the container div will show through:
<TextField
hintText="Rate"
style={{ backgroundColor: '#fff' }}
/>