I am creating an MVC 4 application. The styles are working partially across the browsers. However i set this working good for IE. But many styles which works well in IE are failing in Mozilla. I have the following code in my _Layout.html.
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<!--[if IE]>#Styles.Render("~/Content/common.css")<![endif]-->
<!--[if !IE]>#Styles.Render("~/Content/MozSite.css") <![endif]-->
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
</head>
when i load FF, it is not picking the MozSite.css. How do i load this FF dynamically?
Related
It is possible to display an react/angular web application on WebView component ?
I build angular(angular cli) and react application in prod mode.
Next, prepared files I put inside ./assets folder.
After changes inside webpack.config.js and run
tns run android --bundle than nothing is shown beside of static texts.
home.component.tns.html
<GridLayout>
<WebView src="~/assets/seatmap/index.html"></WebView>
</GridLayout>
home.component.tns.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>t</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.x.css"></head>
<body>
<img src="favicon.ico"> // not displayed
<img src="./favicon.ico"> // displayed
<app-root></app-root> // nothing is displayed
<b>This text is displayed</b>
<script type="text/javascript" src="runtime.x.js"></script>
<script type="text/javascript" src="polyfills.x.js"></script>
<script type="text/javascript" src="main.x.js"></script>
</body>
</html>
Javascript files are loaded. There is no problem with path.
When I change src to any external web site (src="http://facebook.com") everything is ok.
Duplicate of NativeScript WebView loading local resources in src document
It's known issue with iOS, please refer my answer there which includes possible workarounds.
I'm using dotnetcore and ASP MVC.
The problem is that I don't know how to serve correctly my css and images files.
Here you can see the file structure:
Here is the Shared layout's head.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Galeria de comics">
<title>#ViewBag.Title - Galeria de comics</title>
<link rel="stylesheet" href="~/wwwroot/css/normalize.css">
<link rel="stylesheet" href="~/wwwroot/css/main.css">
</head>
<body>
<header class="main-header"></header>
#RenderBody()
</body>
</html>
I'm called this layout in a View.
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Libro comic detalle";
}
What's the problem?
The problem is that the CSS files aren't serve so I can't see the styles.
Any solition?
Seems I miss the href attribute's content. You should skip the wwwroot folder since the static files are served as http://app/css/cssFileName. Example: http://yoursite.com/css/main.css, same with images and js files.
Here I fixed the problem:
<link rel="stylesheet" href="~/css/normalize.css">
<link rel="stylesheet" href="~/css/main.css">
If you want to know more visit this link
I have a simple typescript game(using Phaser.io) that i what to run from an ASP.net MVC application in an MVC 5 View page with Layout (Razor)
I have added the view and the controller
/Views/Home/About.cshtml
#{
ViewBag.Title = "About";
}
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="~/phaser.js"></script>
<script src="~/app.js"></script>
<div id="game"></div>
The game starts but it does not show any images. It looks like the reference to the image is wrong.
http://asskicker3.azurewebsites.net/Home/About
I reference the images as follows in the app.ts:
preload() {
this.game.load.image('background',"assets/background.jpg");
If i add an HTML page to the root of my folder it all work perfect.
http://asskicker3.azurewebsites.net/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body style="margin:0px; padding: 0px;">
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="phaser.js"></script>
<script src="app.js"></script>
<div id="game"></div>
</body>
</html>
Answer:
James Skemp solutions works. Just by adding the / it all works. Perfect!
Your asset references are relative.
So if you look at the network tab in a browser you'll notice that it's trying to load the graphics relative to the URL. For example, http://asskicker3.azurewebsites.net/Home/assets/background.jpg
One way to fix this would be to change your preload so that the asset URLs are absolute instead of relative. So
this.game.load.image('background', "assets/background.jpg");
would become
this.game.load.image('background', "/assets/background.jpg");
I'm a beginner to coding and have what seems to be a beginner question. I'm working in Ruby on Rails.
It appears that (all of a sudden) my application is ignoring my section across all of my pages. The implications are that the title is not appearing on the browser tabs and the css is not rendering in the mobile production environment (although it is working on desktop dev/prod and mobile prod). the code is below. Can someone help me? Thanks in advance!
<!DOCTYPE html>
<head>
<title>Home | XXXX</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
It must be inside tag. Please check your code. Hope this will help you.
<!DOCTYPE html>
<html>
<head>
<title>Home | XXXX</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
</html>
I've found a strange issue when using JQM + IE10 and touchscreeen on a Windows 8 tablet. When using an external mouse och the trackpad everything works as expected but when I'm using the touch screen normal links in JQM are not working.
Having two very basic JQM pages, b.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is b.html
link to a.html
</body>
</html>
and a.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is a.html
link to b.html
</body>
</html>
Navigation gets stuck on the second one using the touch screen, mouse and trackpad working fine. I guess this is connected to JQM ajax navigation model and the new touch events in IE10, but can't figure out exactly how to solve this.
Chrome is working fine with both mouse/trackpad and touch screen.
EDIT: Might have found a possible workaround, adding this to the css
a {
-ms-touch-action: none;
}