I am running an app with bootstrap 3.3.7 and have an issue with resizing on a scaled screen.
When setting a width of $container-width - 1px, all visible-* and hidden-* get ignored. It works on 100% scaling but with 125% and upwards it fails.
I have the following demo code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrapd/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div>SM=768,MD=992,LG=1200</div>
<span class="visible-xs">XS</span>
<span class="visible-sm">SM</span>
<span class="visible-md">MD</span>
<span class="visible-lg">LG</span>
<hr>
<span class="hidden-xs">XS</span>
<span class="hidden-sm">SM</span>
<span class="hidden-md">MD</span>
<span class="hidden-lg">LG</span>
</body>
</html>
Way to reproduce:
Set the scale to 125%.
Set the window width to 766px (e.g. with key F12) => OK (XS).
Set the width to 767px => bug appears (no display).
Set the width to 768px => OK (SM).
Another way on FHD-Screen:
Set the scale to 125%.
Pin the browser window to a side (half screen)
Environment: Win10, Chrome latest version (bug also appears on Firefox)
How can I fix this?
Just found a solution! Since I'm working with SASS, I added the following to my _variables.scss:
$screen-xs-max: $screen-sm-min - 0.1;
$screen-sm-max: $screen-md-min - 0.1;
$screen-md-max: $screen-lg-min - 0.1;
Related
I have the following page where I added the css:
body{
height:100%;
overflow:hidden;
}
which stops the page from moving up and down on a mobile device. However, when I focus on one of the inputs the page can then move around (up and down). How do I prevent that?
body {
height: 100%;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Login</title>
</head>
<body>
<div class='container'>
<form>
<input type='text'>
</form>
</div>
</body>
</html>
Use this:
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
I noticed, you already have it set. But I had the same problem and it was because my meta tag at first didn’t have it initially and when I did implement it, it was messy. I cleaned it up, as above and now it works.
In my case I didn’t like the x-overflow on mobile.
Credit to this article where it states setting the user-scalable =no. That is the source of your problem.
How to prevent zooming and moving page on mobile browsers?
I am currently working on a node app using express, and rendering html page using ejs.
When I used bootstrap in my .ejsfile, the .col-xs-*, .col-sm-* breakpoints worked well, but the breakpoints for the larger width cannot work as expected.
While I used bootstrap in the .html file and opened it in the browser, all breakpoints worked fine. And I've tried include bootstrap from both CDN and local, it resulted in the same situation. Can't figure what went wrong.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' type='text/css' href='/bootstrap.min.css'>
<title>
TEST
</title>
<style>
.eight{
background-color: red;
}
.four{
background-color: blue;
}
</style>
</head>
<body class='container-fluid'>
<article class='row'>
<div class='col-sm-8 eight'>
8
</div>
<div class='col-sm-4 four'>
4
</div>
</article>
</body>
</html>
I want the red div to occupy three-fourths of the row, the blue one occupy the rest.
Suggestions and solutions to the problem are appreciated.(Not a native English speaker, sorry for the unclear expression if any.)
There is a page, http://www.getbootstrap.sk/customize/index.html, but after you finish and compile and download the completed zip file - NOWHERE is anything giving even a clue as what to do with the darn files. ( I just installed the standard package though bower ).
SO what am I supposed to do with the downloaded customize files?
ALl I'm really trying to do is to stop my navbar items from disappearing when the width falls below 768px - I don't want them ever to disappear.
Bootstrap. How to make the navbar never collapsed
In the Grid system set the field #grid-float-breakpoint value of 0.
Click the Compile and Download button at the bottom of the page.
Extract the files bootstrap.css and bootstrap.min.css from the resulting archive.
Use them instead of the standard files bootstrap.css and bootstrap.min.css on your site.
you don't need to download the library. You can use online libraries.
For example:
<!DOCTYPE html="en">
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Course</title>
<!-- Normalize -->
<link rel="stylesheet" href="https://yui.yahooapis.com/3.18.1/build/cssnormalize/cssnormalize.css" type="text/css">
<!-- CSS BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- YOUR OWN CSS LIBRARY -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- JQUERY If you need it -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- JS BOOTSTRAP -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- YOUR OWN JS LIBRARY -->
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
....
</body>
</html>
However, if you want to download the library, you just have to move the bootstrap.min.css and bootstrap.min.js to the folders where you keep your CSS and your JS files, and reference them in the header of your web page.
For example:
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
...
</head>
UPDATE:
Based on Bootstrap's documentation, I suggest that, in order to avoid collapsing of the navbar, delete the class navbar-collapse from any element of your navigation bar.
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse. The responsive navbar requires the collapse plug-in to be included in your version of Bootstrap.
Additionally, you have to delete the button that is shown every time the navbar collapses.
Something like jsfiddle
I will need to see your source code to help you in a better way. Meanwhile, I hope this help you.
I'm working on webpage that was built to run on IE7, and now i'm in the process of upgrading the page to run in IE11 Edge mode by default.
What i've did in the page is that i added
<!DOCTYPE html>
I also added this
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Test Image Request</title>
<style type="text/css">
.auto-expand{overflow-y:visible}
</style>
</head>
Now whenever i open the page, the Emulation Panel in IE11 Developer mode says its rendering in IE7!
What did i miss?
Solved! there was <script> before <head>, moved it after <head> and now eveything works fine.
I'm having trouble figuring out why the viewport line from html5bp is causing a problem with colorbox. The problem arises when I view with my iPhone 4. The YouTube video in the popup modal is too big for the screen. On the desktop everything is fine.
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
If I don't use this line, my colorbox modal works great. However my page is not scaled well for mobile.
If I include this line, my colorbox modal is too big for the screen.
Here are example links showing both behaviors:
http://ivantown.com/cbtest/good.html
http://ivantown.com/cbtest/bad.html
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<title>colorbox youtube</title>
<link rel="stylesheet" type="text/css" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
</script>
</head>
<body>
<h2>colorbox youtube</h2>
<a class="youtube" href="https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1">Link1</a>
</body>
</html>
Thanks for any help. Long time benefactor from the community here but first question.
Your problem lies here
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
If you pay attention to your code you are specifying the innerWith of the colorbox to 640px. (innerWidth:640, innerHeight:464) iPhone portrait width is 320px. That's why it is running over.
So you have two options: you can set the width and height as a percentage, or using javascript detect if the user is on a desktop or mobile device and set your width and height accordingly.