I am currently using ionicons as an icon pack for a project, when you manually refresh the page ( cmd + R ) all the icons that were previously rendered disappear. However, when navigating throughout the application via hrefs or on initial load all icons render correctly.
STEPS TO REPRODUCE
Add icons ionicons script to the body of app.html
Add icon to any svelte page e.g. <ion-icon name="add-outline"></ion-icon>
Manually refresh the page ( cmd + R etc.... ) and see that icons don't render
See here for a reproduction repo of the bug
This project choose a very strange and I suppose bad way to distribute the icons.
This way is not compatible with most async usagage.
They have had a bug about it last 3 years https://github.com/ionic-team/ionicons/issues/608
You can try this advice https://github.com/ionic-team/ionicons/issues/646#issuecomment-536150373 but I strongly recommend migrating to a different icon's set. These icons project designed for Ionic Framework or static websites only.
Related
I am using ngx-extended-pdf-viewer for my angular app and looks like multiple pdf pages are overlapping during viewing. here is my viewer code
<ngx-extended-pdf-viewer
*ngIf="isVisible"
[src]="pdfData"
useBrowserLocale="true"
[textLayer]="true"
[showPrintButton]="true"
[showDownloadButton]="true"
[showOpenFileButton]="false"
[showBookmarkButton]="false"
[showPresentationModeButton]="false"
height='90%'
[zoom]="'100%'">
</ngx-extended-pdf-viewer>
I tried setting stylesheets for page and viewer classes but no luck.
Sounds like you've got CSS rules interfering with the CSS rule of ngx-extended-pdf-viewer. Create a greenfield project to check if it's a general problem:
Open a terminal and navigate to the root folder of your project.
Run this command and accept the defaults:
ng add ngx-extended-pdf-viewer
Add the new component <app-example-pdf-viewer> to your <app-component> to display the PDF file.
Now you've got a working project that almost certainly does not suffer from your bug. Use the developer tools of your browser to compare the CSS code of the two projects to hunt down the bug.
I am creating a website with ASP.NET MVC and I am a beginner to this. I have found a theme from bootstrap that I want to use as my design for the website. Before I copied the bootstrap css file into my css in the website, there was the original menu including Home, About, Contact, Register, Log In etc.
But when I add the css file from bootstrap the menu disappears and only the name of the page is left showing. I have copied the file into both 'Content' Bootstrap.css AND bootstrap.min.css, but is there something I am missing here?
https://bootswatch.com/journal/
Debug your code in browser using inspect element sidebar (Ctrl + shift + I shortcut for google chrome).
go to console tab and refresh the page to check if your added file paths are being loaded successfully or not.
I Just need some Custom CSS code to change my Chat text a bit on an app called DiscordApp,
Auto Scroll To bottom of Page
Custom Text Size
Custom Avatar Text Channel Size
Link to DiscordApp
Link to Example CSS sheet for a random Theme
To inject custom CSS and JS into Discord, you'll need a third party plugin such as BetterDiscord
For the case of BetterDiscord, you have to follow their tutorial for the CSS changes. You can also dive into the settings and add it straight into custom CSS.
TLDR
Create a MyCSS.theme.css file with a META-tag and CSS
//META{"name":"My custom CSSScript","description":"Mine.","author":"Me","version":"1.0"}*//{}
.my-css-class{
/*Example...*/
}
Save this file to %AppData%\BetterDiscord\themes
Reload Discord with Ctrl+R and activate your theme, if you hadn't already
If you want to quickly try out themes or Javascript, hit the Ctrl + Shift + I keycodes. It'll open the developer tools of Discord
Auto Scroll To bottom of Page sounds more of a JS function though, you can easily achieve it by creating a scrollToBottom.plugin.js file containing at least
//META{"name":"ScrollDown"}*//
window.scrollTo(0,document.body.scrollHeight);
the function being inside of a button you place on screen. Discord supports jQuery, so pure javascript isn't even necessary.
The steps for adding javascript plugins is about the same, but inside of the plugins folder instead, and they're called MyPlugin.plugin.js
Note: installing unofficial third party tools or software might leave you prone to hacks, leaks and other security issues.
I'm having an issue with CKEditor regarding image properties. Spent many hours investigating this but ended up without solution.
I'm using Drupal 7 with the latest CKEditor AND IMCE.
When I click on the image icon on CKEditor tool bar, the image properties popup window came up but I was looking at the "advanced" tab is not showing up. No tab show up at all.
Is there any configuration that I have to apply in order to show up the tabs in the image properties?
you can try by reinstalling with ckeditor - 7.x-1.16 and imce - 7.x-1.9,
worked for me
I got this trouble when use cdn version of ckeditor instead of local.
To fix it download latest ckeditor from official site http://ckeditor.com/download. I have downloaded full version. Then copy files to /sites/all/modules/ckeditor/ckeditor. Before you copy here must be only 1 file with name COPY_HERE.txt. After copy folders adapters, lang... etc.
Then go to the global settings of the ckeditor admin/config/content/ckeditor/editg and set path to the local ckeditor library like this: %m/ckeditor. Save settings and check if advanced tabs exist now.
I have a mobile web application (.NET MVC) and I'm using JQuery Mobile (beta 3 & jQuery 1.6.3). My question is regarding the attribute 'data-icon' on various elements. For example, I have an element:
Home
When I run the application locally, everything appears as expected. There is a small circular button with the 'home' image inside. When I deploy my application to my host (Arvixe), this same button renders as expected in Chrome, but does not render as expected on my mobile phone (Nexus One). On my phone, the home icon image does not appear at all.
JQuery mobile is referencing the image sprites in the following manner:
background-image:url(images/icons-18-white.png);
I can verify this image does in fact exist in the proper location, as it appears on the desktop browser, I can get to it with a URL (Desktop and Mobile) and my host log shows that requests to that URL are coming back with a 200 response. I have even connected my web application, while hosted to a weinre server, and I can verify the DOM element does have the correct image path. What's even stranger, is that when I go to jquerymobile.com on my phone, the same icons appear, the problem seems isolated to my hosted site.
Is there something I'm overlooking? Thanks.
I think I may have solved this. When upgrading from jQuery mobile beta 2 to 3, I did not upgrade the corresponding images as well. Grabbing the updated images seems to have done the trick.
Plese place your images folder (which will come from jquery-mobile downloaded zip file) along with your css files.
Ex: If you have copied the .css files to some location named
d:\project\styles\jquery.mobile-1.x.x.css
Then please place the images folder as show below
d:\projects\styles\images
you need to set data-role="button" on anchors for them to appear as buttons with jQM (jQuery Mobile).
see here
Home
this is the only thing I can think of.
The latest jquerymobile has fixed this issue. If not, you need to check the following steps.
check images folder of jquerymobile and jquerymobile CSS are in the same directory
If you put jquerymobile CSS in separate folder, you need to change "path" in this stylesheet