I am developing mobile app. I am using HTML, CSS, bootstrap, JavaScript for development. When the user taps on the textbox inside the footer, the keyboard pops up, screen is not moving up for android phones, but for ios it is working fine. I am trying to scroll down to the bottom div when the user taps on the textbox.
<body onload="hidebtn()">
<header class="topBar">
<ul class="nav nav-tabs row" id="myTab" role="tablist">
<li class="nav-item col">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="chat()">Chat</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Incident</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Service Request</a>
</li>
</ul>
</header>
<br><br>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="container">
<div class="row h-100">
<div id="topButtons" class="card-body" style="padding: 0; margin-top: 12px; height: 80px;"></div>
<div id="chatBody" class="card-body anyClass">
<p class="WC_message_fl"><img class="con_im" src="images\chatrobo.png"></p>
<p class="WC_message_fl sahlaIntro"> Type your Questions & Start chatting</p>
</br></br>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" >
</br></br>
<p class="WC_message_fl" id='msg_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row" id="table"></div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" >
</br></br>
<p class="WC_message_fl" id='msg_sr_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row" id="sr_table"></div></div>
</div>
</div>
<footer id="footerChtbt" style="position:fixed;bottom:0;right:0;left:0;line-height: 20px;background-color: #ECEFF1;font-size: 0.6rem;border-top: 1px solid #aaa;box-shadow: 0 1px 5px 0 #9B9B9B;">
<span id="sahlaResp" style="color:blue; position: relative;left: 7vw;top:0;"></span>
<div class="container">
<div class="row">
<div class="col-10">
<input id="query" type="text" class="form-control" placeholder = 'Ask Sahla bot...'" onkeyup="pressedkey(event)" onClick="clickedQuery()" style="outline:0;box-shadow:none;font-size:14px;" required/>
</div>
<div class="col-2" style="padding: 0; margin-top: 2px;">
<img src="images/send_icon.svg" name="submitbtn" onClick="sendbtn()" style="cursor: pointer; width: 38px;">
</div>
</div>
</div>
</footer>
I am trying to scroll down to the div on click of textbox
function clickedQuery() {
setTimeout(function(){ $("#chatBody").scrollTop($("#chatBody")[0].scrollHeight); }, 100);
};
I've been checking your code, that sincerely you could have cleaned a bit for us... You should send us a link were we can properly check the problem. However I'll try to guide you with the little info I have.
In my experience, browsers resize when the keyboard opens on mobile. The content "overlapped" by the keyboard is accessible scrolling down. The real overlap happens on apps that has set the option to not resize when opening the keyboard. In that case, you never put inputs that can be overlapped, or if you do, you can make them position over the top line of the keyboard when receive the focus.
To do that you normally use position: fixed to position your input just on top of the bottom line of the viewport which should match the top line of the keyboard.
body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
background: #ccc;
}
input {
margin: 6px;
}
input:focus {
position:fixed;
bottom: 0;
width: calc(100% - 12px);
}
<footer>
<input id="input" type="text">
</footer>
But as you report that your content is being overlapped maybe there is something else that I can't check without an online version of your code. So another solution is to use JS to relocate your whole footer. Then you can style it as you will to make it look nicer.
Aside of that. I recommend you add a button that blurs the input field in case the users doesn't finally want to summit. That will close the keyboard.Something like this
Hope this solves your issue.
$('#input').on('focus', function(){
$(this).parent('footer').css('bottom', '50%');
});
body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 6px;
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<input id="input" type="text">
</footer>
Related
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 3 years ago.
I'm trying to create a simple website that has a Header containing the logo and other information, then a ribbon as separator and then a two-column section. Left column will have a selector. Right column will have information depending on the option chosen on the selector.
I was able to do this so far but now I wanna take it to the next level.
I would like my site to always fit to the window so no vertical scrollbar needed.
I'm comfortable with the sizes of my header and ribbon so I want the two-column section to take the remaining space in the window. The scrollbar, if needed, would be on the information div.
Just in case, I want the left-half (selector) to take as much space as it needs. Right-half (information) should adjust to the space it has left.
I have this code so far:
CSS
.container {
display: table;
width: 100%;
}
.left-half {
display: table-cell;
background-color:#7ec0ee;
}
.right-half {
display: table-cell;
overflow: auto;
}
HTML
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
Here I have use some bootstrap classes. I think this will help you out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm" style="background-color: lavender">
One of three columns
</div>
<div class="col-sm" style="background-color: #EAE7EE">
One of three columns
</div>
<div class="col-sm" style="background-color: #E6E2EB">
One of three columns
</div>
</div>
</div>
</body>
</html>
I suggest using flex. It's fantastic for responsive designs. You can set the width in the flex property on your left or right halwes.
.container {
display: flex;
width: 100%;
height: calc(100vh - 98px); //98px is the height of your header
}
.left-half {
flex: 1;
background: red;
}
.right-half {
flex: 1;
padding: 1em;
overflow: auto;
background: blue;
}
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
This might work for you. you can make use of the calc function in CSS.
.container {
display: flex;
width: 100%;
height: calc(100vh - 100px); //Replace this 100px with whatever value elements other than container are occupying
}
.left-half {
width:50%;
background-color:#7ec0ee;
}
.right-half {
background: red;
width: 50%;
}
Im trying to get the navbar to stick on scroll I ve applied what ive found on w3schools and looked at a few posts here Im not getting it to work though. My codepen is:
https://codepen.io/robot_head/full/qKQwqe/
my code is as follows
html:
<header class="header-logo">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">client</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Info</li>
</ul>
</div>
</div>
</nav>
<div class="header-img">
<img src="img/logo.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</header>
css:
.sticky {
position: fixed;
top: 0;
width: 100%;
}
JS:
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
Since you're using Bootstrap 3, you can avoid using JS for the sticky navbar. In particular, note that I added the class navbar-fixed-top to the header. Here's the working code:
.header-logo {
height: 400px;
background-color: #06529d;
margin-bottom: 30px;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #06529d;
}
/*about us */
#about {
background-color: #06529d;
height: 600px;
color: #fff;
}
#lion-img {
display: block;
margin-left: auto;
margin-right: auto;
}
/*contact us */
#contact {
background-color: #febb2e;
height: 500px;
color: #000;
}
.form-area {
background-color: #FAFAFA;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
.control {
display: block;
width: 100%;
height: 50px;
padding: 6px 10px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
}
button#submit {
background-color: #8d1f2d;
border-color: #8d1f2d;
width: 100%;
height: 50px;
border-radius: 10px;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #06529d;
height: 300px;
padding: 25px;
}
.red {
color: red;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header class="header-logo">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Info</li>
</ul>
</div>
</div>
</nav>
<div class="header-img">
<img src="img/logo.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</header>
<div>
<div class="container text-center">
<img src="img/ceylon-hero.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
<div class="container-fluid bg-3 text-center" id="about">
<h3>ABOUT US</h3>
<br>
<div class="container text-center" id="lion-cage">
<img src="img/lion.png" class="img-responsive" id="lion-img" alt="Image">
</div>
<div class="container about-text">
<p>Hands long clothes execution dock careen lass overhaul code of conduct jib chandler broadside scuttle grog boom port salmagundi coffer Jack Tar mizzen gibbet come about. Wherry Davy Jones' Locker tack sutler Cat o'nine tails lanyard barkadeer jury
mast hail-shot spyglass plunder broadside port sloop galleon Pirate Round furl careen bilge rat weigh anchor. Arr keel schooner Jack Tar Blimey cackle fruit spirits trysail sheet loaded to the gunwalls lugger Cat o'nine tails line gibbet Pirate
Round cable bilge water chantey swing the lead Privateer.</p>
<br>
<p>Lugger bilge deadlights ye spirits wench bilged on her anchor bring a spring upon her cable Plate Fleet killick dead men tell no tales me Jack Tar Cat o'nine tails Corsair coxswain nipper fire ship yard ahoy. Log mizzen line ho tack blow the man down
heave down yard hulk crack Jennys tea cup fluke schooner main sheet sheet fathom dance the hempen jig Blimey hands cable hearties. Blow the man down lanyard Plate Fleet grog blossom Sink me wherry come about ho American Main Arr brigantine overhaul
gabion ahoy hornswaggle nipperkin log Sea Legs keelhaul Blimey.</p>
<br>
<p>Me run a rig Buccaneer swing the lead Sink me hardtack capstan smartly tender Brethren of the Coast scuppers brig jib Barbary Coast belaying pin belay careen coffer matey Spanish Main. Transom dead men tell no tales lookout hempen halter grapple square-rigged
Spanish Main handsomely fore loot shrouds bring a spring upon her cable red ensign man-of-war avast cable fathom grog keelhaul jack. Cackle fruit jack wherry chandler cutlass Buccaneer grog blossom crack Jennys tea cup warp bilge rat haul wind sheet
bilge water Jack Ketch matey chase red ensign deadlights execution dock gaff.</p>
</div>
</div>
<div class="container-fluid bg-3 text-center" id="contact">
<h3>CONTACT US</h3>
<br>
<div class="container">
<div class="col-sm-8 col-sm-push-2">
<form role="form">
<br style="clear:both">
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="firstname" name="firstname" placeholder="First Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="lastName" name="lastName" placeholder="Last Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="phone" name="phone" placeholder="Phone" required>
</div>
</div>
<div class="col-sm-12">
<button type="button" id="submit" name="submit" class="btn btn-primary">SEND</button>
</form>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center" id="info">
<p>Footer Text</p>
</footer>
Notice that if you were to use Bootstrap 4, the class that you would have to add is either sticky-top or fixed-top.
The reason why your JS isn't working is that you're getting the navbar by ID, when navbar is actually a class. A quick fix to keep using your JS, is to add the ID navbar, like so:
<nav class="navbar navbar-inverse" id="navbar">
Your edited codepen looks like this: https://codepen.io/robot_head/pen/qKQwqe
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am adding a new feature to my portfolio where the header sticks to the top, aka the property changes to fixed when it reaches certain scrollY value range, this is working but unfortunately the position:fixed
Before scrolling, with position set to it's initial default value
After scrolling down, the header gets a fixed property but whitespace kicks in to the far right side of the window.
How do I fix this problem?
Here is html code:
<div class="fluid-container row header header-f">
<div class="col-md-4 sitename">
<h1 class="site_name center">buoyantair</h1>
</div>
<div class="col-md-6 sitemenu">
<div class="menu center">
<a class="btn" href="#">Home</a>
<a class="btn" href="#">About</a>
<a class="btn" href="#">Contact</a>
</div>
</div>
</div>
CSS code:
.
header-f {
max-height: 100px;
position: fixed;
display: block;
min-width: 100%;
animation: slide-in .5s;
}
.header {
background: linear-gradient(15deg, #5DCC90 70%, #ADD962);
color: #214732;
min-height: 10vh;
font-family: "Ubuntu";
z-index: 1000;
}
You can watch this live here https://buoyantair.github.io/
Adding left:0; right:0; to the styling of the header should ensure that it always sticks to both sides of the screen.
well i tried to follow bootstrap style
put a row inside container and remove 'row' class from header .. see comments below
<div class="fluid-container header"> <!--remove row class -->
<div class="row"> <!-- add row here -->
<div class="col-md-4 sitename">
<h1 class="site_name center">buoyantair</h1>
</div>
<div class="col-md-6 sitemenu">
<div class="menu center">
<a class="btn" href="#">Home</a>
<a class="btn" href="#">About</a>
<a class="btn" href="#">Contact</a>
</div>
</div>
Add right: 0 to your .header-f
.header-f {
max-height: 100px;
position: fixed;
display: block;
min-width: 100%;
animation: slide-in .5s;
right: 0;
}
Do it By adding Row after Container-fluid.
as row contains margin-right: -15px; margin-left: -15px;
<div class="fluid-container header ">
<div class="row">
<div class="col-md-4 sitename">
<h1 class="site_name center">buoyantair</h1>
</div>
<div class="col-md-6 sitemenu">
<div class="menu center">
<a class="btn" href="#">Home</a>
<a class="btn" href="#">About</a>
<a class="btn" href="#">Contact</a>
</div>
</div>
</div>
</div>
Hope It Helps
I'm working on a login page on my site button for some reason the submit button isn't clickable when the sidenav is out (I'm using the materialize framework).
I have modified my sidenav a bit so that the overlay is removed when it is out and it doesn't close when clicked outside it.
$('.button-collapse').sideNav({
menuWidth: 260,
edge: 'left',
closeOnClick: true
}
);
//Unbind sidenav click to close
$(function(){
$(".drag-target").unbind('click');
$("#sidenav-overlay").unbind('click');
});
html,body {
height: 100%;
background-color:
}
header, main, footer, header{
padding-left: 0 auto;
}
#media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
.rotate90 {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.text1 {
color: #212121;
}
.text2 {
color: #757575;
}
nav.top-nav {
background-color: #303F9F;
}
.title-text {
font-family: Roboto;
font-weight: bold;
}
a.bold, .bold {
font-family: Roboto;
font-weight: bold;
}
a.light, .light {
font-family: Roboto;
font-weight: normal;
}
#sidenav-overlay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<nav class="top-nav">
<div class="container">
<i class="material-icons">menu</i>
<div class="navbar-wrapper">
Icy Fire
</div>
</div>
</nav>
<ul id="slide-out" class="side-nav">
<h4 class="title-text center-align">Navigation</h4>
<div class="divider"></div>
<li>Account</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal bold">Pages<i class="material-icons">arrow_drop_down</i></a>
<div class="collapsible-body">
Index
</div>
</li>
</ul>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<h2 class="indigo-text">Login</h2>
<div class="divider"></div>
<form class="col s12" action="login.php" method="POST">
<div class="input-field">
<input id="username" type="text" class="validate" name="username" required>
<label for="username">Username</label>
</div>
<div class="input-field">
<input id="password" type="password" class="validate" name="password" required>
<label for="password">Password</label>
</div>
<div class="input-field">
<input type="checkbox" id="indeterminate-checkbox" name="remember" value="on" />
<label for="indeterminate-checkbox">Remember me</label>
</div>
<button class="btn waves-effect waves-light blue right" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
<h5 class="indigo-text"><?php getMsg(); ?></h5>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
Here it is on my website: link
You have a <div class="drag-target"> that's revealed along with the menu. This is overlaying your entire form. You can see for yourself by right clicking over top of the submit button and clicking Inspect Element in the dropdown menu.
it is because of your drag target is drag-target right is 0 which blocks your button which is position to right
remove the css attribute
right: 0;
in your drag-target element
I want to make left menu sticky, but when i give it position:fixed then the right container which is also inside parent div comes down in the left side. Please help. Thanks... This is my html structure:
<div class="midwrapper_inner">
<ul>
<li class="leftbox">
<div class="left_div content">
</div>
</li>
<li class="middlewhitebox">
<div class="right_div_content">
</div>
</li>
</ul>
</div>
<div class="midwrapper_inner">
<ul>
<li class="leftbox">
<div class="left_div content">
</div>
</li>
<li class="middlewhitebox" style="margin-left: XXXpx" >
<div class="right_div_content">
</div>
</li>
</ul>
where xxx is the width of leftbox.
To be honest though I would remove the ul completely and use divs
<div style="height: 1000px;">
<div style="width: 200px; height:200px; position: fixed; background: red;" ></div>
<div style="margin-left: 200px; width: 200px; height:200px; background: green;" ></div>
</div>
http://jsfiddle.net/wyxop52k/
Css
.leftbox{position:relative; float:left; margin-right:15px; }
Try This ...(Y)