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' }}
/>
Related
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>
I am currently trying to customize the MUI tab so that the indicator instead of a line at the bottom is a background color. After research I have found that using the TabIndicatorProps and passing it a style of display:none gets rid of the indicator completely. backgroundColor:"color" changes the line color but I cant figure out how to change it from a line to the whole background.
Some possible solutions I tried but did not work was giving the TabIndicatorProps a height:100% This create the background but masks the text in the tab. After that giving it an opacity: .8 gives me the effect I want but the text is too dark and I can't get it to change as the tab is active.
Expected Tab Image
Current Tab Image
<Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
<Tabs TabIndicatorProps={{
style: {
backgroundColor: '#D2603D',
borderRadius: '5px',
},
}} value={value} onChange={handleChange}>
<Tab textColor='blue' onClick={handleClick} sx={{
backgroundColor: '#F4F5F9',
borderRadius: '5px',
}} label="Daily" />
< Tab sx={{
backgroundColor: '#F4F5F9',
}} label="Weekly" />
<Tab sx={{
backgroundColor: '#F4F5F9',
borderRadius: '5px'
}} label="Monthly" />
</Tabs>
</Box >
I don't think that is possible in a clean way. Either quite dirty workarounds or substantial re-implementation of the functionality is necessary.
The tab labels are <button> elements, the tab indicator is a <span> that lies above these buttons, but you want the labels appear above the indicator.
So you have to either rearrange the stacking of the HTML elements, or add a second label above the indicator.
It is not possible to let the tab indicator slide behind the button text, but in front of the button background.
Some suboptimal ("dirty") workarounds
You could re-arrange the stacking of the HTML elements.
This can be done by using z-index. You have to set the z-index of the buttons, and you need to keep the
button background transparent.
Note that you might have to be careful if there are other elements which already have a z-index,
or should stay behind the buttons, in which case you would need to change the z-index of these other elements as well.
<Tab label="Daily" style={{ zIndex: 1 }} />
<Tab label="Weekly" style={{ zIndex: 1 }} />
<Tab label="Monthly" style={{ zIndex: 1 }} />
You could add the current label as a children of the tab indicator, and set the style to match the original label. You would also need to pass the current label,
and the label would slide with the indicator, or the indicator would be empty while sliding.
const IndicatorLabel = ({ label }) => {
return <span className={'indicator-label'}>
{ label }
</span>;
};
// ...
<Tabs
TabIndicatorProps={{
// ...
children: <IndicatorLabel label={ currentLabel } />
}}
>
// ...
You could set the background color of the <button> dynamically, and not use the indicator at all. Of course, you would lose the sliding effect.
Of course, you could implement you own tab indicator from scratch, and don't use the MUI tab indicator.
I have a basic text input with multiline set to true. Additionally it has selection and onSelectionChange props set which causes cursor to move to initial position whenever there is change in onChangeText.
Here it's the video : https://streamable.com/bchsz4
Here it's the repro : https://github.com/VivekNeel/IOS_SELECTION_CHANGE
Here it's the sample code :
<TextInput
onChangeText={handleChange}
value={value}
multiline
selection={selection}
onSelectionChange={handleSelection}
placeholder="Enter a text"
style={{marginTop: 100, marginHorizontal: 16}}
/>
Just not using selection props fixes this!
<OtpInputs
key={this.state.completions}
inputContainerStyles={styles2.otpInputStyle}
keyboardType='numeric'
numberOfInputs={6}
focusedBorderColor='#FFBB00'
/>
in the code i want to change the color of my otpInput box when the focus is on that box it changing the color but only to the blue and that is default one
TL;DR
For changing focus of border colour, you may use below code
<OtpInputs
focusStyles={styles.focusStyle}
/>
focusStyles will help you to change focusedBorderColor
Happy Coding!
Im using Semantic UI-React. My question is how to position a label or text under an icon? There are only two default options which is left and right of the icon. However I want to position the label below the icon.
Im using Semantic-React library.
For example:
<Button icon labelPosition='left'>
<Icon name='pause' />
Pause
</Button>
In the above snippet the label 'Pause' is added on the left side of the icon in the button.
My requirement is, I want to add the label 'Pause below the icon in the button'. I tried setting the:
labelPosition='down' or 'bottom'
However it does not work. Is there any way to do this?
I came across the same problem.
I believe that this could be done only by overriding the CSS properties of the Button element.
Please try providing !important to the CSS values, since semantic UI takes the highest priority when it comes to priority of the properties.
You can either use a class and define the style there, or else use a specific selector like this: div.ui.stackable.two.column.grid.button{.
Please let me know if this fixes, otherwise I have another solution to it.
Put a line break between the icon and the text.
<Button icon>
<Icon name='pause' />
<br />
Pause
</Button>
To change the amount of space between the icon and the text, you can add margin to the line break.
<Button icon>
<Icon name='pause' />
<br style={{marginBottom: '8px'}} />
Pause
</Button>