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`;
});
}
Related
I am creating a little AngularJs app that I want to optimize for all platforms and devices. I am using Bootstrap as my main styling method. This is a first for me, so I would appreciate your patience :D.
I have a basic skeleton of the app, but I have found that browsing the app on my mobile device, it does not display the way I imagined and desire.
This is a screenshot taken on my phone (Android):
I would like it to display like this:
Here is my index.html code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>IMPI Technical Services</title>
<!-- Style sheets -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/toastr.css" />
<!-- favicons -->
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="images/favicon/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="images/favicon/apple-icon-180x180.png" href="images/favicon/apple-icon-180x180.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="images/favicon/android-icon-192x192.png">
</head>
<body ng-app="impi-app">
<nav class="navbar navbar-inverse">
<div class="container">
<a class="navbar-brand" ui-sref="home">IMPI Techincal Services</a>
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="products">Products</a></li>
<li><a ui-sref="contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ui-view></div>
</div>
<!-- Footer -->
<div class="container" id="copyright">
<div>
<footer>
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<p>Copyright © Impi Technical Service 2017</p>
</div>
</div>
</footer>
</div>
</div>
...
</body>
</html>
Here is the home view code:
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h2>A Warm Welcome!</h2>
<p>
This is the new home of IMPI Technical Services. We specialise in the delivery of specialised - customer focused - mining and construction
industry products and services.
</p>
<br />
<p>
Our site is currently under development, and we are looking forward to bringing you a feature rich, customer experience. For ANY queries, you are more
that welcome to contact us directly, or to fill in our contact form!
</p>
<p>
<a class="btn btn-primary btn-large" ui-sref="contact">Contact Form</a>
</p>
</header>
<hr>
<!-- Title -->
<div class="row">
<div class="col-lg-12">
<h3>We Are Proud Suppliers Of:</h3>
</div>
</div>
<!-- /.row -->
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-3 col-sm-6 col-xs-12 hero-feature">
<div class="thumbnail">
<img src="../images/supplier_images/rockmore.jpg" alt="Rockmore International">
<div class="caption">
<h3>Rockmore International</h3>
<p>Rockmore International is one of the worlds leading manufacturers of top quality percussive rock drilling tools.</p>
<p>
Visit Site
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 hero-feature">
<div class="thumbnail">
<img src="../images/supplier_images/Montbert.jpg" alt="Montabert Hydraulic Drifters">
<div class="caption">
<h3>Montabert Hydraulic Drifters</h3>
<p>
Montabert was founded in 1921 by Joannes Montabert as Montabert S.A, a manufacturer of pneumatic equipment that would
introduce the first hydraulic concrete breakers and drifters. In 1935, through the initiative of Suzanne Montabert,
the company expanded its product line and added the Sullivan Ikine line of products under license.
</p>
<p>
Visit Site
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 hero-feature">
<div class="thumbnail">
<img src="../images/supplier_images/vula-drilling.png" alt="Vulla Drilling">
<div class="caption">
<h3>Vula Drilling (Pty) Ltd</h3>
<p>
VULA Drilling (Pty) Ltd. is the Original Equipment Supplier (OES) of the patented VULA range of hard-rock drill bits.
This new range of drill bits have been specifically designed and developed with the use of ultra modern
Computer-Aided-Design-and-Manufacturing (CAD/CAM) Software to improve penetration rates and increase flushing of the drill bit,
resulting in an increase in productivity and meters drilled.
</p>
<p>
Visit Site
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 hero-feature">
<div class="thumbnail">
<img src="../images/supplier_images/powerbit.png" alt="Powerbit Rocktools">
<div class="caption">
<h3>Powerbit Rocktools</h3>
<p>
Powerbit Rocktools has been in operation since 1996. They are a South African based company, with clients all over Africa.
Their factories are located in Taiwan and China.
</p>
<p>
Visit Site
</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>>
</div>
Any pointers on what I am missing or doing wrong?
This is the site address if you'd like to view it on your own mobile device to test the display: www.impitechservices.co.za
You are missing a few meta tags in the head tag.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
These tags are required to enable proper rendering of a page.
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.
I am trying to change number of grids on orientation is landscape from 2 to 3 grids how can I achieve this?
First thing first, we cant use window.orientation to definitely recognize portrait or landscape orientation, because every device will give different results. Read more about it here: http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/
So, to achieve this we need to use classic orientation detection function. If window height is bigger then window width the we have a portrait or in any other case we have a landscape orientation.
I made you a working example of your question. Unfortunately I cant create you a jsFiddle example because it wont detect orientationchange event. To test code below, just copy it into an empty html file.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
.ui-block-a {
background: red;
}
.ui-block-b {
background: green;
}
.ui-block-c {
background: blue;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
detectOrientationMode();
});
$(window).bind('orientationchange', function() {
detectOrientationMode();
});
function detectOrientationMode() {
if($(window).height() > $(window).width()) {
$('#custom-grid .ui-block-c').css('display','none');
$('#custom-grid').removeClass('ui-grid-b').addClass('ui-grid-a');
} else {
$('#custom-grid .ui-block-c').css('display','block');
$('#custom-grid').removeClass('ui-grid-a').addClass('ui-grid-b');
}
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<div class="ui-grid-a" id="custom-grid">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
You can have the three grids present and addClass('hidden') or removeClass('hidden') as appropriate, and assign display: none to the class hidden in your CSS.
I had the same question and Without better advice I simply found a workaround:
I just use the jquery mobile orientation change detection to switch between 2 different div (data-role page) duplicating my content with different layouts.
I want to have a 2-column layout in a JQM page. The first column will be an image, and the second column will be some text.
<div data-role="content">
<div class="ui-grid-a">
<img class="ui-block-a" src="/image/no-picture.jpg"/>
<div class="ui-block-b">
<h1>Some Text Here</h1>
</div>
</div>
</div>
I tried to set max-width, it works in a browser, but didn't work in android webview. What is the best way to do this?
Thanks
This is a working example. I have tested it on Galaxy S3 andr. 4.1
<div class="ui-grid-a">
<div class="ui-block-a">
<img src="http://www.index.hr/thumbnail.ashx?path=images2/europskimljekari_AFP26112012.jpg&width=325&height=197"/>
</div>
<div class="ui-block-b">
<h1>Some Text Here</h1>
</div>
</div>
Give me a comment if you wanted something else. Also dont forget to use this in your header:
<meta content="width=device-width, minimum-scale=1, maximum-scale=2" name="viewport">
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