I want to show my image in background by using inline CSS in <div> tag
<div style={{backgroundImage: 'url(${imageUrl})'}}></div>
but its not working its showing unexpected template string expression.
image is about sc of the code
You should use Template literal, when you want to print dynamic value in string like,
<div style={{ backgroundImage: `url(${imageUrl})` }}
Notice the back tick (`)
Related
Doing components for app. For section want to add ability to pass some optional accent color to get output like:
<section style="--mycolor:red">
... //contents
</section>
where "red" can be passed in backend during page build as color name, #hex, "rgba()" or "hsla()" strings. It gives opportunity to use that color to children elements of this section - for border colors, first letters, markers, backgrounds etc.
Simple code^:
<section style={`--mycolor:{color}`};>
does not work because next expects mappable code, but looks like css variables names aren't parse-able in inline syntax.
I can also inject it with <style jsx> statement:
<style jsx>{`
section{
--mycolor: ${ color != '' ? color : 'var(--default-color)'};
}
`}
</style>
but this soluition looks "dirty" for such simple task - adds tons of unnecessary code just to serve one css rule.
I think it can be achieved with something like
<section styles={myStyle}>
where myStyle is jsx style object, but i don't understand how to manually create it (in examples its only imported prop w/o details where did it get from).
So is there a way to achieve simple output like <section style="--mycolor:red"> ?
#juliomalves, thanks for help, final solution is like
style={{ '--mycolor': color }}>
where:
'--mycolor' = css variable name quoted as string (css properties are not quoted !)
color = prop of an element
If using TypeScript with Nextjs, there is very simple solution as blow
{{ ['your css variable name' as any] : your value}}
e.g.
['--rating' as any]: 2.5,
['--star-color' as any]: '#b3b3b3',
incase if you want to insert inline styling using style tag in next.js , you have to insert an object inside the style={} tag as all of the style and classNames in next are considered as object . For example you want to insert the background colour of your div using the insline styling than do the followings
<div style={{ ["background-color" as any]: "#ffc107" }}></div>
do make sure that You use semicolons to insert style properties
I am trying to style an HTML element inside the component from the Fluent UI React library.
What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the component is translated into:
<div>
<label></label>
<div id="target-me">
<button>
<span></span>
</button>
<label></label>
</div>
</div>
I want to add an inline-flex to the target-me div and set flex-flow property to row-reverse in order to get the button element to the right of the label element. The problem is, I can't manage to target the "target-me" div in my code.
How can I achieve this without rewriting a custom component ?
Thanks!
Ok, well I found the answer to my own question so here it is:
<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />
Essentially you can target different parts of the component (root, container, label..) by using the styles property. Use VS Code's Intellisense to find out what elements you can target inside the component and then just give it some regular CSS-in-JS that you want.
I have a loop where i display dynamically icons, the position of the icons are styled by css on style.css, but the classes name are actually an elements of json object.
The problem is how to use the value of the json element which is style in order to style the icons.
The *ngFor looks like this:
<div *ngFor="let count of counters; let i = index" class="{{count.style}} dispanserDiv ">
<span class="dispLabel"> {{count.name }}</span>
<img (click)="openStockModal(stockModal)" class="dispanser" src="../assets/icons/dispanserIcons/0.png">
</div>
also i tried [ngClass] but not working, any help is appreciate.
Well, after i opened the inspect element, and i hover over the tags i found on screen a title message with a direction arrow out of the height of the scree, so i changed the margin-top attr th icon appear again.
but i am pretty sure that when i set the class name without using the json element value, it display fine, but when i use the json element the icons appear at a different position, but i have no idea why this is happening. but it finally worked
I am trying to change the background color of a div using ng-repeat. The color I am trying to pull from the object in the loop. Whenever I do this however it sets my style property equal to blank.
Here is the code that I am using:
<div ng-repeat="channel in channelObjects">
<div class="mediumTile" style="background-color:#{{channel.Color}}">
Channel Color: {{channel.color}}
</div>
</div>
This displays my mediumTile object with the correct channel color displayed. By the style is set to nothing once the page loads
This is what the page displays:
<div class="mediumTile" style="">
Channel Color: 123456
</div>
Am I doing something wrong?
You should use ng-style instead of style, using style with interpolation will cause some browsers to strip the values off (invalid style attribute with the presence of {{ etc..) before even angular has a chance to process it. This happens specifically in IE (not sure which browser you tested this).
<div class="mediumTile" ng-style="{'background-color':'#' + channel.color}">
Also mind the casing as well, color.
Plnkr
in the custom styles inside CKEditor, I have created a "Tip" block element that I want to have span one or more paragraphs. However, when I am editing my text (using the inline editor), I am unable to get the block style to work across multiple paragraphs.
My style looks like this:
CKEDITOR.stylesSet.add('authorStyles', [
// Block-level styles
{
name: 'Yellow Tip',
element: 'p',
styles: {
margin: '1em 0',
padding: '20px 20px 4px',
border: '1px solid',
'border-radius': '15px',
'background-color': '#FFC',
'border-color': '#CC9'
}
}
]);
In the config.js, I added the line to wire-up the custom style
// custom styles
config.stylesSet = 'authorStyles:../authorStyle.js';
And here is my HTML:
<div class="section right" contenteditable="true" id="contentToSubmit">
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
</div>
Unfortunately, when I select two paragraphs to be contained in my div, they both display as their own blocks, instead of both <p> tags being inside my custom <div>.
Paragraphs not displaying properly inside custom block style div
I tried resetting the default enter key behavior (via the enterkey extra plugin), but the only thing I could get to work is setting the enter key behavior to line break (<br/>) which isn't desirable.
I have looked around for help on this particular issue, but can't seem to find an article that deals with this problem. Can anyone help me? We are trying to determine whether ckeditor will be sufficient for our needs, but this is a big blocking issue for our content editors.
The short answer is:
Defined your style as a div style, because you want it to apply to divs not ps, right? So you should have: element: 'div'.
Instead of applying the style through styles combo, what will replace paragraphs with divs, use the "Div" button to open the "Create Div Container" dialog and choose your style in the dialog.