I am creating a web app in mvc using Javascript and Jquery.
when I comment the line for layout which is below,
//Layout = "~/Views/Shared/myLayout.cshtml";
my ui looks fine in all the mobile devices, but when I un-comment this line like the following,
Layout = "~/Views/Shared/myLayout.cshtml";
my font-size decreases and it makes very difficult to understand,
my myLayout.cshtml is empty
what is the problem here and how can I solve this?
Kindly edit your myLayout.cshtml to
<!DOCTYPE html>
<html lang="en">
<head>
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
#RenderBody()
</body>
</html>
Then in your view, remove all the <html>, <head> and <body> tags.
The trick here is <meta> tag. You can learn more about it here.
Related
I decided that I wanted to learn Jquery Mobile so I set up a test site and instantly came across a weird bug, from what I've read and seen data-theme="a" should be the white theme and data-theme="b" should be the black/grey one. However, for me it's the other way around.. Have I perhaps done something wrong when downloading the library onto my site? And does this matter or should I just ignore it?
The markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div data-role="page" data-theme="a">
<h1>Testing</h1>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
This is what I get with data-theme="a":
I think it might be because your using a pretty old version of jquery mobile, I see you're referencing version 1.2.1, try version 1.4.5.
I'm using PhpStorm 8.0.2. On certain file types like .html the editor limits what I can type. For example, pressing Enter does nothing inside any of the tags (if I want a new space, I need to type Shift-Enter.
This happens even with a stub text:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
Let's say I'm on the line with the body tag, and hit Enter. Nothing happens. Similarly, if I try to close a div with a '>', the editor won't let me, like so:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test"
</body>
</html>
I've disabled all third party plugins, and sifted through the editor settings to see if some auto-formatting settings would be responsible, but I haven't found anything applicable. I've tried to delete the .idea folder in the project root in case the project files would've somehow become corrupted (made no difference), and also tried to turn off HTML inspections (made no difference).
It's also interesting to note that the editor does let me add '<' and '>' characters when they're not associated with any tags:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<<><<><><<<>>><<><
</body>
</html>
This suggests that specific keypresses are indeed limited by some kind of context-awareness that is not working as expected.
Any thoughs on this? I've observed this on earlier versions of PhpStorm as well.
Thanks!
Please try invalidating caches(File/Invalidate caches, Restart). Such issues can be caused by broken indexes
So, below is a snippet of code that I have in my application.html.erb file.
<doctype></doctype>
<html>
<head>
<title>Test Title</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
The Issue: For some reason rails is taking this code and adding it to the body. (see below) When, if i'm not mistaken, it should create the html based off of this code. I've never run into this problem before with rails, and can't seem to find a solution. It's not turbolinks or anything else i've been working with. What could the issue be?
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<doctype></doctype>
<title>Test Title</title>
<h1>Hello</h1>
</body>
</html>
P.S. This is not my original code, i've broken it down to the bare minimum to show you what the problem i'm running into is.
the doctype looks off. try:
<!DOCTYPE html>
<html>
<head>
head tags
</head>
<body>
body tags
</body>
</html>
with no closing tag for the doctype
Please find 2 set of code blocks below and let me know which one is to follow and why?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set 1</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/customStyle.css" />
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed"></div>
<div data-role="content"></div>
<div data-role="footer" data-position="fixed"></div>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/customScript.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</body>
</html>
and set 2 is....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set 1</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/customStyle.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/customScript.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
(ie) which one is right, putting all the scripts at the top or at bottom?
Both of them are correct, only difference is how are you going to bind events.
In the first case, because HTML is already loaded into the DOM events can be bound directly like this:
$('#buttonID').on('click', function(){
});
Because button is already into the DOM, click event can be bound directly to it.
In the second case, because jQuery Mobile is loaded before page content all event binding must be done like delegation:
$(document).on('click', '#buttonID',function(){
});
This is a safer but slower solution. It don't require for object to exist to bind an event to it.
To make a story short, solution 1 is slightly faster.
First case to improve performance .... this is said to be general practise to keep javascript down the page ...so that content is loaded faster .... though no facts or analysis personally I have on same. Check this nice post sameelegantcode.com/2010/03/30/your-javascript-goes-where/
It will good to place all javascript at the bottom of the page. Never forget that page rendering can be delayed by javascript parsing/execution. Well, I believe you love to read http://developer.yahoo.com/performance/rules.html#js_bottom
I designed the layout view page like this,
<!DOCTYPE html>
<html lang="tr">
<head>
1 <META http-equiv=content-type content=text/html;charset=windows-1254>
2 <META http-equiv=content-type content=text/html;charset=utf-8>
3 <META http-equiv=content-type content=text/html;charset=iso-8859-9>
<title>#ViewBag.Title</title>
<meta name="description" content="#ViewBag.Description"/>
and when run the application and view the borwser source, some caharecters are appeared invalid as following.
<meta name="description" content="sürü"/>
Use #HTML.Raw(...) like this:
<title>#Html.Raw(ViewData["Title"])</title>
You have 3 different charset META-tags which makes absolutely no sense.
Otherwise META "description" looks fine - contains properly encoded value of "sü;rü" string.