I have an application with an angular frontend and C# backend.
I'm receiving this rich text from the backend of my application:
<b>Hello <span style="font-weight:normal"> world </span></b>
What gets displayed is " Hello world "
What I want to be displayed is " Hello world "
The desired behaviour is that the styling of the span doesn't get overwritten. This codepen example shows the desired behaviour, but it is frontend ONLY:
https://codepen.io/david-lo/pen/rNVOEbY
What am I missing?
I solved my issue by using SafeHtml and DomSanitizer :
Before:
public txt: string; //txt is rendered in my html file.
#Input() public set header(_txt: string) {
this.txt = _txt;
}
The string input _txt has value <b>Hello <span style="font-weight:normal"> world </span></b>
The problem was that my span styling was ignored so the output would be:
Hello world
After:
public txt: SafeHtml;
#Input() public set header(_txt: string) {
this.txt= this.domSanitizer.bypassSecurityTrustHtml(_txt);
}
By using DomSanitizer the way shown above, my span styling was respected in the frontend and I achieved the desired output:
Hello world
Please Add below css
p {margin: auto; display: inline-block;}
If you are trying to render that code with the backslash symbols, this is clearly incorrect HTML.
The correct line should look like this:
<b>Hello <span style="font-weight:normal"> world </span></b>
Related
Apologies if this shows how much of a novice I am, but I'd like to know more about dynamic variables and CSS in Vue. I'd like to create a system where each time a button is pressed, the letters of the button label become further apart.
Inside a component is it possible to use a counter script such as:
<script>
export default {
name: 'Counter',
data() {
return {
count: 3,
}
},
methods: {
intrement() {
this.count += 1;
}
}
}
</script>
And then use the count integer value to change CSS text spacing for example?
So that in the template, I could use:
<template>
<header>
<div>
<button class="header_button" style="letter-spacing: `v-bind(count) + ch`;">MYBUTTON</button>
</div>
</header>
</template>
I appreciate this is a strange and specific example, but if anyone could give me some feedback as to why this doesn't work, as well as suggestions on how I could achieve this I'd be super appreciative.
In that case, you can directly use the following
<button :style="`letter-spacing: ${count}ch;`">
Here is a playground.
PS: :style is a shorthand for v-bind:style as explained here.
v-bind for CSS (mixing script + style) is also a thing.
Here, you're only using script + template combo, so an interpolation is enough.
I am new to ReactJS and trying a simple portal page and stuck in a point. How to write a superscript in a navigation bar file.
I am reusing the existing project and need a way to write superscript to the text.
export const navHeader = { text: "Test Page", href: "/" };
How to get the result like Test Page ^ abc ( abc should be in power).
You can just use the sup HTML Element, or wrap the text in another element and use the vertical-align: super rule
Using Native HTML Element
<span>
Test Page
<sup>abc</sup>
</span>
Using CSS
<span>
Test Page
<span style={{ verticalAlign: "super" }}>abc</sup>
</span>
I have been struggling to figure out the best way to dynamically change the background-image attribute in a number of Angular 2 components.
In the following example, I am attempting to set the background-image of a div to an #Input value using [ngStyle] directive:
import {Component, Input} from '#angular/core';
import { User } from '../models';
// exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app)
export type UserInput = User;
#Component({
selector: 'profile-sidenav',
styles: [ `
.profile-image {
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 100px;
height: 100px;
}
`],
template: `
<div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})">
<h3>{{ username }}</h3>
`
})
export class ProfileSidenav {
#Input() user: UserInput;
blankImage: string = '../assets/.../camera.png';
// utilizing "getters" to keep templates clean in 'dumb' components (https://github.com/ngrx/example-app)
get username() {
return this.user.username;
}
get image() {
if (!this.user.image) { return this.cameraImage;
} else { return this.user.image; }
}
I don't think the issue is with the observable, since username displays and doing something like <img *ngIf="image" src="{{ image }}"> renders the image. I have to access the background-image attribute because apparently that is the best way to make a circular image, but in general would like to know how to do this.
EDIT:
My original [ngStyle] declaration had unnecessary curly brackets (ngStyle is a directive that can take a variable), and was missing string tags around url() and image. The correct way is (as answered below) is:
<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>`.
As stated in the original edit, a solution can also be achieved with the Renderer class in Angular 2. I have yet to do it but think there should be a way with setElementStylesor something like that. I will try to post an example but would love if someone else showed me (and others) how to for the time being.
I think that you should use something like that:
<div class="profile-image"
[ngStyle]="{ 'background-image': 'url(' + image + ')'}">
where image is a property of your component.
See this question:
How to add background-image using ngStyle (angular2)?
You don't need to use NgStyle. You can also do this:
[style.background-image]="'url(' + image + ')'"
See more at How to add background-image using ngStyle (angular2)?
redfox05's answer works well since there is no space in the image URL, but by a bit change in code we can make it work again:
<div style.background-image="url('{{image}}')"></div>"
The main reason is simple, you declared a global variable as blankImage but in the template you called image instead of blankImage.
Your ts code variable blankImage
blankImage: string = '../assets/.../camera.png';
Your template code variable image
<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>
that's wrong
I think you should add:
<div class="profile-image" [ngStyle]="{ 'backgroundImage': url({{image}})">
Regards
I am using This tutorial as a reference, and I am trying to use the below piece of code in my project :
let _setPlaceholderText = ( string = "Click or Drag a File Here to Upload" ) => {
template.find( ".alert span" ).innerText = string;
};
It works fine with the tutorial code when I download it and tested it, but when I copy pasted exact the same code to my project it didn't work.
If I am not mistaken the problem has to do with this line of code :
template.find( ".alert span" ).innerText = string;
can anyone explain for me what is ".alert span"? the tutorial says that the above line attempts to find the .alert span element only. Unfortunately, it wasn't enough for me to understand how to get it to work in my project.
Any help please
It looks like you're looking at the inner text for a piece of CSS intended to modify the style of span elements contained within anything that has the class name alert.
It might looks like this:
<style type="text/css">
.alert span {
color: #ff0000;
}
</style>
For modifying something like this:
<div class="alert">
<span>There was an error!</span>
</div>
A dot on top of an variable means its derivative with time. I want to type this in a HTML page. How do I do that??
PS-essentially the equivalent of \dot{x} in latex.
MathJax can to that for you :)
or even you can use a simple script to change your text in to an image using this:
http://www.codecogs.com/latex/integration/htmlequations.php
using the script above you can get this:
http://latex.codecogs.com/svg.latex?\dot{x}
and these are all latex codes you may need:
http://web.ift.uib.no/Teori/KURS/WRK/TeX/symALL.html
Although this question is years old, I did not find a solution without external libraries. So, here is one. I created a Razor component, but of course you can avoid this by copying its content to your HTML and replace #ChildContent by the letter(s) you need the dot above.
DottedLetter.razor
<span class="d-inline-flex justify-content-center dot-wrapper">
#ChildContent
</span>
#code {
[Parameter] public RenderFragment ChildContent { get; set; }
}
DottedLetter.razor.css
.dot-wrapper {
position: relative;
width: fit-content;
}
.dot-wrapper::after {
position: absolute;
bottom: 50%;
content: '\2024'
}
Usage in HTML
<DottedLetter>Q</DottedLetter>
Note, there are many dotted letters available, see here, but e. g. not <DottedLetter>Q</DottedLetter>.