I have a basic html document with a sticky header and footer. I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form. I have tried to align the form below this vertically but they don't line up. The problem is the tab div does not have a scrollbar but the form does. This means the width of the form is different to the width of the tabs. I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up. I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work. You will see the form is not as wide as the tabs div. I have spent hours on this.
Also, I tried adding a margin-bottom to the form but no margin appears below the border.
$(document).ready(function () {
setFormsWidth();
});
function setFormsWidth() {
let scrollbox = document.createElement('div');
// Make box scrollable
scrollbox.style.overflow = 'scroll';
// Append box to document
document.body.appendChild(scrollbox);
// Measure inner width of box
scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
// Remove box
document.body.removeChild(scrollbox);
// Get current width of right margin, which should be 30% of the
// width of the form-panel parent (the content class).
var formPanel = document.getElementById("main-form");
// Get the current right margin and remove the px at end of number
var style = window.getComputedStyle(formPanel);
var marginRightString = style.getPropertyValue('margin-right');
var marginRight = marginRightString.slice(0,-2);
// now addthe scrollBarWidth to the right margin
var newMargin = marginRight + scrollBarWidth;
formPanel.style.marginRight = newMargin + "px";
}
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 1000px;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:1000px;">
<div class="content">
<form class="form-panel" id="main-form">THIS IS FORM</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.
Here is how to change the css.
Set height to 100% for all elements between .page and .form-panel elements, including .form-panel itself, so that scrollbar for .page will not be shown
Set box-sizing: border-box; for .form-panel, so that the border is drawn inside .form-panel
move .footer outside .page element
If you would like to set a specific height for .form-panel, you can create a div inside it and set its height like below:
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;
height: 100%;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 100%;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
padding-bottom: 7px;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:100%;">
<div class="content">
<form class="form-panel" id="main-form">
<div style="height:1000px">
THIS IS FORM
</div>
</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Related
I am creating a sidebar menu composed by 3 divs, these 3 divs should expand in "width" 100% of the menu width but they don't. I have checked to make sure that all tags/divs are closed and make sure that are all displayed as grid and put on each width 100% but still they don't expand to 100% width of their container. Why is that and how to fix it?
Here is my code:
*,
html {
margin: 0;
border: 0;
box-sizing: border-box;
color: #fff;
font-family: pc_seniorregular;
font-weight: 400;
}
.mobile,
.tablet,
.laptop {
display: none;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #16202a;
/* border: 5px solid blue; */
}
div,
menu,
header,
footer {
border: dotted 2px yellow;
display: grid;
height: 100%;
width: 100%;
}
.desktop {
height: 100%;
width: 100%;
/* border: 5px solid greenyellow; */
}
.dash-desk-wrap {
grid-template-columns: 1fr 4fr;
height: 100%;
width: 100%;
/* border: 5px solid red; */
}
/* SIDEBAR */
/* SIDEBAR */
/* SIDEBAR */
.dash-desk-sidebar {
display: grid;
grid-template-rows: 0.7fr 7fr 1fr;
height: 100%;
width: 100%;
border: 5px dotted blue;
}
.dash-desk-side-logo {
border: 3px dotted beige;
}
.dash-desk-side-list {
border: 3px dotted red;
}
.dash-desk-side-social {
border: 3px dotted green;
}
/* MAIN */
/* MAIN */
/* MAIN */
.dash-desk-main-wrap {
grid-template-rows: 0.5fr 1fr 4fr 0.5fr;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<title>Base Template</title>
</head>
<body>
<div class="mobile">
<h1>mobile</h1>
</div>
<div class="tablet">
<h1>tablet</h1>
</div>
<div class="laptop">
<h1>laptop</h1>
</div>
<div class="desktop">
<div class="dash-desk-wrap">
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<menu class="dash-desk-sidebar">
<div class="dash-desk-side-logo">
<p>Logo</p>
</div>
<div class="dash-desk-side-list">
<p>Side</p>
</div>
<div class="dash-desk-side-social">
<p>Social</p>
</div>
</menu>
<!-- MAIN -->
<!-- MAIN -->
<!-- MAIN -->
<div class="dash-desk-main-wrap">
<header></header>
<div></div>
<div></div>
<footer></footer>
</div>
</div>
</div>
</body>
</html>
Either make the menu class as div
<div class="dash-desk-sidebar">
<div class="dash-desk-side-logo">
<p>Logo</p>
</div>
<div class="dash-desk-side-list">
<p>Side</p>
</div>
<div class="dash-desk-side-social">
<p>Social</p>
</div>
</div>
or make a div below menu uwing the same.
Looking at your layout in code inspector it looks like browsers add default padding to menus.
For example, Google Chrome adds a padding-inline-start: 40px to <menu> elements.
Therefore, you can remove it by either declaring
.dash-desk-sidebar {
padding-inline-start: 0;
}
or
.dash-desk-sidebar {
padding: 0;
}
Alternatively, you can use a div instead of a menu.
If I understand you correctly you just have to add padding: 0 to .dash-desk-sidebar, because it has a "left padding" at the moment.
.dash-desk-sidebar {
padding: 0;
}
I have created a hover effect like whenever you hover on the box you will see a circle (actually it is a div with position: absolute whose clip-path position is controlled by Javascript offset) and when this circle reaches the second paragraph element it jumps to the top.
So I wanna know why it's happening and how to make the circle move consistently throughout the box without giving a jerk or moving to the top.
Here is my code
let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")
secondDiv.addEventListener("mousemove",function(e){
secondDiv.style.setProperty("--x",e.offsetX + "px")
secondDiv.style.setProperty("--y",e.offsetY + "px")
//console.log(e.offsetX)
})
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container{
width:70%;
margin: 0 auto;
border:2px solid red;
height:150px;
position:relative;
background: #9F86C0;
color:white;
margin-top: 10%;
}
.container p{
font-size:2.3em;
}
.container .content{
position: absolute;
top:0;
left:0;
width: 100%;
height:150px;
padding:1em;
}
.container .content:nth-child(2){
background: #E0B1CB;
color:white;
clip-path:circle(50px at var(--x) var(--y))
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="content check">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
<div class="content test">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
</div>
</body>
</html>
Since there are two paragraphs in place, the mouse movement triggers to choose the paragraph over the parent. You can choose to turn off the trigger using pointer-events: none on the paragraph elements.
let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")
container.addEventListener("mousemove", function(e) {
secondDiv.style.setProperty("--x", e.offsetX + "px")
secondDiv.style.setProperty("--y", e.offsetY + "px")
//console.log(e.offsetX)
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 70%;
margin: 0 auto;
border: 2px solid red;
height: 150px;
position: relative;
background: #9F86C0;
color: white;
margin-top: 10%;
}
.container p {
font-size: 2.3em;
pointer-events: none; /* Added */
}
.container .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 1em;
}
.container .content:nth-child(2) {
background: #E0B1CB;
color: white;
clip-path: circle(50px at var(--x) var(--y))
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="content check">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
<div class="content test">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
</div>
</body>
</html>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
I have this CSS project I am working on and now I am in the phase where I will start to embelish it with some effects and nice colors. However I just realized that there is a small issue with it: the beige container won't adjust its height as the blue cells move around. Could anyone help please? Here it is my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="OEPanel.js"></script>
<link rel="stylesheet" href="./OEPanel.css">
<title>Document</title>
</head>
<body>
<div id="oepanelcontainer" class="OEContainer">
<div id="oepanel" class="OEItems">
<div id="oecell1" class="OECell"></div>
<div id="oecell2" class="OECell"></div>
<div id="oecell3" class="OECell"></div>
<div id="oecell4" class="OECell"></div>
</div>
</body>
</html>
CSS
.OEContainer {
background-color: beige;
min-height: 10em;
vertical-align: middle;
padding: 10px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OEItems {
min-height: 10em;
vertical-align: middle;
padding: 0px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OECell {
background-color: lightblue;
min-height: 10em;
vertical-align: middle;
padding: 0px;
width:250px;
text-align:center;
float: left;
margin: 5px;
}
#media (max-width: 500px) {
.OEContainer {
flex-direction: column;
align-items: center;
}
}
JS
// config
var __OECELLS = 4; // the total of oecells in HTML (oecell1, oecell2...)
var __CELLWIDTH = 250; // the width of cells in pixels
var __MAXSCREENWIDTH = 1130; // the maximum width of screen in pixels
var __MAXCELLS = parseInt(__MAXSCREENWIDTH/__CELLWIDTH);
var __ADJUSTMENT = (__CELLWIDTH-30)/2;
var __CELLSPERROW;
$(function() {
RedefinePanel();
});
$(window).resize(function() {
RedefinePanel();
});
function RedefinePanel() {
var viewportWidth = $(window).width();
let __CELLSPERROW = parseInt((viewportWidth-__ADJUSTMENT)/__CELLWIDTH);
document.getElementById("oepanel").style.width = ((__CELLSPERROW)*__CELLWIDTH+(__CELLSPERROW*17)) + "px";
Thanks!
You need a clearfix for the container of your floated items.
.OEContainer {
background-color: beige;
min-height: 10em;
vertical-align: middle;
padding: 10px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OEItems {
min-height: 10em;
vertical-align: middle;
padding: 0px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.clearfix::after { /* clearfix class to expand the element back to its normal height */
content: '';
display: block;
clear: both;
}
.OECell {
background-color: lightblue;
min-height: 10em;
vertical-align: middle;
padding: 0px;
width:250px;
text-align:center;
float: left;
margin: 5px;
}
#media (max-width: 500px) {
.OEContainer {
flex-direction: column;
align-items: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="OEPanel.js"></script>
<link rel="stylesheet" href="./OEPanel.css">
<title>Document</title>
</head>
<body>
<div id="oepanelcontainer" class="OEContainer">
<div id="oepanel" class="OEItems clearfix"> <!-- clearfix class added here -->
<div id="oecell1" class="OECell"></div>
<div id="oecell2" class="OECell"></div>
<div id="oecell3" class="OECell"></div>
<div id="oecell4" class="OECell"></div>
</div>
</body>
</html>
When you use floats for all of the children of an element - it will collapse 0 height ( minus padding and margins etc ) unless you force it to expand to the size of it's children with a clearfix. Essentially it's a bug/quirk in browsers that's been persistent for a while.
Although this answers your questions I would advise against using floats wherever possible and use flexbox instead. Overall a lot less messy than floats in my opinion.
I know that z-index has problems with different positionings and in this snippet I need them to work together so that I could replicate the navigation on this website http://www.ericryananderson.com/
The problem is that when the overlay is activated the button needs to be z-indexed which the position sticky doesn't like and doesn't allow it causing the overlay to be unclosable. The position sticky is on the nav bar. Is there a workaround this?
var bars = document.querySelector('.bars')
var overlay = document.querySelector('.overlay')
var isMenuOpened = false;
bars.addEventListener('click', function() {
if (isMenuOpened === false) {
bars.classList.remove('fa-bars');
bars.classList.add('fa-times');
overlay.style.display = 'block'
isMenuOpened = true;
bars.style.position = 'fixed'
bars.style.top = '40px';
bars.style.right = '60px';
}else{
bars.classList.remove('fa-times');
bars.classList.add('fa-bars');
overlay.style.display = 'none'
bars.style.position = 'static'
isMenuOpened = false;
}
})
body{
height: 3000px;
}
.video{
width: 100%;
height: 700px;
background: red;
}
nav{
display: flex;
/* position: sticky; */
top: 0px;
justify-content: space-between;
padding: 50px;
background: green;
height: 10px;
}
i{
font-size: 30px;
z-index: 10;
}
.overlay{
position: fixed;
top:0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="video">
</div>
<div class="navigation">
<nav>
<h4>koreys site</h4>
<i class="fas fa-bars bars"></i>
</nav>
</div>
<div class="overlay">
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
I'm trying to make a div slider go left to right. In as much detail this is what I would like:
The div to be hidden on first page load
Have the div slide left to right AND BACK by the click of an image NOT a button
When the image (of a right arrow) is clicked, let the arrow slide out with the div (and IF possible when div is fully extended have image of a left arrow enabling a slide back and vice-versa)
Here's what I got so far. (Don't need to use)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="TestSite/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
<style>
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #FFF;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #F00;
color: #333;
}
.slide button {
margin: .7em 0 0 .7em;
}
.js #slidebottom .inner {
display: none;
}
</style>
</head>
<div id="slideleft" class="slide">
<button><img src="TestSite/js/fancy_nav_right.png" /></button>
<div class="inner">Slide from bottom</div>
</div>
<body>
</body>
</html>