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
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%;
}
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>
I found a great codepen for displaying team members. The problem, when you add html above it, the hover effects go berzerk. You should only get hover effects when you hover over a person (which is exactly what happens in the original code pen: http://codepen.io/solutiondrop/pen/IqKhk)
<script type="text/javascript" src="//use.typekit.net/npe3lft.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<div class="wrapper--team">
<div class="l-container">
<div class="team-grid">
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Robert Finkel</h3>
<p class="member__title">Rootmaster</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/robert-finkel_2.jpg" alt="Robert Finkel">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Randy Mosher</h3>
<p class="member__title">Alchemist</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/randy-mosher.jpg" alt="Randy Mosher">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">BJ Pichman</h3>
<p class="member__title">Operations Manager</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/mrch8596.jpg" alt="BJ Pichman">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Jacqueline Armanetti</h3>
<p class="member__title">Brand Ambassador</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/jacqueline-armanetti.jpg" alt="Jacqueline Armanetti">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Romy Seth</h3>
<p class="member__title">Analyst</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/romy-seth.jpg" alt="Romy Seth">
</div>
</div>
</div>
</div>
However, when I add a little html above the original html in my own implementation, (like the two divs below the hover) behavior breaks.
<div></div>
<div><span><br>if you hover on this text on the white region over the images,
weird stuff happens. <br>The javascript should only be triggered if you hover over a person (scroll down to see)</span>
</div>
After I add my little divs above the fancy codepen stuff, the pages provides information when you hover on the new, preceding white-region, instead of when you hover over the team member. Here is the codepen showing the broken version, with the little bit of preceding html: http://codepen.io/ihatecoding/pen/zqqyVj .
Why on earth could this be happening and how do I fix it?
The problem is with your .member-info class... Use chrome developer tools to easily debug this problem.
CodePen: http://codepen.io/anon/pen/wGGNmd#0
Your CSS:
.member__info {
color: #fff;
height: auto;
width: auto;
opacity: 0;
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
background: rgba(0, 0, 0, 0.85);
backface-visibility: hidden;
transition: opacity 0.4s ease-in-out;
}
my recommendation:
.member__info {
color: #fff;
height: 184px;
width: 184px;
position: absolute;
opacity: 0;
background: rgba(0, 0, 0, 0.85);
backface-visibility: hidden;
transition: opacity 0.4s ease-in-out;
}
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)
I am having an issue with my sticky nav. The problem seems to be that my JS is not applying the class I have told it to. you can view it live here http://test.makx.ca
Here is my code.
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
nav = $('.nav-bar').offset();
if (nav.top <= scroll) {
$('.nav-bar').toggleClass('sticky-nav');
} else {}
});
</script>
the HTML
<div class="row nav-row">
<div id="nav-bar" class="medium-12 column nav-bar">
<ul class="links">
<li>home</li>
<li>about us</li>
<li>pricing</li>
<li>contact</li>
</ul>
<ul class="links-right">
<li class="has-form">
<div class="row collapse">
<div class="large-7 small-7 columns">
<input type="text" placeholder="enter text">
</div>
<div class="large-3 small-4 pull-2 columns">
<a href="#" class="search button expand" style="padding-top: 0.6rem;
padding-bottom: 0.6rem;">Search</a>
</div>
</div>
</li>
</ul>
</div>
</div>
the CSS
.sticky-nav {
position: fixed;
top:0;
width: 100%;
display: block;
}
any feedback would be most welcoming. This has me and a friend completely stumped.
You're using the wrong selector. .nav-bar is a class selector, but you want to select the element with the id nav-bar, not the class nav-bar. Use #nav-bar as the selector instead.
Unrelated to your question, but FYI: Your use of toggleClass is going to have some odd results; it will constantly be toggling the class on and off while the user scrolls.