I am using this package in my React application.
The problem is when running the application in a specific device Galaxy Fold, the container of selecting images is too big.
I need to change the size of the div with this id rc-imageselect.
Here is my code
<div className={classes.recapt} style={{ transform: 'scale(0.8, 0.8) translateX(10%)', display: "table" }}>
<Recaptcha
expiredCallback={() => setCaptchaCode(false)}
sitekey={localStorage.getItem("CAPTCHA_KEY")}
render="explicit"
onloadCallback={callback}
verifyCallback={verifyCallback}
/>
</div>
export default makeStyles((theme) => ({
recapt: {
"&div": {
"&#rc-imageselect": {
transform: 'scale(0.8, 0.8) translateX(10%)'
}
}
}
}));
But this doesn't work.
I changed it in te inspect panel and it works. So my guess I am selection the div in a wrong way.
Any help would be appreciated.
I think your style targeting has problem, try like this :
"& > div > image"
And i think u cannot using query (#elementID) on that .
Edit
After uploading photo : Take look at this
Related
What I am trying to do:
I am trying to implement a "customizable" chessboard using chessboardjsx in a ReactJS application with the option to change pieces style. Basically I am trying to dynamically change the src attribute of an <img> tag. To do that, in the example below, I click a button that change a prop that ideally should change the pieces icons.
Where is the problem: My problem is that even if prop is updated, src doesn't get updated.
What I tried and what I've read on SO: firstly I thought it might be a problem of browser caching (I've read on SO a lot of question about this problem) but even implementing solution like disabling the cache, adding a key to the img tag or adding an hash to src didn't solve the problem. Therefore I tried to substitute the img tag with a p and writing the variable inside: prop actually did not changed, the value is always the first value assigned.
Expected Behavior: When I click the button, the images of the kings get swapped. (Again, this is an example, but the mechanism is the same). Here an image of the chessboard:
Below I present a simplified version of my code to make it more understandable.
import React, { useEffect, useState } from "react";
import Chessboard from "chessboardjsx";
import elvis from "../img/elvis.png";
import lebronJames from "../img/kingJames.png";
import { roughSquare } from "../customRough";
/* eslint react/display-name: 0 */
/* eslint react/prop-types: 0 */
export default function CustomizedBoard(props) {
const [pieces, setPieces] = useState(props.pieces);
useEffect(() => {
setPieces(props.pieces);
}, [props.pieces]);
return (
<Chessboard
id="standard"
orientation="black"
width={320}
roughSquare={roughSquare}
position="start"
boardStyle={{
borderRadius: "5px",
boxShadow: `0 5px 15px rgba(0, 0, 0, 0.5)`
}}
dropOffBoard="trash"
pieces={{
wK: ({ squareWidth, isDragging }) => (
<img
style={{
width: isDragging ? squareWidth * 1.75 : squareWidth,
height: isDragging ? squareWidth * 1.75 : squareWidth
}}
src={pieces === "a" ? elvis : lebronJames}
alt={"elvis"}
/>
),
bK: ({ squareWidth, isDragging }) => (
<img
style={{
width: isDragging ? squareWidth * 1.75 : squareWidth,
height: isDragging ? squareWidth * 1.75 : squareWidth
}}
src={pieces === "a" ? lebronJames : elvis}
alt={"lebron james"}
/>
)
}}
sparePieces={false}
lightSquareStyle={{ backgroundColor: "AliceBlue" }}
darkSquareStyle={{ backgroundColor: "CornFlowerBlue" }}
/>
);
}
After reading several question on what I thought might be the problem, without any success, I thing I am not on the right path. So, what could be a solution? Or what could be the problem I come across?
Thank you in advance.
EDIT
Here's the code from which I change the prop of Chessboard.
class Demo extends Component {
state = {
pieces: "a"
};
render() {
return (
<div style={boardsContainer}>
<button
onClick={() => {
this.setState({ pieces: this.state.pieces === "a" ? "b" : "a" });
}}
>
Change Theme
</button>
<CustomBoard pieces={this.state.pieces} />
</div>
);
}
}
export default Demo;
How can I pass the styles overlayProps into the Panel component as it is stated in https://developer.microsoft.com/en-us/fluentui#/controls/web/panel
I tried:
<Panel
overlayProps={{styles:{backgroundColor:'red'}}}
/>
But does not seems to work
The only thing missing from the original source is root, which is the target element in the overlay.
This snippet (full example) shows a Panel with a red overlay. (full example)
const PanelBasicExample: React.FunctionComponent = () => {
return (
<div>
<Panel
headerText="Sample panel"
isOpen={true}
overlayProps={{ className: "foo", styles: { root: { backgroundColor: "red" }}}}
>
<p>Content goes here.</p>
</Panel>
</div>
);
};
layerProps is an optional props to pass to the Layer component hosting the panel.Do you have a Layer Component?
Also, styles can have a className as properties, you may try to give the component a customised name and adapt the css.
i guess you can check out the "Panel - custom navigation" provided in your link.
it has something like below to override searchbox. I think Panel should be the same since it also accepts a similar styles prop.
const searchboxStyles = { root: { margin: '5px', height: 'auto', width: '100%' } };
<SearchBox
placeholder="Search here..."
styles={searchboxStyles}
ariaLabel="Sample search box. Does not actually search anything."
/>
I am using material ui checkbox, i wanted it to have its own background color over my div which has colored background. I have set the root to have a backgroundColor as white but the svgicon is a round shape which is not the look i intend to have. Can i shape the checkbox ?
Already have tried many things but not able to figure out how to change the icon
const styles = {
root : {
padding : '0px',
display : 'inline-block',
backgroundColor : 'white'
},
formLabelRoot : {
margin : '0'
}
}
.
.
.
render () {
const { classes } = this.props
return(
<div style={customStyles.divStyle}>
<div style={customStyles.div1}>
<FormControlLabel
classes={{root: classes.formLabelRoot}}
control={
<Checkbox
classes={{root : classes.root }}
color='primary'
/>
}
label={''}
/>
</div>
The background white is making a spherical rounded checkbox apparent
Image of what is happening now
You can override the icons used for the checked and unchecked states. The props you're looking for are icon for the unchecked state and checkedIcon for the checked state. Both of which take a component to be used as the icon.
Documentation here
You might have to make a compromise here if you don't want to go making your own icons.
Something like this is possible without changing the icons. If you're looking for a solid white box with a grey outline as the unchecked box, you might have to provide that svg yourself because I don't see anything like it in #material-ui/icons.
If this IS something you're ok with then target the svg, and give it a fill: "white".
I use the example autocomplete field from the Material-UI lib documentation. (https://material-ui.com/demos/autocomplete/#react-select)
There is a problem with fliping the menu when it opens at the bottom of the page or the browser's viewport.
Is there a way to fix this problem with Material-UI and react-select?
Or do I need to write something custom?
If you are not using a <Menu/> custom component, you can use the menuPlacement="auto" prop of <Select/>, then your problem is solved.
const components = {
Control,
// Menu , <-- delete it
NoOptionsMessage,
Option,
Placeholder,
SingleValue,
ValueContainer
};
https://github.com/JedWatson/react-select/issues/403
Otherwise you can choose another selector, material-ui provides 2 more differents integration with the <Popper/> component: react-autosuggest and downshift.
https://material-ui.com/demos/autocomplete/
Hope it helps!
i've faced the same problem, for <Select /> component i have used what TomLgls suggest, but for <AsyncSelect /> as a work-around, i used some offset calculations in my component :
const rootHeight = document.getElementById('root').offsetHeight ;
const selectElement = document.getElementById('async_select_container_id');
const selectOffsetBottom= selectElement.offsetHeight + selectElement.offsetTop;
...
<AsyncSelect
{...listProps}
menuPlacement={
rootHeight - selectOffsetBottom > 210 ? 'auto' : 'top' // react-select menu height is 200px in my case
}
/>
i hope it helps as well
If you have created customMenu component then in that give className as open-menu-top and write this code for class:
.menu-open-top {
top: auto;
bottom: 100%;
}
Your CustomMenu maybe look like this:
const CustomMenu = ({ children, innerProps, innerRef, selectProps }) => {
return (
<div
ref={innerRef}
{...innerProps}
className={`rs-menu ${customMenuClass} open-menu-top`}
>
{Your Logic}
</div>
);
};
I have a signup form in a React app. I am using material-ui TextField and use the errorText property to add a message if there is an error in the input.
errorText={this.state.messages.emailMessage}
The state.messages.emailMessage is initially set to null and so TextField does not have the extra space for the message when the input is first rendered.
When the message is added it moves the other elements.
How can I allow space for the new node if it is needed so that the other elements are not moved? I tried setting the initial state of the message to ' ' but this colours the input red for error and doesn't work anyway!
You could just use the errorStyle property setting an absolute position..
That's how I fix those problems in my projects.
In the end I passed a style parameter to the material-ul component that set the errorText to display: table. This then stopped it from affecting the other elements when it was added.
To where should this style added?
It needs to be added for the HelperText styles. Here is an example:
const helperStyles = makeStyles(theme => ({
root: {
position: 'absolute',
bottom: '1em',
},
}))
const helperClasses = helperStyles()
<FormHelperText classes={helperClasses}>
{helperText}
</FormHelperText>
You can make them a fixed height by making the helperText equal to an empty space when there is no message to show.
<TextField helperText={error ? error.message : ' '} />
Like #leonormes 's post suggests, adding the errorStyle prop to the material ui component and setting the display property to "table" solved this issue.
The material UI components no longer moves or becomes unaligned when showing an error.
Here's what the component ended up looking like:
<TextField
floatingLabelText="Name"
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}
errorText={this.props.validationErrors.get('name')}
errorStyle={{ display: "table" }}
/>
You can target the MuiFormHelperText-root class . Below example is when you are applying style inside MUI makeStyles , but you can do the same thing with external CSS file .
'& .MuiFormHelperText-root' : {
position : 'absolute',
bottom : '-1rem'
}
For those who need an updated answer (errorText isn't a thing anymore as far as I could tell), then hopefully this will work:
<Box style={{ minHeight: "100px" }} >
<TextField
{...props}
/>
</Box>
It allows the error text message to be rendered inside the flexbox without affecting the other components, so it shouldn't disturb the things around it.
CodeSandbox
You can do something like this
const useStyles = makeStyles({
helperText: {
'& .MuiFormHelperText-root': {
height: '0',
marginTop: '0'
}
}
});
And then add this class text field control
className={classes.helperText}
Just setting position to absolute didn't work at all. This enables error text to display on input field. So for perfect fix we also have to set bottom with some value to make it fixed. Example below.
errorStyle:{
position: 'absolute',
bottom: '-0.9rem'
}
As mentioned in other answer setting display to table worked as well.
So both the styles works