I am trying to develop a sample note application. The application includes an index page having two div elements using data-role="page" option. The first page includes two buttons. Clicking on any button should navigate to other div using page transition as slide.
Here is my HTML Code :
<!DOCTYPE HTML>
<html>
<head>
<title>Dbsample</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="css/cordova.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="css/custom-theme.min.css" />
<script type="text/javascript" src="css/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="css/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
body {
margin: 0; /* Setting body margins to 0 to have proper positioning of #container div */
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList">
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="plus">
Add
</a>
</li>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="grid">
Edit
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<div data-role="fieldcontain" data-controltype="textinput">
<label for="textinput1" style="margin-top: 2%;">
Title
</label>
<input name="" id="textinput1" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain" data-controltype="textarea">
<label for="textinput2" style="margin-top: 2%; height: 60px;">
Details
</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<div style="margin-left: 30%; margin-right: 30%;">
<input type="submit" data-theme="a" value="Submit">
</div>
<div data-theme="a" data-role="footer" data-position="fixed"
style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#homePage" data-transition="slide" data-inline="true" data-theme="b" data-icon="home">
Home
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
But when I tried to run this on avd, it seems like the data transitions were simply ignored.
In logcat it throws an error:
"file:///android_asset/www/index.html: Line 15 : ReferenceError: Can't find variable: $"
Don't know the reason. Any help?
mobileinit event is not getting fired. You need to register the event before jquery mobile is loaded so that as soon as JQM is loaded the event gets fired. Load JQM script after the following script.
<script type="text/javascript">
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script type="text/javascript" src="css/jquery.mobile-1.3.2.min.js"></script>
Use this one. It should work.
<!DOCTYPE HTML>
<html>
<head>
<title>Dbsample</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
body {
/* Setting body margins to 0 to have proper positioning of #container div */
margin: 0;
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList">
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="plus">
Add
</a>
</li>
<li>
<a href="#editPage" data-transition="slide" data-inline="true" data-theme="b" data-icon="grid">
Edit
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Notes</h1>
</div>
<div data-role="content" id="mainContent">
<div data-role="fieldcontain" data-controltype="textinput">
<label for="textinput1" style="margin-top: 2%;">
Title
</label>
<input name="" id="textinput1" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain" data-controltype="textarea">
<label for="textinput2" style="margin-top: 2%; height: 60px;">
Details
</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<div style="margin-left: 30%; margin-right: 30%;">
<input type="submit" data-theme="a" value="Submit">
</div>
<div data-theme="a" data-role="footer" data-position="fixed" style="bottom: 0; position: absolute !important; top: auto !important; width: 100%;">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#homePage" data-transition="slide" data-inline="true" data-theme="b" data-icon="home">
Home
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It looks like
$(document).one("mobileinit", function () {
should be:
$(document).on("mobileinit", function () {
Related
I am finishing up a website which can be found here - www.minimindsacademy.com
I need to find a way for the height to take up 100% of the screen on an iPhone device. It is not taking up 100% height on my iPhone but on my desktop browser it is even if I shrink it. The goal of this site was for it to be 100% responsive with the use of Twitter Bootstrap as my style framework. I am not sure if it is doing this on other mobile devices. Also, I cannot replicate this on my browser screen (when I make the browser screen small as possible it looks fine, however on my iPhone the height isn't 100%).I don't know if I did something wrong with the CSS or what.
It won't let me post images on my posts yet, but if you view the site on a mobile device you should see an example of what I am referring to on the Home page.
HTML:
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="script.js"></script>
</head>
<section class="hero">
<!--Nav Bar-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/logo.png" alt="">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Welcome</li>
<li>About Us</li>
<li>Staff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4">
<a href="home.html" >
<img id="logo" src="assets/logo.png" alt="logo">
</a></div>
<div class="span4"></div>
</div>
</div>
<!--BOX START-->
<div class="container" id="box">
<!--HEADER-->
<!--<h1>Home</h1>-->
<!-- CARASOUL -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/home/1.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Jammin Out</h3>
<p>Piano at the mall!</p>
</div>
</div>
<div class="item">
<img src="assets/home/2.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Snack Time</h3>
<p>Healthy eating for everyone!</p>
</div>
</div>
<div class="item">
<img src="assets/home/3.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Comfortable Environment</h3>
<p>Hangin with my pal!</p>
</div>
</div>
<div class="item">
<img src="assets/home/4.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Arts and Crafts</h3>
<p>Chalk is always fun!</p>
</div>
</div>
<div class="item">
<img src="assets/home/5.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Backyard Activities</h3>
<p>Beep Beep!</p>
</div>
</div>
<div class="item">
<img src="assets/home/6.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Outdoor Fun</h3>
<p>Hangin at the park!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- MAIN -->
<div class="row">
<div class="col-md-4" id="one">
<h3>About us</h3>
<p>Mini Minds Academy is here to provide a nurturing,
safe and stimulating environment for children to explore, learn and play! We
respect and value the diversity in each child's character, background and
level of development.</p>
<a class="btn btn-primary pull-right"
href="about.html">Read more</a>
</div>
<div class="col-md-4" id="two">
<h3>Meet our staff</h3>
<p>Our staff at Mini Minds academy consist of teachers
Shelly Lenzotti, an alumni of Boise State University. She has over 13 years
of experience in educating and caing for children ages 3 months - 11 years
of age.</p>
<a class="btn btn-primary pull-right"
href="staff.html">Meet us</a>
</div>
<div class="col-md-4" id="three">
<h3>Contact us</h3>
<p>If you are interested in our program and have a child
between te ages of 1-6 years old feel free to contact us. We would be happy
to provide for your child's needs if we have space available!</p>
<a class="btn btn-primary pull-right"
href="contact.html">Contact us</a>
</div>
</div>
</div>
</section>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</html>
CSS:
.navbar-brand {
padding: 5px 15px;
}
.navbar-brand img {
height: 40px;
}
#headerTitle {
position: relative;
max-width: 75%;
margin: 0 auto;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
#myCarousel {
margin-bottom: 20px;
}
section.hero {
background-image: url("../assets/1.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
}
#logo {
max-width: 400px;
margin: auto auto;
text-align: center;
margin-bottom: 30px;
width:100%;
}
.row .span4 {
text-align: center;
}
#box {
max-width: 75%;
padding: 20px;
padding-bottom: 100px;
}
.row {
padding: 0px 20px 0 20px;
}
.col-md-8 {
font-weight: bold;
color: #717070;
padding-bottom:20px;
}
.col-md-4 {
font-weight: bold;
color: white;
padding-bottom:20px;
}
#about h5 {
font-weight: bold;
}
#about2 {
background-color: #945389;
font-weight: bold;
height: 100%;
}
#one {
background-color: #ee4524;
}
#two {
background-color: #a2c95c;
}
#three {
background-color: #945389;
}
.btn-primary {
color: white;
background-color: #018ca9;
border-color: #018ca9;
width: 100%;
margin: 0 auto;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
color: white;
background-color: #01778f;
border-color: #01778f;
}
h1 {
color:#945389;
font-weight:bold;
}
#media only screen and
(max-width: 767px) {
#box{max-width:100%;}
}
I figured it out, it is because I am using domain-forwarding with go-daddy. The masking is converting the code into this:
<html>
<head>
<title>minimindsacademy.com</title>
</head>
<frameset rows="100%,*" border="0">
<frame src="http://www.ayodlomedia.com/miniminds/home.html"
frameborder="0" />
<frame frameborder="0" noresize />
</frameset>
<!-- pageok -->
<!-- 11 -->
<!-- -->
</html>
Apparently the frameset tag isn't compatible with HTML5, thus, I am assuming thats where the error is coming from.
It looks like your hero section just doesn't get enough height to fill the screen. If you add min-height: 100vh to the .hero class that makes the background fill the screen.
Is that what you were referring to?
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.
The webview doesn't understand what html height 100% means its just showing a blank page. However, in mobile browser it works perfectly fine. Can anyone help me? I've gone through a lot of suggestions but none of that worked. As you can see in the code, I've purposely set the html background color as red so that i can see if the html document is indeed on my webview. I don't see any red at all its just pure white.
It only works if i hard set the height and i don't want to do that. My code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>WhyQ</title>
<link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
html{
margin:0;
padding:0;
height:100%;
min-height:100%;
background-color:red;
position:relative;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
min-height: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background-color:red; /*#E9E9E9;*/
position:relative;
}
</style>
</head>
<body style="position:relative">
<div style="overflow-y:hidden" class="container-fluid login-container">
<div class="row" style="height:15%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:13%;">
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" style="height:5%;">
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" style="height:30%;">
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row" style="height:20%;">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" style="height:16%;">
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure your webview layout is configured properly:
android:layout_height="match_parent"
If you used wrap_content, the webview itself will shrink to zero so that only blank page is shown.
Showing red in IE and chrome, I could recommend instead of height: 100%; use height:100vh; as this will set the div to 100% of the view port height. a div tag will not automatically take the height of the view port, you must tell it to do so. also removed the following code as position:relative; is for Tgas not the . also removed the height styles from the row tags. you can set that in css but the height should set itself for each row.
html{
margin:0;
padding:0;
}
body {
font-family: 'Titillium Web', sans-serif;
width: 100%;
background-color:red; /*#E9E9E9;*/
}
.cont-height {
height: 100vh;
}
<div class="container-fluid login-container cont-height">
<div class="row" >
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqLogo full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center login-sub-container-whyqMascot full-height"></div>
</div>
<div class="row">
<div class="col-xs-12 txt-center full-height"></div>
</div>
<div class="row" >
<div class="col-xs-12 txt-center full-height">
<button type="button" class="btn btn-login btn-md" data-toggle="modal" data-target="#loginModal">LOG IN</button>
TRY IT
</div>
</div>
<!-- Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-loginForm">
<div class="modal-content modal-content-loginForm">
<div class="modal-body modal-body-loginForm">
<div class="container-fluid">
<div class="row-fluid" style="display:none" id="loginName">
<input class="login-input" id="txt_name" name="txt_name" type="text" required placeholder=" NAME"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_username" name="txt_username" type="text" required placeholder=" EMAIL"><br/><br/>
</div>
<div class="row-fluid">
<input class="login-input" id="txt_password" name="txt_password" type="password" required placeholder=" PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPwd2">
<input class="login-input" id="txt_password2" name="txt_password2" type="password" required placeholder=" CONFIRM PASSWORD"><br/><br/>
</div>
<div class="row-fluid" style="display:none" id="loginPhone">
<input class="login-input" id="txt_phone" name="txt_phone" type="text" required placeholder=" PHONE NUMBER"><br/><br/>
</div>
<div class="row-fluid">
<img class="icon border-radius-3" src="images/g-icon.png" alt="Google" />
<img class="icon border-radius-3" src="images/f-icon.png" alt="Facebook" />
<button type="button" id="btnRegister" onclick="showRegisterField()" class="btn btn-login-modal btn-sm border-radius-3">SIGN UP</button>
<button type="button" onclick="login()" style="margin-right:10px" class="btn btn-login-modal btn-sm border-radius-3">LOGIN</button>
<!--<button type="button" class="btn btn-login-modal btn-sm border-radius-3"></button>//-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I had the same problem here:
Android WebView: how to let the css use the entire height w/ position absolute?
I answered my own question, problem was using alignParent instead of match_parent.
I hope that's the problem in your case.
In any case, try to put some borders to your WebView just to see where it actually stops.
I am using phonegap and jquery mobile. my code is given below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=screen.width; initial-scale=1" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="jquery.mobile/phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
<!-- <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
</head>
<body>
<div id="page" data-role="page" data-theme="b">
<div class="ui-btn-corner-top" data-role="header" data-theme="b" >
<h1>Login</h1>
</div>
<div data-role="content">
<div>
<h4>
<label for="userName" style="text-align:center">User Name</label>
</h4>
<input name="userName" type="text" id="userName" value="" data-theme="b" />
</div>
<div>
<h4>
<label for="passwordinput" style="text-align:center">Password</label>
</h4>
<input name="passwordinput" type="password" id="passwordinput" value="" data-theme="b" />
</div>
</div>
<div class="ui-btn-corner-bottom" data-role="footer" data-theme="b">
<h4>Auth Demo</h4>
</div>
</div>
</body>
</html>
But the elements are not populating for the entire screen...it ends in the middle of the screen.
what do i have to do if get it for the entire screen height and width ?
Add the data-position="fixed" attribute to the footer div.
More details here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
May be you could try doing this:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<body>
<div id="page" data-role="page" data-theme="b" style="width:100%; height:100%">
...
</div>
</body>