I am using a complex object whose values are represented with Blazor. Among others there is a list of strings. Some strings contain a bullet, but these are represented as rectangles.
How can I manipulate the display so that the bullets are displayed?
My string:
razor file:
#for (int i = 0; i < #item.Highlight.Count() && i < 5; i++)
{
<div class="searchHighlight">#((MarkupString)#item.Highlight[i])</div>
}
The bulled at the html page:
You could replace • with the HTML equivalent •
#for (int i = 0; i < #item.Highlight.Count() && i < 5; i++)
{
<div class="searchHighlight">#((MarkupString)#item.Highlight[i].Replace("•", "•"))</div>
}
Then casting it as MarkupString should render it properly.
I've tried to imitate the same string data as you have, and, unfortunately, I could not reproduce this issue. It is pretty hard to tell where is the problem: CSS, fonts, metatags, string itself or something else. Anyways, according to the positive reaction to Waragi's suggestion, you could try some of these options:
Try to put bullet point HTML Unicode outside of your razor parentheses, like this:
<div class="searchHighlight">•#((MarkupString)item?.Highlight.Replace("•", ""))</div>
Also, you can avoid adding a bullet point HTML Unicode above by adding some styles to searchHighlight:
<div class="searchHighlight">#item?.Highlight.Replace("•", "")</div>
<style>
.searchHighlight::before {
content: "\2022";
}
</style>
I hope it helps!
Related
For following example codes
<div>
#for (int i = 0; i < 10; i++)
{
<span class="#classes[i]">#i</span>
}
</div>
What I want to display is (with each character in different style)
01234567890
but what actually display is (additional whitespace between each characters)
0 1 2 3 4 5 6 7 8 9
I use ILSpy to investigate what happens in the render tree, and found following
__builder.OpenElement(2, "div");
__builder.AddMarkupContent(3, "\r\n");
for (int i = 0; i < 10; i++)
{
__builder.AddContent(4, " ");
__builder.OpenElement(5, "span");
__builder.AddAttribute(6, "class", classes[i]);
__builder.AddContent(7, i);
__builder.CloseElement();
__builder.AddMarkupContent(8, "\r\n");
}
__builder.CloseElement();
The sequence 4 adds additional whitespaces and sequence 8 adds "\r\n", which I believe is the reason of the additional whitespace between characters.
I could mitigate the issue by writing in this way
<div>#for (int i = 0; i < 10; i++)
{<span class="#classes[i]">#i</span>}
</div>
However, when there are more and different contents in the same line, the code would be very long. Also when I press Ctrl+D to format the document, in some scenarios VS would "fix" the code in wrong way.
I would like to see if there's any better suggestion for this issue. I thought about following (but couldn't find solution yet)
Use CSS to ignore whitespaces and \r\n between spans
Somehow add extra #{} to help formatting.
Some magic parameter to avoid whitespaces and \r\n added to the render tree.
I guess you are still using aspnetcore 3.x, as this was fixed in .NET5.
Try it in a .NET5 Blazor project - it should work fine.
I want to add styling to an element only if it contains a particular string. i.e. if(el contains str) {el:style}.
If I wanted just the links containing w3.org to be pink, how would I find <a href="http://www.w3.org/1999/xhtml">article < /a> inside the innerHTML and then style the word "article" on the page.
So far, I can turn ALL the links pink but I can't selectively target the ones containing "www.w3.org".
var links = [...document.body.getElementsByTagName("a")];
for (var i = 0; i < links.length; i++) {
links[i].style["color"] = "#FF00FF";
}
How would I apply this ONLY to the elements containing the string "w3.org"?
I thought this would be so simple at first! Any and all help is appreciated.
While you can't filter by non-exact href values when finding the initial list, and you can't filter by contained text then either, you can filter the list after the fact using plain javascript:
var links = [...document.body.getElementsByTagName("a")];
for (var i = 0; i < links.length; i++) {
if (links[i]['href'].indexOf('www.w3.org') == -1) { continue };
links[i].style["color"] = "#FF00FF";
}
Assuming you want to filter by the href, that is. If you mean the literal text, you would use links[i]['text'] instead.
On my html page, I want to make a list from a collection of entries in my model. However, some of those entries may be null, and in that case I want to have an empty list item, like so:
Something
Something else
More stuff
I do that by inserting a non-breaking space character. (regular whitespace won't generate empty list items) Here's a code snippet:
<ul>
#{
foreach (var x in Model.Entries)
{
var rayon = x.Rayon ?? " ";
<li>#rayon</li>
}
}
</ul>
Sadly, this does not work because it instead pastes verbatim.
And removing the quotation marks, and/or adding #: at the start, won't compile.
What can I do?
You can use Html.Raw.
use like this
<li> #(Html.Raw(rayon)) </li>
Instead of " " just give a blank string:
var rayon = x.Rayon ?? string.Empty;
In fact, I think you can even just scrap that variable assignment together and just use x.Rayon as-is - a null value should have the same effect
<ul>
#{
foreach (var x in Model.Entries)
{
<li>x.Rayon</li>
}
}
</ul>
Update:
Both above work for me. So, if still not working, it looks to be down to CSS/styles on your ul.
e.g.
OK, I think this is down to CSS/styles on the ul that you have then (both above work fine for me). e.g. the following CSS would hide empty li elements:
ul li:empty {
display: none;
}
So, check out your CSS.
If you don't want to change the existing style, you could add an extra class to your CSS and apply that for just this instance.
i.e.
CSS:
ul.show-empty-li li:empty{
display:list-item;
}
HTML:
<ul class="show-empty-li">
...
</ul>
I've been learning regex and for that I have been working on Hackerrank problems. I came across a problem where I am asked to remove html format and only keep whatever is inside an anchor tag's reference (the value of the href part), and the text inside the tag, then present this separated by a comma.
I came up with the following code to extract such information:
public static void main(String[] args) {
Scanner s = new Scanner(System.in);
int n = s.nextInt();
s.nextLine();
for (int i = 0; i < n; i++) {
String line = s.nextLine();
Pattern p = Pattern.compile("(.*)<a href=\"([^\"]+)\"([^<>]*)>(<\\w+>)*([^<>]+)</a>(</\\w+>)*");
Matcher m = p.matcher(line);
while (m.find()) {
System.out.println(m.group(2).trim() + "," + m.group(5).trim());
}
}
}
This code, when presented with cases such as <p>text</p> Passes and outputs folder/page,text
But if the input has multiple <a> tags, it will only grab the last occurrence of it and output that, instead of outputting all possible matches for that single input. Why is this happening? Please don't feel obliged to answer my question fully if you think I can answer it myself with just a hint. Thank you for any answers in advance
I am really struggling to master Jade. I want to do something very very simple: print out "some text" 3 times. I have a mixin function:
mixin outputText()
- for (var i = 0; i <= 3; i++)
span some text
This works fine. Now when I try to output more text on a second line, so first I need to use {} as later there will now be 2 spans on 2 different lines. So first, surrounding current function with curly brackets:
- for (var i = 0; i <= 3; i++){
span some text
- }
But I get the error: unexpected token "indent"
I have seen someone here doing the EXACT same thing. Why wont it work for me?
Might I recommend iteration? If you are working with values this is perfect:
ul
each val, index in ['zero', 'one', 'two']
li= val
li= Some Text
However if you are simply looking to repeat lines over you could do this:
ul
while n < 4
li= Sometext
A handy guide by Jade
Try it. When your function have surrounded with curly brackets, you don't append indent within for-loop code
- for (var i = 0; i <= 3; i++){
span some hello
- }