I have some trouble with focusing elments which are in div with absolute position.
Problem is with absolute div which have large size and it is out of window bounds. When I focus this absolute div, than chrome automaticaly scrolls widow body, but I want to prevent scrolling
I know there is javascript solutions like "document.body.scrollTop = 0;", but I want to find is there css solution for it?
HTML Codde:
<div class="container">
<input type="button" value="make focus" onclick="document.getElementById('innerContainer').focus();" />
<div tabindex="0" id="innerContainer" /></div>
</div>
Css code:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow:hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
height: 200px;
overflow: hidden
}
#innerContainer{
background-color: green;
width: 100%;
height: 4000px;
position: absolute;
top: 100px;
}
#innerContainer:focus{
background-color: red;
}
Link to js fiddle - https://jsfiddle.net/3tLbqj5z/2/
Related
I'm trying to create 2 divs, one of them is the left sidebar and the other one is the body of the page where content shows up. What I'm trying to do is:
make the sidebar div height 100%
the body height 100% too
make the body's width change when sidebar width changes.
This is the code that I've tried so far:
#Sidebar{
background-color:#F0F0F0;
height: calc(100% - 80px);
width: 257px;
position: fixed;
left: 0;
bottom: 0;
overflow: hidden;
white-space: nowrap;
}
#content {
margin: 0;
position: fixed;
height: 100%;
}
when I do this, the content div shows IN the Sidebar!
#Sidebar {
height: calc(100% - 80px);
width: 257px;
position: fixed;
top:0;
left: 0;
bottom: 0;
overflow: hidden;
white-space: nowrap;
border:1px solid #000;
}
#content {
margin: 0;
position: fixed;
height: 100%;
border:1px solid tomato;
}
<div id="Sidebar">
Hello World!!
</div>
<div id="content">
Content Div
</div>
Note that i use Jquery .Resizable to change the width.
and this is a jsfiddle https://jsfiddle.net/j64r3bm1/
Can't You just put the sidebar
.sidebar {
position: fixed;
height: 100vh;
left: 0px;
top: 0px;
width: 275px;
}
and the body container
body {
padding-left: 275px;
}
it will never overlap and you can just build your body as you wish.
The fun thing about this is when you use media-queries to handle mobile version - you can just remove padding and move sidebar outside of body and on some button (or anything) make it slide into view.
Set the margin-left of your main content to the same width (+gap if you prefer) and change it when you resize your sidebar.
#content {
margin-left: 257px;
Updated fiddle: https://jsfiddle.net/j64r3bm1/2/
To explain what's happening: when you use position:fixed, it no longer takes up space and effectively 'hovers' on the page, so when your content div comes along, it gets put at left:0 because they're nothing to its left that's taking up space on the page.
You could also use position:fixed on your content and set the left - but then neither will take up 100% height (as they will both be 0width/0height).
Alternatively, you could take out the position:fixed and use float:left.
Looks like i figured out how to do it.
and I used JQuery to do that, all what i did is :
#Sidebarlist
{
background-color: var(--SidebarBackgroundColor);
height: calc(100% - 80px);
color:var(--SidebarTextColor);
width: 257px;
position: fixed;
left: 0;
bottom: 0;
overflow:hidden;
white-space: nowrap;
}
#MainContentdiv {
height: 100%;
}
And using jquery :
$('#Sidebarlist').resizable({
start: function( event, ui ) {},
stop: function( event, ui ) {},
handles: 'n,w,s,e',minWidth: 200,
maxWidth: 400
});
$( "#Sidebarlist" ).on( "resizestart", function( event, ui ) {
var marginleft = $("#Sidebarlist").width();
$('#MainContentdiv').css('margin-left',marginleft);
});
$( "#Sidebarlist" ).on( "resizestop", function( event, ui ) {
var marginleft = $("#Sidebarlist").width();
$('#MainContentdiv').css('margin-left',marginleft);
});
Thanks for anybody that answered my question.
You can simply add
left: 257px;
top: 0;
To the #content div and it will appear how you want it. To get this to resize, you'd adjust this. The alternative is to use a container, like this:
#Container {
height: 100%;
position: fixed;
width: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: row;
}
#Sidebar {
height: calc(100% - 80px);
width: 257px;
display: block;
overflow: hidden;
white-space: nowrap;
border:1px solid #000;
}
#content {
margin: 0;
height: 100%;
border:1px solid tomato;
}
<div id="Container">
<div id="Sidebar">
Hello World!!
</div>
<div id="content">
Content Div
</div>
</div>
I'm gonna give you an out there answer, I've tested this in firefox and chrome and it works. But it's a bit cutting edge so I'm not sure if IE will support it.
It's using css variables, if you have a different variable in at the start (in the :root section) then the page will be calculated differently.
I also took your borders out as they mess with total width and used background colours to tell the divs apart.
EDIT:
I've added a tiny amount of JS to show the variable being updated on the fly and everything readjusting.
changeSidebar = function() {
var customSize = document.querySelector('.sidebar-width').value;
document.documentElement.style.setProperty('--menu-width', customSize + 'px');
}
:root {
--menu-width: 257px
}
#sidebar,
#sidebar-footer {
width: var(--menu-width);
left: 0;
overflow: hidden;
position: fixed
}
body {
margin: 0
}
#sidebar {
height: calc(100% - 80px);
top: 0;
white-space: nowrap;
background: orange
}
#sidebar-footer {
height: 80px;
top: calc(100% - 80px);
background: pink
}
#content {
position: fixed;
right: 0;
width: calc(100% - var(--menu-width));
height: 100%;
background: tomato
}
<div id="sidebar">
Hello World!!
</div>
<div id="sidebar-footer">
I'm just here to fill that space...
</div>
<div id="content">
Content Div
<br />
<input class="sidebar-width" value='257'>
<button onclick="changeSidebar();">Enter</button>
</div>
That is the Solution :
var offsetHeight = document.getElementById('Sidebar').offsetHeight;
document.getElementById('content').style.height = offsetHeight+'px';
#Sidebar{
background-color:#F0F0F0;
height: 700px;
width: 10%;
float:left;
left: 0;
bottom: 0;
overflow: hidden;
}
#content {
margin: 0;
width:90%;
float:right;
background-color:green;
}
<div id="Sidebar">
Side bar
</div>
<div id="content">
Hello World !
</div>
I'm trying to have an child element (something like a toolbar) of a parent element to be positiond on its bottom edge. The bahavior should be the same as using position fixed for the browser view.
I'm using absolute position right now. Everyting is perfect until the parent needs to scroll its content. Then the toolbar moves along with the rest of the parent's content.
Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
.mock {
height: 200px;
background-color: red;
}
.tool-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: blue;
}
<div class="container">
<div class="mock"></div>
<div class="tool-bar"></div>
</div>
The toolbar is inside the scrollable area, that's why it scrolled. Try this code:
HTML
<div class="container">
<div class="scroll">
<div class="mock"></div>
</div>
<div class="tool-bar"></div>
</div>
CSS
div.scroll { /* style of .container to scroll */ }
I have found an interesting fiddle that may help you. They are using position:fixed and the divs are not nested:
http://jsfiddle.net/b2jz1yvr/
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"></div>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb
}
I am facing a case like this, a popup which is hidden using "visibility : hidden" still holds a space in the screen, while I have no control over the coordinates of this element as it's auto calculated by Primefaces control
JSFiddle example
here's a simulation for my case
<div class="main"></div>
<div class="dialog"></div>
<style>
.main{
background-color: red;
width: 100%;
height: 100%;
}
.dialog{
position: absolute;
top: 800px;
left: 0px;
width: 200px;
height: 200px;
visibility: hidden;
}
</style>
hope you can help, thank you
use jquery to remove the particular element from the screen
$( ".dialog" ).remove();
I have a three-column layout that takes up 100% width and height of the browser (with padding). This layout contains two columns which also take up 100% height and should scroll independently.
Here is a jsfiddle: http://jsfiddle.net/KdZ9A/2/. Here is how it looks in Chrome (desirable -- individual columns scroll):
and Firefox and IE (undesirable -- body is scrolling):
This works perfectly in Chrome; however, the in Firefox and IE (10), the entire page scrolls instead of individual columns scrolling. I only want the columns to overflow and scroll -- not the body. Any idea how to make this work in Firefox and IE?
I've also tried a bit different approach using absolute positioning of the columns' contents: http://jsfiddle.net/KdZ9A/3/.
Here is the HTML I am using:
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
I'm using absolute positioning to achieve 100% height and then display of table and table-cell inside that to achieve 100% height of the columnns:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner > div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
I was 5 minutes from giving up and HOLY CRAP...I GOT IT WORKING
http://jsfiddle.net/gFX5E/15/
This is based on the different approach I mentioned. I needed to wrap .content divs and make the wrappers position relative. I also added some headers to the columns.
HTML:
<div class="content-wrap">
<div class="content">
...
</div>
</div>
CSS:
.content-wrap {
position: relative;
height: 100%;
}
.content {
overflow: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
Seems to work in Chrome, Safari, Firefox, and IE8+.
And here is a more semantic HTML5 version which also adds a header to the top: http://jsfiddle.net/gFX5E/20/. I believe this will require use of html5shiv to work in IE8.
If you are willing to settle for a fixed total width, here is how:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* makes filling up easier */
}
html, body {
height: 100%;
}
#container {
position: relative;
width: 980px;
height: 100%;
margin: auto;
background: grey;
}
#palette {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 800px;
background: pink;
}
#list {
position: absolute;
left: 180px;
top: 0;
bottom: 0;
right: 450px;
background: cyan;
overflow-y: auto;
}
#editor {
position: absolute;
left: 530px;
top: 0;
bottom: 0;
right: 0;
background: magenta;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="palette">Palette</div>
<div id="list" class="content"></div>
<div id="editor" class="content"></div>
</div>
<script>
$(function() {
for (var i=0; i<20; i++) {
$('.content').append('<p>Lorem ipsum [truncated for SO]</p>');
}
});
</script>
</body>
</html>
Demo on this Codepen: http://codepen.io/anon/pen/aqgCm?editors=100.
This is a pretty old post, but I thought I'd comment.
If you display: flex instead of display: table in your 1st example that should fix the issue.
Also setting your scroll container height to 100vh will also do the trick.
You have to understand that the browsers apply scroll only when they understand the size( i.e. height and width) of the content is greater than the size specified for it. In your case, the height you have specified for the div is 100%. This effectively tells the browser to keep increasing the size of the div till all the content fits in completely. Hence, this creates the situation where scroll isn't needed as the browser would 'fit' the entire content within this div.
So if you want the div (or the paragraphs contained in it) to be scrollable, then you would have to specify the height and then tell the browser to provide a scroll for the content that won't fit in the specified size.
I am not sure if you want the individual 'paragraphs' to be scrollable or the entire div( which contains these paragraphs) to be scrollable. In either case, you would need to provide a fixed height for the scroll to be useful. Your paragraph tag would need to have the following CSS applied to it :
p {
height: 200px; /*Some fixed height*/
overflow-y: scroll;
}
Here's an example of this: http://jsfiddle.net/y49C3/
In case you want your div called 'content' to be scrollable (as opposed to the paragraphs), then you would have to apply the aforementioned CSS to the div instead.
.content {
overflow-y: scroll;
height: 500px;
}
You can see that here: http://jsfiddle.net/qF7Mt/1/
I have tested this in Firefox (29) and IE 10 and it works fine!!!
Hope this helps!!!
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}