I am new to Vue.js and I am currently trying to figure out how to maintain whitespaces in the options of my HTML "select" drop-down. I am using v-for to populate the list like this:
<option
v-for="category in displayCategories"
:key="category">
{{ category }}
</option>
And the list items look like this (in a string array):
`SECTOR`,
` Food and Drink`,
` Education`,
` Transport`
Currently, something seems to be trimming out the space characters. I'm not sure if the problem lies with Vue or HTML...
Thanks for your time,
Josh
In the Django docs it says:
Django templates escape specific characters which are particularly
dangerous to HTML. While this protects users from most malicious
input, it is not entirely foolproof. For example, it will not protect
the following:
<style class={{ var }}>...</style>
If var is set to 'class1 onmouseover=javascript:func()', this can
result in unauthorized JavaScript execution, depending on how the
browser renders imperfect HTML.
How can I prevent this?
I'm not especially familiar with Django, but it looks to me like the error they intended to point out is that there are no quotes around the attribute value, meaning that the space in the example value causes the rest of the string (onmouseover=...) to be interpreted as a separate attribute. Instead, you should put quotes like so:
<style class="{{ var }}">...</style>
If I understand correctly, this would be safe since all the characters that could interfere with the quoting are escaped. You might want to verify that interpretation; for example, write <span title="{{ var }}">foo</span>, run the template with foo set to <>"'&, and then make sure that they're properly escaped in the HTML and that the title appears in the browser with the original characters.
One thing you can do is not allow variable classes. You can use something like
<style class={% if class_foo %}foo{% elif class_bar %}bar{% else %}baz{% endif %}>...</style>
There are also filters available to prevent xss elsewhere: https://docs.djangoproject.com/en/dev/ref/templates/builtins/#std:templatefilter-escape
I'm using Flask and Sqlite.
I take some string, which contains newlines, and store it in the db. At some later point I get it from the db and include it on some page, and the string shows up without newlines. What's with that?
For example if I have
{{ entry.content }}
in my template, and the entry that was stored had content "hello\nhello", it displays "hellohello" on the page.
However if I have
{{ entry.content.replace('\r\n','<br />') }}
or
{{ entry.content.replace('\r\n','
') }}
in my template, it will display "hellohello" or "hello
hello" on the page.
So my impression is that the newline characters just aren't being interpreted and displayed by the browser. What am I doing wrong?
Try {{ entry.content|safe }} so Flask/Jinja doesn't escape your HTML.
(Be careful, though, as any user entered content, including script tags, will be output as-is. If you really want to be cautious and only allow tags you might want to do write your own scrubber: Jinja2 escape all HTML but img, b, etc)
I am trying to grab contents/tags inside form tag using preg_match_all, here is the regular expression
/<form\b[^>]*>(.*?)<\/form>/i
But i wonder, why it doesn't work! Any idea?
By default, the . (DOT) does not match line breaks. If you enable DOT-ALL with the s modifier, it does match those chars:
/<form\b[^>]*>(.*?)<\/form>/is
Realize that you won't be able to match something like:
<form>
...
<!-- </form> -->
...
</form>
to name just one of the possibilities.
Don't use regular expressions to parse HTML. Use an HTML parser.
In a drop down list, I need to add spaces in front of the options in the list. I am trying
<select>
<option> Sample</option>
</select>
for adding two spaces but it displays no spaces. How can I add spaces before option texts?
Isn't   the entity for space?
<select>
<option> option 1</option>
<option> option 2</option>
</select>
Works for me...
EDIT:
Just checked this out, there may be compatibility issues with this in older browsers, but all seems to work fine for me here. Just thought I should let you know as you may want to replace with
Use \xA0 with String.
This Works Perfect while binding C# Model Data to a Dropdown...
SectionsList.ForEach(p => { p.Text = "\xA0\xA0Section: " + p.Text; });
I think you want or
So a fixed version of your example could be...
<select>
<option> Sample</option>
</select>
or
<select>
<option> Sample</option>
</select>
As Rob Cooper pointed out, there are some compatibility issues with older browsers (IE6 will display the actual letters "& nbsp;"
This is how I get around it in ASP.Net (I don't have VS open so I'm not sure what characters this actually gets translated to):
Server.HtmlDecode(" ")
i tried multiple things but the only thing that worked for me was to use javascript. just notice that i'm using the unicode code for space rather than the html entity, as js doenst know a thing about entities
$("#project_product_parent_id option").each(function(i,option){
$option = $(option);
$option.text($option.text().replace(/─/g,'\u00A0\u00A0\u00A0'))
});
You can also press alt+space (on mac) for a non-breaking space. I use it for a Drupal module because Drupal decodes html entities.
I'm nearly certain you can accomplish this with CSS padding, as well. Then you won't be married to the space characters being hard-coded into all of your <option> tags.
#Brian
I'm nearly certain you can accomplish this with CSS padding, as well. Then you won't be married to the space characters being hard-coded into all of your tags.
Good thinking - but unfortunately it doesn't work in (everyone's favourite browser...) IE7 :-(
Here's some code that will work in Firefox (and I assume Op/Saf).
<select>
<option style="padding-left: 0px;">Blah</option>
<option style="padding-left: 5px;">Blah</option>
<option style="padding-left: 10px;">Blah</option>
<option style="padding-left: 0px;">Blah</option>
<option style="padding-left: 5px;">Blah</option>
</select>
Just use char 255 (type Alt+2+5+5 on your numeric keypad) with a monospace font like Courier New.
Can you try that? Or is it the same?
Server.HtmlDecode(" ") is the only one that worked for me.
Otherwise the chr are printed as text.
I tried to add the padding as a Attribute for the listitem, however it didnt affect it.
I was also having the same issue and I was required to fix this as soon as possible. Though I googled a lot, I was not able to find a quick solution.
Instead I used my own solution, though I am not sure if its appropriate one, it works in my case and exactly which I was required to do.
So when you add an ListItem in dropdown and you want to add space then use the following:-
Press ALT and type 0160 on your numeric keypad, so it should be something like ALT+0160. It will add a space.
ListItem("ALT+0160 ALT+0160 TEST", "TESTVAL")
In PHP you can use html_entity_decode:
obj_dat.options[0] = new Option('Menu 1', 'Menu 1');
obj_dat.options[1] = new Option('<?php echo html_entity_decode(' '); ?>Menu 1.1', 'Menu 1.1');
I tried several of these examples, but the only thing that worked was using javascript, much like dabobert's, but not jQuery, just plain old vanilla javascript and spaces:
for(var x = 0; x < dd.options.length; x++)
{
item = dd.options[x];
//if a line that needs indenting
item.text = ' ' + item.text; //indent
}
This is IE only. IE11 in fact. Ugh.
1.Items Return to List
2.Foreach loop in list
3..
foreach (var item in q)
{
StringWriter myWriter = new StringWriter();
myWriter.Lable = HttpUtility.HtmlDecode(item.Label.Replace(" ", " "));
}
This work for me!!!