Icons not appearing through application but okay when opening directly - asp.net-mvc

I am using bootstrap, but Icons will not work through VS 2013, if you load up icons.html directly it works fine and you can see the icons. But through the web server the icons are not displayed
http://localhost:51501/icons.html
Here is the source
https://dl.dropboxusercontent.com/u/54772190/bootstrap.zip
What is going on here?

Related

ASP.NET MVC grey bar on sample layout website missing

I started creating an ASP.NET (4.5.1) MVC project in VS2019 by following a tutorial. It is quite straight forward creating the HomeController and an Index View file. Files have not been changed so far. After compiling and opening in IE and FF I do not see the grey bar at the very top compared to the displayed one in the video tutorial. Instead, there is just a very small icon left to the "Application name" hyperlink but there should be a grey bar (div-element) wrapping "Application name" hyperlink and stretch from the very left to the very right.
Screenshot how it looks on my device and web browsers.
Screenshot how it should look like based on the video tutorial
It is for sure not critical at this stage but really wondering.
Does somebody know what is maybe missing / misconfigured?
I already searched web but there are thousands of other results being displayed.
Thanks
Best regards
I believe I found the issue. Bootstrap has not been installed as NuGet package. Therefore, I guess bootstrap 4 or 5 are used by default since bootstrap 3 is not supported anymore. By manually installing bootstrap 3 NuGet package, it perfectly works as expected. By updating to version 4 and 5, it breaks.

Browser compatibility issues with Bootstrap

I am using Bootstrap in my MVC 5 application. The problem is that it works well on Firefox 35 an above but the UI gets disturbed when I open on IE 9 and IE 10.
Also, button colors that I am using appear as white on IE.
I want to make the application compatible to all the browsers.
Is this the problem with Bootstrap or CSS? What changes to make to make site work well on all browsers?
You can check the Browser and device support for bootstrap for supported and not supported features.
Additionaly Wall of browser bugs for some more information of known browser bugs.

Typekit and #fontface issues on all Windows browsers with Ruby on Rails app, especially Chrome

My Ruby on Rails app hates custom fonts and I don't know why. Here are some of the errors and troubleshooting that I have gone through.
First, there were devastating display errors that only happened on Google Chrome on a PC. The text will overlap, paragraphs within the same div will have different widths, buttons will have shortened width, a copy will shift to the right on the page...to the point where some of the sites are unusable. I finally figured out that the browser seemed to not be understanding the font correctly. If I used websafe fonts like Arial and Georgia, the issues went away. So I thought that maybe the #font-face fonts that live on my server were corrupt. The Chrome issue also only appeared to happen on later versions of Chrome (20 and up). The weirdest part about this is that it only happens intermittently. Sometimes the page displays fine and sometimes it looks crazy. This has occurred on multiple computers and cache clearing does not seem to affect the error.
I then integrated Typekit from Adobe to serve the fonts instead from their server. Now the display errors are gone, but all Windows browsers ignore the typekit font and display the fallback fonts instead. That's IE, Firefox, and Chrome on Windows, various versions.
The site is part Ruby on Rails, part PHP (WordPress), and these issues only happen on the Ruby on Rails pages. The font files that I thought were corrupt are the same font files that work beautifully on the PHP side of the site.
Here are some screenshots of the initial Chrome issue with the server hosted fonts.
The site currently has the server hosted fonts live (with the Chrome error). A page on the site where this is happening: http://levoleague.com/jobs
Any ideas on why my app rejects fonts?
Looks like it's a CSS issue and you need overflow-wrap: break-word;

using programs like tinymce and ckeditor in ipad programming

I'm developing an application in ipad that requires a word processor functionality and since uitextview is very limited I want to use tinymce or ckeditor especially with iOS 5 being released. However when I try to load these api's index.html page in a uiwebview, the toolbar items don't show up (copy, paste, bold, ...) and the text has all the tags shown. Do I have to edit something in the index.html page or do I have to modify the javascripts or other files for it to work with uiwebview? Thank you.
I've tested the latest TinyMCE Full Feature demo on an iPad running iOS5 and Safari and found no problems.
As I understand it earlier versions didn't recognise Safari on iOS as a supported platform so it may be possible you are using one of those.

Opening my JQTouch Iphone WebApp for the home icon, why every external link open in another safari window?

Using the JQTouch library, usely links like the following ... should open the new page in the SAME window. That works fine when I go to the site using Safari BUT when I launch the site from the home saved icon, it opens a fullscreen site and on the first link it opens a NEW Safari window. How can I make it stay in the same original fullscreen window?
You have to set the target to _webapp. E.g:
<li class="arrow">Some Page</li>
and then it will load on the same page.
You need to look into manifest files.
The manifest file declares what files (html, javascript, css, jpgs etc.) that the iPhone should cache in order to make a webapp work offline. A part of the manifest file is used to declare which URLs are OK to use when in full screen (webapp) mode.
Specifically look at NETWORK in manifest files.
Example:
NETWORK:
*
This should allow access to any URL you like, and stay in webapp mode.
Alternatively use target="_self" - I haven't seen target="_webapp" anywhere.
/Mogens
One solution I found here is to change the way you write your links for a mobile app. Rather than a href='link.url' you'd write a href="javascript.window.location.href='link.url'"
Dislaimer: I haven't personally tried this yet, so I can't guarantee it will work. But logically, it does make sense.
Using target="_webapp" works only if you remove the rel="external", you cannot have both.

Resources