When I resize my browser window and make it smaller, the navbar nicely creates a collapse menu with a button on the right top corner. When I view the same site on my android phone, the navbar menu is always collapsed and the top right corner button is not visible. How can this be solved? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>My Groundhops</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My Groundhops</a>
<div class="nav-collapse">
<ul class="nav">
<li>Clubs</li>
<li>Visits</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">Content</div>
</div>
</div>
</body>
</html>
You're probably missing the meta tag required for mobile devices to properly scale.
So stick this in the head section of your page and try again:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
it seems to be a twitter bootstrap issue on opera mobile, it works on the default android browser. So my code seems OK.
https://github.com/twitter/bootstrap/issues/3621
Related
I am using the carousel example from here: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
I have some example images from my app which I took from my mobile 5.7 inch with print screen and removed the notification bar up (which shows the signal etc). I am trying to make these example images (carousel) the same height and width of my screen without to have the user, to scroll down or right to see the image full. So the user will see an action bar (the one that apps have beause it will open in a webview) and the carousel only. I tried changing the width and height of the images without success.
UPDATE: Based on Metatron5 answer , I changed the code and it works in firefox for android but it doesn't recognize the vh and vw in the android webview
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="begin.png" alt="" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="first.png" alt="" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="second.png" alt="" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="third.png" alt="" style="height: 100vh; width: 100vw;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Like in the Comments the Problem seemed to be that there was some Cashe on the phone, which where the reason the style didn't work. So it finally worked, but I want to make a note, that the Units vh and vw are not working in Androit Webview.
I have also run into the same problem a few month back. VH & VW wern't working on Google TV. So, I solved this problem with JavaScript. Try to add the following code in your script file:
const sliderImages= document.querySelectorAll('carousel-inner .item');
window.onload = function (e) {
sliderImages.forEach(sliderImage=> {
sliderImage.style.height = `${this.innerHeight}px`;
sliderImage.style.width = `${this.innerWidth}px`;
});
}
window.onresize= function (e) {
sliderImages.forEach(sliderImage=> {
sliderImage.style.height = `${this.innerHeight}px`;
sliderImage.style.width = `${this.innerWidth}px`;
});
}
This question already has answers here:
Responsive website zoomed out to full width on mobile
(4 answers)
Closed 4 years ago.
In chrome dev tools I get mobile view, but live bootstrap just seems to give me mini version of site
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" content="chrome=1">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/home-slider.css">
</head>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-xs-12 col-sm-3 sidenav">
<div class="navbar-header navbar navbar-default">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<div id="logo-div">
<img id="tri-img" src="src/dist/image/...jpg" alt="logo" />
</div>
<h4 id="title">Title</h4>
<h4 id="subtitle">Subtitle</h4>
<ul class="nav">
<li><span class="liner">Home</span></li>
<li class="port-main-title">Portfolio<span class="caret arrow"></span></li>
<li>Profile</li>
<li>Process</li>
<li>Contact</li>
</ul><br>
</div>
</div>
<!-- begin carousel -->
<div class="col-xs-12 col-sm-9">
<div id="carousel" class="carousel carousel-fade" data-ride="carousel-fade" data-interval="5000" data-pause="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item img-responsive center-block active">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
<div class="item img-responsive center-block">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-leftt" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button">
<span class="glyphicon glyphicon-chevron-rightt" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/ carousel -->
</div>
<!-- / carousel -->
</div>
</div>
<script type="text/javascript">
$(function() {
$('#myCarousel').carousel();
});
</script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<!-- build:js scripts/main.js -->
<script src="./js/main.js"></script>
<!-- <script src="js/bootsnipp.js" charset="utf-8"></script> -->
<script src="./js/slide.js" charset="utf-8"></script>
</body>
</html>
I've not used bootstrap before and thought I've followed the rules. Again, on my chrome device tools and browser simulators like ipadpeek and responsusimulator it seems to work, but not on live devices like android mobile or tablet?
Remove maximum-scale=1 from the viewport meta tag so it is set to this..
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I can't seem to figure out why bootstrap 3 doesn't seem to render form-horizontal correctly on smaller screen sizes.
The labels should all be right aligned (not left) and their vertical alignment should be baseline so the text lines up with the inputs.
This does not work when rendered in mobile mode in Chrome on the "Nexus 5" device nor on a true mobile device.
Any ideas as to what I missed / got wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body style="margin-top: 20px">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-7 col-md-5 col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">My Panel Heading</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-5">Test Label</label>
<div class="controls col-xs-7">
<input class="form-control" type="text" placeholder="My Test Value A"/>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-5">Really Long Test Label</label>
<div class="controls col-xs-7">
<input class="form-control" type="text" placeholder="My Test Value B"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Override bootstrap 3.3.6 defaults with this:
#media (min-width: 1px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}
You need to use col-sm/md/lg to define the column/s
Col-xs-* is for mobile devices correct, but will not display what you want properly.
After updating to Firefox 25 on Android (Galaxy S4) just days ago, i found an issue with fixed header in jqm 1.3.2, it seems to be positioning above the screen pulling footer and slidepanel up.
If i tap the screen the header comes in okay and positiones footer okay, then disappearing again when tapping once more.
Anyone else noticed any such problem in new FF25 on android ?
Here is a source where this scenario occurrs, ive removed all load and custom css and js as it doesnt affect the problem.
is it FF25 or is it me ??...
<!doctype html>
<html>
<head>
<meta charset="ISO-8859-15">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>TEST</title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="jquery/jquery.mobile-1.3.2.min.js"></script>
<script src="plugins/autocomplete/jqm.autoComplete-1.5.2-min.js"></script>
<script src="plugins/touchswipe/jquery.touchSwipe.min.js"></script>
</head>
<body>
<div class="jqm-mypage" data-role="page" id="index" data-theme="c">
<div data-role="header" data-position="fixed" class="jqm-header">
<h1 class="jqm-logo">heading</h1>
Menu
</div>
<div data-role="content" class="jqm-content">
<p>Content</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>....</h1>
</div>
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="c">
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos" class="jqm-list">
<li data-role="list-divider">TEST</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div><!-- /panel -->
</div>
</body>
</html>
SOLVED
Obviously a bug in FF25 mobile.
If i set div content a min height that is higher than the screen height, the fixed header shows fine and everything is positioned normally.
On pages where the content is less than the screen height, the fixed header disappears on pageload, pulling footer and panels up.
I have problem with displaying round edges in Android browser (in Samsung Galaxy Tab). However, it works fine in IOS browser (in iPad and iPhone i.e, Safari). As shown in the following image
Link to the image Round corner display problem in Android browser
Below is the code
<!DOCTYPE html>
<html>
<head>
<title>Sample App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=false">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript/cordova-1.8.0.js"></script>
<script type="text/javascript" src="javascript/precache.js"></script>
<script type="text/javascript" src="javascript/common.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="front">
<div data-theme="b" id="search-container">
<form id="search-field" action="" method="get" data-ajax="false">
<input type="search" name="search" value="" />
</form>
</div>
</div><!-- /page -->
</body>
</html>
I am not sure if I have to override the default jQuery Mobile styling. If so can anyone let me know the configuration I have to override or if there is any other solution to overcome this issue.
However, this works fine when the input field is in focus, as shown here Round corners display properly when the field is in focus
When I do a view page source in browser, this is the code (for div block)
<div id="search-top">
<form id="search-field" action="" method="get" data-ajax="false">
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-b" style="border-radius: 1em;">
<input type="text" data-type="search" name="search" value="" class="ui-input-text ui-body-b">
<a href="#" class="ui-input-clear ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="b" data-mini="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">clear text</span>
<span class="ui-icon ui-icon-delete ui-icon-shadow"> </span>
</span>
</a>
</div>
</form>
</div>
Thanks in advance
After many Tests, I've found this issue's reason!
Just remove this class .ui-shadow-inset from jquery.mobile.css file.