I am using Material-UI for React.
This is the UI that I have so far, but I want to Submit button to have the same height as the Select component.
I tried to give height: 100% to the button
<Button
style={{ height: "100%", width: "30%" }}
variant="contained"
color="primary"
>
Submit
</Button>
But this doesn't really change the height.
This is the link for the codesandbox: https://codesandbox.io/embed/material-demo-nvcxk?fontsize=14&hidenavigation=1&theme=dark
I'm not sure if you have a requirement for potentially scaling the height, but generally input heights are fixed, so there's really nothing wrong with specifying it:
<Button
style={{ "min-height": "56px", width: "30%" }}
variant="contained"
color="primary"
>
Submit
</Button>
Sometimes there's no need to really overcomplicate things :D
For material-ui component custom styles
First, make sure you find the related official document well material-ui button-api
Open dev mode in your browser and you may find your button have the classes below like this
<a class="MuiButtonBase-root MuiButton-root Connect(RawComponent)-margin-38 MuiButton-contained MuiButton-containedPrimary MuiButton-fullWidth" tabindex="0" role="button" aria-disabled="false" href="..." >
<span class="MuiButton-label">
Your Button Name
</span>
<span class="MuiTouchRipple-root">
</span>
</a>
Notice that there are some classes refer to document
MuiButton-root // => Notice the `root` here
All you need to do is to add some styles to those classes. But how? There are many ways. All listed here also in document material-ui style solution
In your situation, choose one of the solutions and it will be done.
Related
I have used Bootstrap (bundled with Popper) in my project to show a Tooltip when you hover on a button. I use the code from Bootstrap docs. However the tooltip is not visible.
<li className="nav-item">
<button type="button" className="btn grad-text"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Meet the Algorithms"
>
<i className="fas fa-solid fa-laptop-code fa-lg"></i>
</button>
</li>
The above code here shows title on bottom on hover. That was visible even before I added
data-bs-toggle="tooltip" data-bs-placement="top"
to my <button> element. Below is the screenshot of the same.
I am using raw Bootstrap not React-Bootstrap and the version I am using is 5.2.3
Can anyone help me with how to show the tooltip like Bootstrap Tooltip over here. Thank you.
I investigated a lot of topics about using button as a link but didn't found a solution for me - I need to open a certain page in a new tab using React bootstrap button.
<Button onClick={() => onClickOpenVacancy(id)}>
React bootstrap offers a prop 'href' but no info how to open in new tab. Any suggestions, please?
You should use href and target together:
<Button href="URL" target="_blank" onClick={() => onClickOpenVacancy(id)}>
It looks like they just leave target with type any without further documentation. It just works the same way as the attribute that exists on the usual <a> tag does.
You could add the button inside the anchor tag
<a href='https://example.com/' target="_blank">
<button className="test" onClick={() => onClickOpenVacancy(id)}>
Click Here
</button>
</a>
or
<button className="test"
onClick="window.location.href = 'https://example.com" target="_blank">
Click Here
</button>
or..not really needed for you still a way would be
<form action="https://example.com/" target="_blank">
<button className="test" type="submit" onClick={}> // onClick not needed
Click Here
</button>
</form>
If onClickOpenVacancy was meant to do the redirection, then you don't need onClick function. the href and target are enough.
Pass in the complete URL in this code snippet and it should work
<Button onClick={() => window.open(URL, '_blank')}>ID</Button>
It's nothing specific to library like bootstrap, etc
go through this code and add customers and delete it. it gives an error.
https://codesandbox.io/s/array-fields-7x1n3
Define like this
<span
onClick={() => deleteIt(index)}>
❌
</span>
function code
const deleteIt=index=>{
console.log(index)
}
I managed to make it work by making your remove span tag like this:
<span type="button"
onClick={() => fields.remove(index)}
style={{ cursor: "pointer" }}>
❌
</span>
Basically I made the span a button. I think the problem lies in the definition of the validator of final-form-arrays, maybe it's something about the difference between span and button onClick event but I'm not sure..
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
In my project we have this lines of codes:
<span
onClick={this.toggleEditing}
>
{this.state.value}
</span>
Needless to say, it produces an error in eslint with message "Visible, non-interactive elements should not have mouse or keyboard event listeners jsx-a11y/no-static-element-interactions". But I don't know what is the best way to fix this situation, should we change it to button and change style to look like a span. I really don't have much experience with this problem.
Look at the documentation it beautifully tells you what to do.
https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#how-do-i-resolve-this-error
For your case, the resolution is to add role="button"
<span onClick={this.toggleEditing} role="button">
{this.state.value}
</span>
I fixed it using this:
<span
role="button"
tabIndex={0}
title="Some title"
onClick={this.toggleEditing}
onKeyPress={this.toggleEditing}
>
{this.state.value}
</span>
What is the error? onClick translates to an event in the DOM which is valid (click on a span) so you should be able to make this work.