I'm working on a reactJS web app . I get a value from the server , and i want to display it inside a grid item , but the problem is that the value is a long text,the value in my code is {signature} , and when it is displayed it does not fit the screen .
This is my try
<Paper className={classes.paper}>
<Grid container spacing={3} wrap="wrap">
<Grid item xs >
Your Signature:
<div style={{ flexWrap:'wrap' }}>
{signature}
</div>
</Grid>
</Grid>
</Paper>
<Copyright />
This is a screenshot of the result :
This is a simple css issue. You can try this.
<div style={{ maxWidth: '100%', overflow: 'hidden', wordBreak: 'break-all' }}>
You can wrap a long string with no spaces by using word-wrap css property with break-word value. Below is an example using HTML with CSS.
For React style; adapt the below css property to use camel case.
.wrap{
width: 200px;
word-wrap:break-word;
}
<div class="wrap">
oisphfpashdfpiahusdfpiuhapsiduhfpiuasdhfpiuahsdfpihaspiduhfpiasdhfpiuhasdpifuhapisduhfpiahsdfpihaspdifhpiausdhfpisdahfpihdspiuh
</div>
Related
I'm new to react, trying to build brand carousel using react-multi-carousel.
The images are displayed properly but I want to center the image. Tried to write css it did not apply on the carousel. How this can be achieved, Or do I have to use any other carousel?
`
<Grid item xs={12}>
<Carousel
responsive={responsive}
infinite={true}
arrows={true}>
<Image src={abt.logo_carousel.url}responsive/>
<Image src={abt.logo_carousel1.url}responsive/>
<Image src={abt.logo_carousel2.url}responsive/>
<Image src={abt.logo_carousel3.url}responsive/>
</Carousel>
</Grid>`
write style inside your tag itself.like this
<img src="..." style={{width:300,marginLeft:"auto",marginRight:"auto"}} />
I'm a little bit late but hope this could help someone (it worked for me):
<img src={source} style={{marginLeft: "auto", marginRight: "auto", display: "flex", justifyContent: "center"}}/>
I'm using react-slick in one of my projects and for some reason when I turn off arrows the entire slider disappears
The code is looking like this
<div className="container" style={{position: "relative", padding: 0}}>
<div className={styles.class_name}>
</div>
<Slider onSwipe={this.swipeHandler} arrows={false}>
{this.props.children}
</Slider>
</div>
I'm using customized Bootstrap with only responsive utilities and grid.
Any help, suggestion etc would be very appreciated!
I need to display styled text inside div.
When doing it hard coded it works, but when using the variable value the style tags are not taking affect.
I tried this way but it didn't help:
<div contentEditable={true} dangerouslySetInnerHTML={{ __html: element.Display }}
style={{ width: '100%', backgroundColor: "lightgray" }}>
{/*{element.Display}*/}
{/*numOf(from(SHOPDB.DB2ADMIN.CLIENT), SHOPDB.DB2ADMIN.CLIENT.<span style={{backgroundColor: '#FFFF00'}}>LAST_NAME</span> = SHOPDB.DB2ADMIN.CLIENT.LAST_NAME) = 1*/}
</div>
References:
Display edited/styled text - react
Rendering raw html with reactjs
I am using reactjs-popup and it displays its content. But I am unable to set its width. It is not taking effect for some reason. What am I doing wrong?
I have tried width:'50%' and width:'50px'. But it always displays the popup in a very wide huge rectangle. If I resize the whole browser only then the popup reduces in size.
<Popup style={{width:'50%'}}
open={true}
closeOnDocumentClick
keepTooltipInside=".tooltipBoundary"
>
<div className="modal" style={{display:'flex', background: 'radial-gradient(#cde6f9, #6191bf)'}}>
<a className="close">
×
</a>
<div style={{alignitems: 'center', justifycontent: 'center'}}>
<h4>Enter Project Name : </h4>
<input style={{alignitems: 'center', justifycontent: 'center'}} type="text" name="fname"></input><br/><br/>
<button style={{alignitems: 'center', justifycontent: 'center'}} >Create</button>
</div>
</div>
</Popup>
Assuming that the Popup component comes from an external package, try to read the documentation for more styling options.
You can probably also view the component in node_modules/[package_name] folder. Try giving it a className there or style it using the style property.
Finally, you can try wrapping the popup with another element and capture the style using css.
Something like that:
.popup-wrapper {
width: 100%;
}
.popup-wrapper > * {
width: 50%;
}
You can certainly globally update the content styles as other posts here imply. But if you want to set the style for a specific popup...
If you inspect the <Popup HTML, you will see there are two divs. One has a class defined with popup-content and a second named popup-overlay. You can overwrite the styles here using the contentStyle and overlayStyle attributes of any given <Popup.
For example if you want to change the width of the content:
<Popup
...set other attributes here as needed
contentStyle={{ width: '100%' }}
>
Show this content
</Popup>
Wrap the popup in div and give it a class like modalWrapper.
You can target the main popup container div by using this css.
.modalWrapper > div > div {
width: 484px !important;
padding: 24px !important;
border-radius: 10px;
}
I use google-maps-react in my project. On the side on my page I would like to put the map. To separate content I am using Grid and my website looks like this
render() {
return (
<Grid container spacing={8}>
<Grid item sm={7}>Some content here</Grid>
<Grid item sm={5}>
<Grid container spacing={8}>
<Grid item sm={12}> <MAPCONTAINER /> </Grid>
<Grid item sm={12}> <OTHER_COMPONENT /> </Grid>
</Grid>
</Grid>
</Grid>
)}
and the <MAPCONTAINER /> looks like this
const style = {
width: '100vw',
weight: '100hx',
}
class MapContainer extends Component {
render() {
return (
<Map
google={this.props.google}
zoom={4}
style = {style}
>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: (GOOGLE_KEY)
})(MapContainer)
There are two problems: one is that the map goes out of the Grid , it is very wide, and the weird thing is that when I inspect this Grid element, it shows that it has height:0, like there is nothing inside that Grid. The second problem is that <OTHER_COMPONENT /> overlap on the map, like it cannot see that there is some other Component above.
I cannot find way to fit the map into the Grid, how it should be properly.
Thank You from help.
The Map component renders the map in <div style="position: absolute;...
So you need to wrap it in a <div style="position: relative;
Easiest way is to do this is by adding position: relative; to the Grid item like so:
<Grid item sm={12} style={{position: 'relative', height: '50vh'}}><MapContainer /></Grid>
This way you do not need to add style to the Map component
<Map
google={this.props.google}
zoom={4}>
</Map>