I'm using the following classes to fix a header: navbar navbar-default navbar-fixed-top
This works perfectly on my PC:
But when checking it on iPhone or iPad, the header is only partially shown:
I'm using Bootstrap v3.3.6. Has anybody had this problem and were you able to fix it?
Have you tried resizing the browser on the pc to see where it goes wrong. If the layout is different there then on mobile you might need to add a meta tag.
Try adding this into your header:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
I tried this using browserstack and it looks fine to me. Maybe it's a particular version of Safari Mobile browser not working or something cached on your phone?
Related
My team is having a strange issue with the dojo combobox. When we moved the code to the integration environment, the dojo combobox started to render improperly. We verified that the code is the same. Strangely other dojo comboboxes in the same application render normally.
The integration server is on a older version: 9.0.1 HF32 64 bit
The unit server where it works is at: 9.0.1 FP3 HF632
UNIT SERVER rendering on left, INTG Server rendering on right.
My question is has anybody seen this and do they know how to fix it?
Notes:
this happens in IE and Chrome. It is coming wrong from the server.
We are using CIAO to promote between environments (which I hate).
Upgrading the server is not an option for me
I can post code if requested, but I suspect that it isn't a code issue.
UPDATE: For some reason the following two CSS files are not loaded on that particular page. They are loaded on every other page in the application. I can't find any property or setting that would effect this. The admin verified that these files are on the server and the dates are identical. These are system generated resources.
<link rel="stylesheet" type="text/css" href="/oneuiv2.1/base/dojo.css">
<link rel="stylesheet" type="text/css" href="/oneuiv2.1/defaultTheme/dojoTheme.css">
Does anyone know why these two stylesheets are not being loaded??
I've seen some strange positioning issues depending on where Dojo comboboxes are relative to the browser screen, i.e. if there's not enough space left in the screen to position relative to the field they're bound to. That may have been in XPiNC and was in older versions. The thing to check is whether the rendering issue is related to where the field is relative to the page in the browser.
I have a multi-embedded favicon.ico file used in my html doc, it works everywhere except Safari. I have tried clearing cache but nothing seems to work.
<link rel="shortcut icon" href="favicon.ico">
Test case: http://chovy.dyndns.org/test/favicon.html
Favicon: http://chovy.dyndns.org/test/favicon.ico
Response header: Content-Type:image/x-icon
Does anyone know why this won't show a favicon for Safari?
Works for me
Screenshot is taken with Safari 6.0.2.
In case it is just cache problem, you might ignore that problem. Everybody else accessing the page for the first time with Safari will see the icon as there is no cache problem for the first timers.
Try adding type="image/x-icon" to the link tag. Also, safari will note clear cached favicons when clearing browser cache. You need to close Safari and manually remove the file WebpageIcons.db in ~/Library/Safari.
So I created a video using ScreenFlow on a Mac. Then exported it. It created an m4v file. Then I changed the extension to mp4 and tried it out in the following web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>Fooo</title>
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
<body>
<video src="Demo.mp4" width="320" height="200" controls preload></video>
</body>
</html>
It does not play. If I move the pointer where the player is it will show the frame at where the pointer is. So all the frames are there but it will just not play the video. What did I do wrong? How do I fix it?
Following #heff's advice, I deleted the script line. Once it was deleted I get this error message: "Video format or MIME type is not supported."
How do I fix this?
.mp4 == .m4v Different extensions for the same container format. Though .mp4 technically is also equal to .m4a, but .m4v != .m4a. At least I'm pretty sure. :)
Sounds like an issue with your javascript library. Have you tried just using the video tag in a browser that supports HTML5 video, with no library? Just delete the script line and see what happens.
Otherwise try posting a link to the live page where we can check it out.
I don't know if you already solved this, but you should go see the information on this webpage: Video for Everyone!. Specifically, go see the first point of section 2.1 where the author explains that your server must use the correct mime-types, and section 3, where the author explains what codecs you should use (because not every web-browser can read .m4v files).
I've developed a mobile website based on jQuery Mobile. Everything works on my own Windows Mobile device with Opera Mobile 10, but a customer of mine always sees the page magnified.
I thought that he might have a zoom setting >100% in Opera Mobile, but he claims that this is definitely not the case.
The same problem also occurs on the jQuery Mobile test site ( http://jquerymobile.com/test/ ) . Here's a screenshot of the site as displayed on my customer's device:
Any idea what might be going wrong here? I was unable to reproduce this problem on my own device or in an emulator.
My customer's device is a HTC HD2 runing Windows Mobile 6.5 and Opera 10.
Thanks,
Adrian
I'll just paste the answer by David Storey which was made for this on Opera Dev forums. It is not specifically about the 100% issue, but there might be similar issues related to the viewport tag issue, for people getting across it.
Opera Mobile assumes that any document
with a mobile specific doctype, such
as XHTML Mobile Profile or XHTML Basic
are designed and optimised for mobile,
while documents with a regular doctype
are not optimised for mobile
generally. Thus if there is a desktop
doctype the overview mode is enabled,
which you can control with the
viewport meta element. If there is a
mobile doctype the overview mode is
disabled and a regular 1:1 viewport is
used.
There were some bugs in the viewport
meta element support in Opera Mobile.
They should be fixed in the latest
version.
Did you try adjusting the scale?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
You should use xhtml mobile doctype
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Try adding <meta name="viewport" content="width=device-width">. Opera seems to behave better when it's there.
If that doesn't work, please file a bug report https://bugs.opera.com/wizard/.
I'm trying to follow the custom module tutorial at http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/modules-and-namespaces/creating-your-own-modul
I've got a local deployment of dojo at http://localhost:8081/dojo-1.3.2/dojo/dojo.js
For my custom module I've created the following javascript file at http://localhost:8081/dojo-1.3.2/explosive/space/Modulator.js:
dojo.provide("explosive.space.Modulator");
dojo.declare("explosive.space.Modulator",null,{
bob:1
});
In my html page I have the following:
<script type="text/javascript" src="http://localhost:8081/dojo-1.3.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("explosive.space.Modulator");
</script>
And when I pull up my site in firefox I get the error:
Error: Could not load
'explosive.space.Modulator'; last
tried
'../explosive/space/Modulator.js'
Any ideas on what I'm doing wrong?
EDIT: After more testing it appears the code works on IE8 and IE8 compatibility mode but not in Firefox, Chrome, or Opera.
EDIT2: My html file was on a different domain but I didn't think that should make any difference. After reading Seth's comment (thanks Seth!) I tried it both ways.
I have two tomcat instances, one on port 8080 and one on port 8081. I've placed index.htm in both instances and started them both up.
http://localhost:8081/test/index.htm works in both FF and IE. http://localhost:8080/test/index.htm does not work as expected in FF, but does work in IE.
Show XmlHTTPRequests shows that FF is making a call to "GET http://localhost:8081/dojo-1.3.2/explosive/space/Modulator.js" which is coming back with an empty response for some reason.
Here's the entirety of my code for index.htm if it's any help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Create Map</title>
<script type="text/javascript" src="http://localhost:8081/dojo-1.3.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("explosive.space.Modulator");
function init(){
var eludiumFuel36 = new explosive.space.Modulator();
alert(eludiumFuel36.bob);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<h1>Hello World!</h1>
</body>
</html>
It looks ok from what you have here. When you bring up the page, are you going to http://localhost:8081/testpage.html (or somesuch)? Or are you going to a different domain?
Do you have firebug installed? If not, install it and turn on 'Show XMLHttpRequests'. That will show what URL it's trying to access in the console (and any other possibly relevant errors).
Otherwise, there might be something else on the page outside of what you posted messing with dojo's load path.
Edit
When dojo does an dojo.require, it does a XHR call for the file. The includes the host and port in it. So, it's violating cross domain security when the html page is on localhost:8081 but the javascript is on localhost:8080. You can get around this by using a cross-domain build version of the file (or make sure all requests come on the same port and host). Truth be told, I'm not quite sure why IE works with the different ports though.