I'm trying to get emoji in a dropdown (select tag) menu in my Angular 6 project. I'm using unicode for this. So far I only managed to get some emoji (like ♥) to show. I want emoji like these: 😄😐😡 but all I see in the browser is an empty square.
I tried creating a simple, plain html file and than the emoji all show up in the dropdown menu. However, when I try to implement this in the angular template, it doesn't work anymore.
I also tried downloading the Symbola font and adding it to the CSS, but no luck there either.
This is the template:
<div class="postContainer postContent bg-dark" style="width: 80%;">
<form class="postForm" [formGroup]="newPost" (ngSubmit)="saveNewPost()">
<label class="text-warning label">Smiley</label>
<select formControlName="smiley" class="custom-select mr-sm-2 col form-control-lg" id="inlineFormCustomSelect"
[ngClass]="{ 'is-invalid': submitted && f.smiley.errors }">
<option selected>Choose...</option>
<!-- Attempt with the Symbola emoji font -->
<option value="Smiley1"><span class="emoji">😄</span></option>
<!-- Attempt without the Symbola emoji font -->
<option value="Smiley2">😄</option>
</select>
</form>
</div>
In my styles.css the font-face for the Symbola font
#font-face {
font-family: "emoji", "Symbola";
src: url("./assets/fonts/emoji/Symbola-Emoji.woff") format("woff"),
url("./assets/fonts/emoji/Symbola-Emoji.ttf") format("ttf");
}
In the template's CSS file adding the Sybmola and emoji fonts:
.emoji {
font-family: "emoji", "Symbola";
}
It's weird that it's working in a separate html file, but not within my Angular project. I'm using Visual Studio Code editor, if that matters. Does anyone know what the problem is here?
Update 1:
If I copy the emoji itself and place it in a variable in the component:
smiley: any = '😄';
And then enter it in the template:
// Form and select tags...
<option value="Smiley2">{{smiley}}</option>
It shows the smileys in the dropdown menu in Firefox, but not in Chrome.
Update 2:
It seems to be a Chrome issue. I tested a few random smileys and so far only emoji from unicode 7.0 to 10.0 (https://emojipedia.org/unicode-7.0/) work for the select tag in Chrome, older versions don't. The emoji from other version however do show up in 'normal' tags like paragraph tag. Just not in the option tag of the select menu. All emoji I want to use are part of unicode versions 6.0 and 6.1
Does anyone know how to solve this issue?
Update 3:
So I added a few emoji to the dropdown menu and restarted Angular and Chrome. The emoji all show, even those from unicode version 6. However if I refresh (F5) the page, the emoji from version 6 disappear from the menu. So I guess my problem is now half solved:
Not really a code based answer, but I found a solution for Chrome.
Apparently, I had a Chrome extension installed (Chromoji), which supposedly allows newer emoji in Chrome. It did, because the emoji looked different with that extension (the newer emoji unicode was visible). I removed the extension and now I only see the older version, but at least all emoji are visible now all the time.
This has been a pain in the neck for me for days. I hope Google will solve their emoji issue one day.
Related
I'm using Clarity and Bootstrap together in an Angular project, but styling conflicts seem to be popping up, as the styling is not working as intended.
I've tried changing the CSS around in Chrome devtools. I noticed that reboot.scss might be causing some of the problems, but I don't know what to do about that if it is.
Here's the component code.
<h3>New Post</h3>
<form #productEditorForm="ngForm" clrForm>
<clr-select-container>
<label>Location</label>
<select clrSelect name="Location" [(ngModel)]="LocationID">
<option *ngFor="let location of Locations" [value]="location.ID">{{ location.Name }}</option>
</select>
</clr-select-container>
<clr-input-container>
<label>Images</label>
<input clrInput #files type="file"/>
</clr-input-container>
<button class="btn btn-primary" type="submit">Post</button>
</form>
The expected appearance of the selectbox is like the examples found here. The expected appearance for the button is like the primary button found here; the font size of the buttons is supposed to be .5rem, but the actual size is 1. The intended default font is Metropolis, but the actual font is Segoe UI. The page isn't supposed to have flickering scrollbars and jittery contents, but the actual page does. Where do I go from here?
There are many Angular carousel implementations (this one is built upon Bootstrap but is able to be used in an isolated way https://ng-bootstrap.github.io/#/getting-started) and they would be able to provide the necessary functionality.
If you do load Bootstrap, you would want to load it before Clarity so Clarity has the final say on the styling.
The problem
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
(Demo at jsfiddle)
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
This was tested and reproduced on:
IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
IE 11.0.9600.16438 on Windows RT 8.1 tablet.
IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
IE 11.0.10240.16431 on Windows 10
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
Questions:
Can this be solved without JS while still using image tags?
If not, what other possible solutions are there?
(Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?
One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)
label{
display: inline-block;
}
label img{
pointer-events: none;
}
(Demo at jsFiddle)
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
.
The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
?>
<script>
$(document).ready(function() {
$("label img").on("click", function() {
$("#" + $(this).parents("label").attr("for")).click();
});
});
</script>
<?
}
I know its JS, but there is actually no other fix for =< IE10 without JS usage.
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
EDIT: when I load my page on local with no CSS files, the date picker works just fine. How do I doctor my css / bootstrap less files to get them to leave the date picker alone???
Im running this on up to date chrome desktop with some bootstrap styling thrown in. Chrome desktop supposedly has date picker support, and the chrome date picker input UI displaying, and the arrows are working, however the drop down carrot that displays the calendar is really buggy (doesnt always display). Some days it drops down, other days it doesnt. Any idea what could be going on? I've tried removing all of the bootstrap and other css, divs etc, till buggy. This is a backend part of the site, and as such it doesnt need cross browser support, and I'd rather not further pollute my javascript with more jquery...
<div class="col-sm-3">
<div class=form-group><label>Created After</label>
<input class="form-control" type="date" name="created" style="color: #000000;">
</div>
</div>
You could use a datepicker for bootstrap: Bootstrap Datepicker
I used it for a project I worked on, didn't cause any problems. Documentation is provided, if you're not using bower, you can just add the Javascript and CSS file to get it working.
I am designing a dropdown combobox to show the price listing of products.
For that I have embedded the Rupee font in css.
This is the code:
<select class="comboboxstyle" name="sports" id="sports">
<option class="optionstyle" value="subscribe">Subscribe</option>
<option class="optionstyle" value="monthly">Monthly <span style="font-family:Rupee">`</span>30</option>
<option class="optionstyle" value="weekly" >Weekly<span style="font-family:Rupee">`</span>20</option>
<option class="optionstyle" value="daily">Daily<span style="font-family:Rupee">`</span>10</option>
</select>
But, the browsers are not supporting the font tag in option tag, whereas it is working fine if it's not in the option tag.
I can't apply the Rupee font in the whole thing, as then only rupee symbol shows and other text disappears.
Any help...
You cannot use a HTML tag inside <option>, your workaround is using the style for the <option> itself like this sample:
<select>
<option style="font-weight: bold;">Text Text 1</option>
<option style="font-family: Rupee;">Text Text 2</option>
<option style="color: #FF0000;">Text Text 3</option>
</select>
Use a properly encoded (Unicode encoded) font, or find a replacement for the rupee symbol (a name, an abbreviation, an international currency code, another recognized symbol, or whatever suits the context and audience).
I suppose you mean INDIAN RUPEE SIGN (U+20B9) and not the older, more widely supported generic RUPEE SIGN. The new symbol has been implemented in several properly encoded fonts, see
http://www.fileformat.info/info/unicode/char/20b9/fontsupport.htm
but note that the information applies to fairly new versions of the fonts – for example, modern Arial contains it, but old versions of Arial (created before the symbol was defined) obviously won’t.
But you might consider using a suitable free font, such as DejaVu Sans, as a downloadable font, via #font-face. This would mean that your select menus have a font different from the rest of the page, but this should not be a big problem. People are used to such things, and even by default, many browsers use a special font there.
The reason why setting the entire element’s font fails is that the Rupee font used is one of the 8-bit fonts around, trying to implement some new (or otherwise special) symbols in a quick and dirty way. The trick is based on an old idea (nowadays mostly abandoned, except in contexts like this) of changing the identity of a character by changing the font. That is, turning “a” to “b” by using a font where a glyph for “b” appears in place of “a”. Such tricks generally fire back, one way or another.
I've got an ASP.NET 4 app being developed and tested against http:// localhost/mysite - I spent a while looking into a problem with Twitter Bootstrap buttons in Firefox (v12.0) where they looked weird.
However I noted that, when testing, if I swapped the URL and changed 'localhost' for my machine's FQDN (e.g. http://mymachine.mydomain.com/mysite) then it worked normally and as expected.
This is kinda good news because it means that there isn't a "bug" as such that I have to fix but I'm curious about why it's happened in the first place.
The weird behaviour is as follows:
The 'button' is marked up as follows (in this case, a <a> to look like a button):
<p><a class="btn btn-success" href="checkout.aspx"><i class="icon-shopping-cart icon-white"></i> Checkout</a></p>
I also have the same behaviour when using a 'real' button, marked up as follows:
<p><input type="submit" name="ctl00$cphMainContent$btnProceedToCustomerDetails" value="Next: Your details" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$cphMainContent$btnProceedToCustomerDetails", "", true, "", "", false, false))" id="cphMainContent_btnProceedToCustomerDetails" class="btn btn-primary" /></p>
In both cases, the buttons render in a grey, unreadable state and then sort of 'fill up' in green colour when you hover over, until it is about 75% filled up and then stops filling up.
Here's some images
The <a class="btn btn-success">
On load (before mouseover)
When you put your mouse over it, it fills up with colour from the bottom up in about 0.5 seconds, finishing up looking like this:
The <input type="submit" class="btn btn-primary">
On load (before mouseover)
After mouseover, again it fills up with colour from bottom up, in about 0.5 seconds, and looks like this:
Like I say, this only happens when using Firefox, and only when looking at localhost. Other browsers are fine. I am using a freshly downloaded copy of bootstrap.js (downloaded today) with no amendments, I only include one other css file, and even when I don't include it, it's the same behaviour.
I ran into this problem earlier today. This link: twitter bootstrap button changes rendering oddly in firefox and chrome helped me.
In my css, I applied the following:
.btn-primary, .btn-danger, .btn-success { background-image: none; filter: none;}
It worked. My pages now render correctly in firefox. Chrome worked fine for me.
After lots of efforts, I was finally able to pin down this issue to a specific CSS-Hack in Twitter Bootstrap.
Removing * (asterisk) from *background-image of btn-primary and other similar classes resolves this issue.
But the problem itself is not in the CSS. It has got to do with the implementation.
For example, I was using AjaxMin to minify and combine CSS and since *property is not a valid CSS, Ajaxmin was ignoring it rendering the final CSS without those properties. Buggy button effects being one such side-effect.