I am trying to insert a placeholder icon into a select2 input field.
View on desktop:
View on mobile:
Here is the code I use to integrate font awesome using unicode, to place the icon in a input field.
jade (element in which I initialize the select2 on)
#tags.icon(type="text", name="tags", placeholder= " tags...")
and CSS
.select2-input, #searchPosts
font-family 'FontAwesome'
The weird thing is, when I click into the input field, type and then clear the typing, and click outside, the tag icon shows correctly. But it does not show correctly on load.
Font Awesome and other icon sites often have compatibility issues across various different platforms. You should have back up options if unicode appears - such as a sprite.
Often mobile browser encoding is different to web version of the browser.
There are many ways to handle this and this article is a good place to start:
http://www.creativebloq.com/app-design/icon-fonts-in-apps-21410734
Without debugging it I'd say you're experiencing a z-index issue or an actual engine rendering mistake. Try setting the value later if you can. If you know the placeholder text is achieved through a dom element addition, try increasing its z-index. Good Luck.
Related
I get strange behavior when I try to insert icons to my elementor page design in SVG format.
This is the original design (supplied with zeplin.io) which im trying to implement with elementor
before I add the last icon, the result in elementor is:
You can see that only the first icon display as expected
Which is strange, but even more strange is that when I had the last I con I get this:
Now non of the icon display as expected, although some of then are more similar to the expected result.
The heart icon got flipped, and the colors changed for the other icons,
Why would adding a new icon effect other icons in such a way?
Why the color and the icon direction doesn't display as set by the SVG design?
NOTE, the direction might be RTL related, but why only the heart got flipped?
I know that I could easily solve this issue by changing the format to PNG, but I could like to understand the reason behind this behavior.
This is happens because the icons have duplicate class values, i.e. the svg is added as-is to the dom tree, along with the <style> definitions.
Therefore any class or id that is duplicated in two SVGs will collide, and the solution is
open the svg with any text editor
search/replace all id/class defined in <style> to have unique name
NOTE: the reason it doesn't happen in the orginial design is that there, the SVGs are added with img tag.
Woprdpress doesn't allow uploading SVGs as images for security reason (I have no idea what kind of security issue it can create, but this is a question by itself)
EDIT: I just noticed that once you add an SVG as an icon, it also become available as an image, so it might be a better solution to upload the SVG as icon and then use them as images. but I didn't try it.
(Discaimer: I only learned to code alone and upload some contents.)
I retrieved a symbol for a running person and used the code to build an html file to upload. The problem is that the image appears in different ways in different browsers.
A temporary mwe example.
direct view in my site ramoneando.com
code snippet:
<h1><span style="font-family:'Segoe UI Symbol';color:black;font-size:40px;">🏃</span>runner</h1>
(Desired) Image on local browser.
Why does this happen and how can it be avoided?
I actually am OK with the variants. The worse thing is that some look to the right and others to left. I would prefer to remain with the first image, in dark filling and looking to the right.
The problem is that not every computer has the font Segoe UI Symbol installed, so the ones that don't just display the character with code 🏃 in the default font.
For example, this is what the snippet looks like on my computer
(It used the font Unicode Upper, if you're interested.)
So what you can do is any of the following:
Accept that the "Man running" symbol looks differently in different fonts and keep it the way it is
Use Segoe UI Symbol as a webfont (this may be overkill for displaying just one icon)
Or make a screenshot of the icon and turn it into a png file.
I have a select box where each option has the potential to be very long. On desktop it's fine, but on mobile the text gets cutoff at the end of each line with an ellipsis. I need to be able to show the full text, or else the options may not be clear to my users. If I can make the text wrap rather than cutting off that would be fine, but I don't know how to accomplish this since I'm not sure how the iPhone handles select elements.
Select options on iPhone
According to this StackOverflow answer, there is no way to change the styling of <select> elements on iOS, as their display styles are built into the browser and not modifiable via CSS.
This answer suggests that you can use a customizable replacement such as Chosen if you would like more control over the style of your <select> boxes.
Apparently Chosen doesn't support iOS. A comment on another answer recommends Selectize.js as an iOS-compatible replacement.
I use Responsive Web design to turn my page into mobile layout, but something weird happens,, why the style of checkbox in IOS changes like that, the checkbox border disappear, and the check symbol is hollow.
please see the attachment.
The first image is the screenshot of Chrome
The first image is the screenshot of iphone4
What should I do to make the checkbox in IOS as same as normal checkbox?
In general, you shouldn't. Each browser and OS can style their controls differently. This is not a part of the HTML standard.
MacOS also styles their checkboxes different, as does Linux.
Why do you feel the need to change the way the checkboxes are styled? Users of that platform are used to the checkboxes looking the way that OS makes them. If you style them differently, then users will find this odd.
using SharePoint 2010 web editor
I created a (sub-menu) page with title CO<sub>2</sub>. When rendered in browser, the title of the page is: CO<sub>2</sub> whereas the menu item shows CO2.
Apparently it is escaping the HTML tags in page but rendering correctly inside the menu.
How to make the page title looks same as menu item?
No tags are recognized in a title element by HTML rules (and by browser practice); they are indeed rendered as such. In principle, you can use special characters like “₂” SUBSCRIPT TWO U+2082 in a title element. You can even denote them using character references:
<title>CO₂</title>
However, only some fonts support SUBSCRIPT TWO, and it is quite possible that the rendering of title elements e.g. in a browser top bar or tab label uses a font that does not support to it. In that case, a rectangle, vertical bar, space, or other generic indicator of missing glyph probably appears.
Note that the appearance is usually not quite the same as in the menu, since browsers implement sup by reducing font size and putting the glyph in a lower position. Only by accident would this coincide with the design of “₂” in a font. But if the texts are displayed in two different fonts, as they probably are, this is usually not a serious problem.