I was wondering how to merge 2 pieces of text together in React JS. Difference is 1 section of the text has its own unique styling. Example code below:
<div>
<div>
{'If you haven\'t recieved an email, please check your spam filter or '}
</div>
<div style={{ color: 'red' }}>
try another email address
</div>
</div>
I have tried using flex and flex direction as row in the parent div, but have had no luck. This is what happens with flex in the parent div.
You could use span (instead of div).
The span tag is an inline container used to mark up a part of a text and it doesn't break to the next line
<div>
<span>
{'If you haven\'t recieved an email, please check your spam filter or '}
</span>
<span style={{ color: 'red' }}>
try another email address
</span>
</div>
Related
I'd like to align some text with a logo on the same line:
<div id="container" style="white-space:nowrap">
<div id="image" style="display:inline;">
<Link href="" target="_blank">
<img
src={img}
loading="lazy"
width="40px"
height="40px"
alt=""
/>
</Link>
</div>
<div id="texts" style="display:inline; white-space:nowrap;">
<strong> 75 </strong>
</div>
</div>
But when I try to run it, I receive these errors:
Line 61:41: Style prop value must be an object react/style-prop-object
Line 62:41: Style prop value must be an object react/style-prop-object
Line 73:41: Style prop value must be an object
In react you need to use in style in object,
https://reactjs.org/docs/dom-elements.html#style
style={{
whiteSpace:'nowrap',
display:'inline',
}}
style prop takes an object.
Full code:
<div id="container" style={{ whiteSpace: "nowrap" }}>
<div id="image" style={{ display: "inline" }}>
<Link href="" target="_blank">
<img src={img} loading="lazy" style={{ width: "40px", height: "40px" }} alt="" />
</Link>
</div>
<div id="texts" style={{ display: "inline", whiteSpace: "nowrap" }}>
<strong> 75 </strong>
</div>
</div>
CodeSandbox Demo
Before we can answer the question you ask in the title of this post, you have to fix your inline styles, hence the error you receive from React. The answer to your question using CSS will be at the bottom of the post.
When using inline styles in React, you will need to create an object. An object is the use of key, value pairs. So, using the code given in your example, style="display:inline;" is not an object, and thus will not work as you have seen. To make this inline style work, you will need to do one of the following.
Create an object within the JSX
This method can get messy, so if you are planning to write all your styles as inline styles, I suggest using method 2.
To do this, you can follow #RiTeSh 's example. You will need to create an object and pass that to the element's style prop, WHICH CANNOT BE A STRING, as you can see from the errors you are getting. You can do the following:
// Notice how the value is the only string in the object.
style={{
whiteSpace:'nowrap',
display:'inline',
}}
And to see what this would look like when used in an element:
<div style={{whiteSpace:'nowrap', display:'inline'}} >
Hello World
</div>
Store the styles in a variable
Compared to method 1, this is a much cleaner way to add inline styles as it doesn't create a jumbled mess in your render() function.
Before you reach the render() function, create an object and store it in a variable like the one below.
const styleObject = {
whiteSpace:'nowrap',
display:'inline',
};
return (
// Your JSX here
);
And when you apply the styleObject to the JSX element, it should look like the following:
return(
<div style={styleObject} >
Hello World
</div>
);
Make img and text appear on the same line
This is quite a simple answer if you use the display: flex property on the wrapper element, which, in your case, is the div with an id of container. Here is a simple read about flexbox from W3 Schools
With inline styles on the container element:
style={{display: 'flex'}}
With CSS:
#container {
display: flex;
}
I have a div that has some text and then a component that displays some more text:
<div className="text-center">
Sign-in or <SignUpLink />
</div>
I want it to display the text inline like so:
Sign in or Create an account
But instead it is displaying like so:
Sign-in or
Create an account
How can I fix this?
Give SignUpLink a display: inline style.
const SignUpLink = () => {
<div style={{ display: 'inline' }}>
// rest of component
</div>
}
Trying to display tooltip via ng-content. But it is not working. If the ng-content is outside to div which holds the for loop, then it is working and displaying the tooltip by appending to the div - but the problem is tooltip should be at end of the sentence.
aligned-label component template
<div class="aligned-label">
<div *ngFor="let label of getLabels()" [innerHtml]="label">
<span ng-bind="label">
<ng-content></ng-content>
</span>
</div>
</div>
check-box component template
<div class="control__content">
<aligned-label class="control__label" [labels]="labelText">
<ng-template #popTemplate>
<span [innerHtml]="tooltipText"></span>
</ng-template>
<span *ngIf="tooltipText" class="mdi mdi-information" [tooltip]="popTemplate" container="body"></span>
</aligned-label>
</div>
labeltext, tooltipText are input to checkbox component
innerHTML is replacing the HTML of you span and thats why you don't have the ng-content anymore. Are you sure you want to have that innerHTML there?
I have a list of span elements inside a div:
<div id="mediaListHolder">
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
<span class="content_wrapper">
<div class="hap_media_item"></div>
</span>
</div>
I would like to place numbers in front of span items like it was an ordered list.
Here is the fiddle:
http://jsfiddle.net/nqq3c/2/
Is it possible?
Thank you!
a Div inside a span is not legit HTML. Block elements do not go inside of inline elements.
You can, however set the span to display:list-item -- you'd also need to use list-style-type attribute as described here
Note, I've not actually done this, but it's what would need to happen providing the browser allows it.
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.