Bootstrap navbar sample always showing mobile on desktop - asp.net-mvc

I copied the navbar default sample from from the samples but without any changes it appears to be doing what I think is mobile format. The only thing I see is the brand tag to the left and the button to the right. My monitor is pretty big so it can handle the menu and it does when I view it online which you can visually see here. I can only assume that since I cut and paste from the demo code I have a setting somewhere else that is wrong but I have no idea where to look. I did make sure to run nuget and get the latest version of the code so I should match what is on the demo. Any ideas?
Update
The issue appears to be with VS2012 and debug mode. Using Visual Studio Development Server seems to be the problem. If I publish locally it works as expected. I thought it might be IE8 but realized it was VS2012 after I published the site.
Is there a way to work around this while using the debugger in VS2012?
Update 2
And somehow it is not working in IE8 again even after being published. Chrome seems to work fine. Must be something picky about IE8 that I need to code around.

Try to copy all the page html, then if it works cut unnecessary code.
Use this instead of your local bootstrap:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Looks like this was an issue with IE8 all along. I didn't think it was a browser issue so I never looked for IE8 nav problems but here is a link that documents the issue.

Related

How to force to open a Page in Document Mode as IE8

We have deployed our webapp, which was developed with JSF, Spring and Hibernate on Tomcat server in our internal network (intranet). When I test in my application in local it's working fine.
But once I deploy to DEV I come across style issues. When I have two dropdowns one after another, the top dropdown overlaps with another one.
This happens when I have Document Mode set to "IE7 standards." When I change Document Mode to "IE8 standards," everything works fine.
To force Document Mode to IE8 standards, I tried this meta tag in my section of the HTML document according to this link, but it didn't work for me:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
How can I force my page to render according to IE8 standards on the intranet? Does my application render in IE8 standards on the internet?
EDIT :I see something in my develoer tools.Even though I kept my <meta> it after <head> but my primefaces styles and scripts are loading before to that.How can I resolve this?
Odd, this item was posted yesterday, not sure if it applies to your situation:
IE 8 will ignore the x-ua-compatible setting if it comes after the stylesheets. In order for IE to acknowledge the meta setting, put it at the top.
I am glad to tell I am finally able to resolve this issue by using this link in primefaces.And this post also helped to do it through entire application
http://blog.primefaces.org/?p=1433

From JQuery Mobile to PhoneGap / Cordova

I have a JQuery mobile app. I now want to deploy it natively to Android and iOS. To assist with this, I thought I would use PhoneGap. When I run my app, none of the styling information appears. There are no errors in the console window. I'm not sure what I'm doing wrong.
Are there any guides on going from JQuery mobile to phone gap? Everything I see starts with Phone Gap and builds from there. Am I doing this in reverse?
Thank you for any insistence. I really want to get this app onto Android and iOS. I feel like I'm so close. But I have no idea what I'm doing wrong.
Thank you,
This is just a guess, but you have something like this in your code?
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
If so that's wrong and you need to store your css locally in the assets folder if you want it to run locally within your WebView.
Otherwise, I'd suggest that you first run an 'hello world' on phone gap, and style just one element through an external local stylesheet (without worry about javascript for now). That's essentially the most difficult part, knowing where to put the file and how to reference it, so you do not want to confuse yourself with the extraneous code of your current project when you're learning that part.
Once you've figured that part out, it will be trivial for you to do the same with the jQuery Mobile library, both the css one and the js one.
Have you include properly?
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
put the .js file and .css file in the jquery.mobile folder.
But if you are using eclipse then you can create phonegap app directly.
I hope it would be helpful for you.

JQuery Mobile Icons Won't Load - Unless I Use the CDN

I'm working on my first PhoneGap app with JQuery Mobile and I've having a problem getting the included icons to show.
When I reference a local instance of the .css file, like so:
link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
I don't get any icons. Just dark circles. I can see that the css is loading, because if I throw in a bogus path the results don't look like JQuery Mobile at all.
But when I reference a CDN, like so:
link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
I get nice buttons, no problems. I'm using Firefox to view output, but builds all the way onto an Android device show the same symptoms.
I'd punt and use the CDN, but I'm under the impression that if I want the app to run disconnected, then I should just include the .CSS file.
I've double checked my local CSS and downloaded it a second time, but no change. Anyone seen anything similar?
Make sure you have the jQuery Mobile images directory in the same directory as jquery.mobile-1.0.1.min.css.
I've just started with PhoneGap and had the same issue with JQuery Mobile.
Once I added the images under the www folder, I set the Build Action for each image to "Content." By default, mine were set to "Resource."
After this, the images appeared in my Windows Phone Emulator.
Hope this helps.
Chuck

Why have our site's links stopped working in IE today?

The company website is DNN-based: http://www.mrisoftware.com. This morning I was alerted that links "don't work", but nothing has changed today, so I'm stumped.
I verified that this is the case in Internet Explorer, although Firefox and Chrome are fine. The behavior: when the link is clicked on, it focuses, but the target URL doesn't resolve. A right-click opens in a new tab. I've tried poking around for answers on Google but this doesn't seem to be a common enough problem to have obvious answers at the top, and I'm stumped.
Naturally, the site was developed by an outside contractor, so we don't have a Web person here I can just ask (apart from me...and I'm, as above, stumped.)
I tested it locally, and it seems that these two lines are causing the problem:
<script src="http://munchkin.marketo.net/munchkin.js" type="text/javascript"></script>
<script>mktoMunchkin("155-CYD-020");</script>
They add the following line to every <a href=""> tag:
_mchInsLnk="true"
This causes them to not function right.
Based on what you and #MarcVeens have said it looks like the marketing analytics firm your company uses (Marketo) updated their link tracking script and broke IE8 in the process.
You can contact their support here, I imagine they are aware of the problem but there are no updates on their company blog.
As a temporary workaround you could use the following code which targets all versions of IE save for IE8 (the '!' in !IE8 is the NOT operator).
<!--[if !IE 8]>
<script src="http://munchkin.marketo.net/munchkin.js" type="text/javascript"> </script>
<script>mktoMunchkin("155-CYD-020");</script>
<![endif]-->

Firebug lite on iPad

Already found this page with some helpful hints.
Problem is I need to debug a web application on a CMS using an iPad and Safari.
So far I haven't been able to make firebug-lite work. I am working in a secured environment having no internet acces, but can copy files using a USB-key.
I have copied firebug-lite.js to the local server and included the file in a script tag in the head:
<script type="text/javascript" src="http://my_server/js/firebug-lite.js"></script>
Unfortunatly when I open the page in the CMS I cannot see the firebug-lite-button on the page. Verifying the source code firebug-lite should have been loaded on the page. There is no way to get a right click menu to inspect anything.
What can I do to make firebug-lite work on the iPad? What am I doing wrong?
Start Firebug Lite already opened, as per http://getfirebug.com/firebuglite#Options :
<script type="text/javascript" src="proto://path/to/firebug-lite.js#startOpened=true"></script>
I think you won't be able to inspect elements, but you can navigate to the elements in the DOM tree provided by Firebug Lite.
It looks like Firebug-lite has problems with the iPad browser since late 2010.
The problem (ticket on official tracker) has not been yet solved.
Have you tested the problematic page in Safari/Chrome/Chromium for desktop? Since they use Webkit, the same system used with mobile Safari/Chrome, you may be able to duplicate the error and find its solution. You can open Chrome's debugger with right click, Inspect element.

Resources