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
Related
i am trying to display a block of text i got from a recipe api, the text includes html elements like bold tags and links, but is wrapped in a string so its displaying the literal text current text
i need it to display the text not as a string but as jsx desired text
i am passing the api data through props const RecipeDetail = ({ recipeDetail }) => { const { image, analyzedInstructions, extendedIngredients, instructions, summary, title } = recipeDetail;
i am trying to use summary, also im using material ui <Stack gap={4} sx={{ backgroundColor:'grey', borderRadius: '12px'}}> <Typography sx={{ borderBottom: 'solid red', marginRight: 'auto'}} variant='h4'> Summary </Typography> <Typography paragraph="true" align='justify' gutterBottom='true' variant='body1' sx={{ lineHeight: '2rem' }}> {summary} </Typography> </Stack>
as you can see i am passing the summary in as prop because it changes based on what recipe is selected
,
so how do i stop the summary from being passed in as a string
i got the desired version by passing in the jsx in as the summary desired text code but the summary wont change based on which recipe is selected
You should use dangerouslySetInnerHTML property on Typography like this:
<Typography dangerouslySetInnerHTML={{ __html: summary }}></Typography>
Here is the React docs about it
I am trying to implement a hover effect in the react component using react inline-styling.
const InfoWindow: React.FC<IInfoWindowProps> = ({ room }) => {
const info_window_image = {
width: "100%",
height: "168px",
background: `url(${room.pictures[0].image.large}) no-repeat`,
backgroundSize: "contain",
cursor: 'pointer'
};
return (
<div className="info_window_container">
<div style={info_window_image} />
</div>
)
};
div tag under info_window_container gets style object info_window_image .
I can successfully receive an image from API but I want to give zoom-in animation when the user hovers the image in the component.
I gave className to the div and styled in CSS file however it does not work. Styles I declared in CSS file do not render.
How can I make hover or focus effect in react-inline-styling?
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>
Hei
Trying to get my page to display an image that is behind the text and icons.
Here is what I have currently:
import React from 'react';
import SamplePicture from '../../images/sample-picture.jpg';
class Front extends React.Component {
render() {
return (
<div className="ui segment">
<img className="ui floated image" src={SamplePicture} />
<p>
This is a front page that will have an image in the background
<br />
Sampletext
</p>
</div>
);
}
}
export default Front;
It displays the image but the text gets rendered below.
Basicly I want to create text that gets rendered on top of the image.
First time asking a question here so maybe there is some information that I should have shared, but haven't. Anyway, be harsh, tell me what is wrong about the code, the question.
You can do something like this using flexbox:
<div className="ui segment">
<div className="ui medium image">
<div
className="ui active center"
style={{
display: 'flex',
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
zIndex: 1,
}}>
<div className="content">Sampletext</div>
</div>
<img
src="https://via.placeholder.com/410x210"
className="ui floated image"
alt="alt"
/>
</div>
</div>
This solution uses flexbox to center the text over the image.
I've used via.placeholder.com as an image source to make it easy to demo, but you can change it to your image's src.
If the text isn't exactly centered, either change your container to a smaller size (from medium to small for example) or choose a bigger (wider) image.
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;
}