Is it possible to let only a certain element overflow a parent div?
I'm hiding all the child divs from overflowing, but I need one of the children elements to overflow and float outside the limiting parent.
See http://sandbox.pixelcraftwebdesign.com/engineering and run some calculations with random numbers.
The little red number in the upper right-hand corner needs to float over and outside the output div.
not entirely sure what you are after, but here is a fiddle demonstrating a certain child div floating outside and displaying all of its contents: http://jsfiddle.net/dcpDa/
<div id="parent">
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="doShow">Okay, Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
<div class="dontShow">Dont Show All Of Me</div>
</div>
CSS:
div {
width: 5em; /*constrain div */
height: 1em;
border: 1px solid #aaa;
background-color: #ccc;
}
.dontShow { overflow: hidden; } /* do not show overflow */
.doShow {
width: auto; /* over ride constraints and show all */
height: auto;
position: absolute; /* break from flow */
left: 15em; /* position where you want */
}
Here are two articles on CSS positioning I found usefull recently:
css Floats 101
Css Positioning 101
If the element you want to overflow is text, the simpliest solution is :
.nowrap {
white-space: nowrap;
}
Here is the fiddle : https://jsfiddle.net/Flyout/dgh2erqj/
Assuming that you want the widths to remain the same:
Remove overflow:hidden from .output.
Set .output .right to width:257px;overflow:hidden.
Set .result-rh, .result-temp to width:241px.
This fix allows overflow on the container, but hides overflow on the right side. It also gives the right side the appropriate size, to prevent the result SPANs from being clipped.
Works for me in Firefox 3.6.17. Should work in other browsers as well.
Use position: absolute; on the child you want to show. You can then use top, left, height, and width to position it where you want.
Related
#Here, I'm trying to create horizontal scrolling for a div element for my application. The div element consists of ul li element and some other div tags for my requirement. The Ul li elements are dynamically added inside the parent div element.
Although I could get the vertical scrolling working properly and my horizontal scrolling is displayed using overflow-x: scroll. I am not able to scroll it, the ul li elements gets distorted. I have set a predefined width of 700px for the div container also. Its like the horizontal scrolling is disabled. I am not using overflow anywhere else in the application
<div class="org-chart" appOrgachart [empArr]="employees" [orgaArr]="orgaArr" *ngIf="employees.length>0 && !isLoading">
<ul>
<li *ngFor="let emp of empArr">
<div class="user">
<div class="name">{{emp.empname}}</div>
<div class="role">{{emp.empdesgname}}</div>
</div>
</li>
</ul>
</div>
My CSS file:
.org-chart {
display: flex;
justify-content: center;
left: 29px;
position: relative;
overflow-x: scroll !important;
overflow-y: scroll;
height: 400px;
width: 65%;
transform: translateY(12%);
}
Looking at your code, providing overflow-x: scroll !important; is big no no from me, it should be the last option for you to use.
now coming to your requirement, you need to specifically provide overflow-x: scroll if you give overflow:auto it automatically gives you a scroll when needed.
now when is it??
when the height and width is more than the browser size that is when you will get the scrolling feature.
if you need a scroll within browser size then, decrease the width of the container and apply overflow:auto; that should give you a scroll on sight.
here is the example of what I am saying:
so what does it mean is when you want a scroll within the browser then you should have a child class and the width of that class should be less w.r.t the content so that it can overflow.
.org-chart {
display: flex;
justify-content: center;
left: 29px;
position: relative;
overflow: auto;
border: 1px solid black;
/*Main container */
height: 300px;
width: 65%;
}
.content {
width: 100%;
/* you should have another width inside main container */
border: 1px solid red;
}
<div class="org-chart" appOrgachart [empArr]="employees" [orgaArr]="orgaArr" *ngIf="employees.length>0 && !isLoading">
<ul>
<li *ngFor="let emp of empArr">
<div class="user">
<div class="name">{{emp.empname}}</div>
<div class="role">{{emp.empdesgname}}</div>
<div class="content">Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last
on only the last paragraph in the container, you can use :last child, see example below. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it,
text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below. Notice that the text-align-last property sets the alignment
for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can
use :last child, see example below. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH
of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below.</div>
</div>
</li>
</ul>
</div>
apply max-width property as 64% and overflow:auto
Is it possible to specify the max-height of a DIV with position:absolute such that if it would reach past the viewport downwards, a scrollbar appears?
I.e., to user "overflow-y: scroll;" without having to specify the height statically? (Such that it works even if you resize the window.)
Here's what I mean: https://jsfiddle.net/x5efqtv2/2/
(And also see below)
P.S.: I could solve it with JavaScript, I'm interested in pure CSS solutions, if there's any.
Thanks!
div {
border: 1px solid red; /* just to see where the DIVs exactly are */
margin: 5px; /* ditto */
}
.float-over-content {
position: absolute;
max-height: 100px;
overflow-y: scroll; /* works with static max-height only? */
z-index: 10;
background-color: white;
}
<body>
<div id="upper">This one is above the position:absolute one</div>
<div style="position: relative">
<!-- this is needed for position:absolute below to put the div under "upper" -- or so I think -->
<div class="float-over-content">
<!-- I WANT TO DEFINE THE MAX-HEIGHT OF THIS DIV SUCH THAT IF IT REACHES THE BOTTOM OF THE VIEWPORT, A SCROLL BAR SHOULD APPEAR: (AS OPPOSED TO NOW, WHEN ITS HEIGHT REACHES 100px) -->
Make this reach exactly to the bottom<br/>
<!-- X times... -->
Make this reach exactly to the bottom<br/>
</div>
</div>
<div id="lower">
This one is "behind" the position:absolute one (it partially covers this one)
</div>
</body>
What Temani said in the comment. Use the calc function and the view height (vh) of the viewport. Check out the code snippet below. I added a button that will add more lines of text to the element and you can see it expand to fit the viewport with the overflow becoming scroll content.
document.getElementById("add-a-line").addEventListener("click", function(){
document.getElementById("float-over-content").insertAdjacentHTML('afterbegin','Make this reach exactly to the bottom<br/>' );
});
div {
border: 1px solid red; /* just to see where the DIVs exactly are */
margin: 5px; /* ditto */
}
#float-over-content {
position: absolute;
max-height: calc(100vh - 47.4px);
overflow-y: scroll; /* works with static max-height only? */
z-index: 10;
background-color: white;
}
#add-a-line{
position:fixed;
right: 0;
width: 200px;
height: 20px;
background-color: #0f0;
}
<body>
<div id="upper">This one is above the position:absolute one</div>
<div style="position: relative">
<!-- this is needed for position:absolute below to put the div under "upper" -- or so I think -->
<div id="float-over-content">
<!-- I WANT TO DEFINE THE MAX-HEIGHT OF THIS DIV SUCH THAT IF IT REACHES THE BOTTOM OF THE VIEWPORT, A SCROLL BAR SHOULD APPEAR: (AS OPPOSED TO NOW, WHEN ITS HEIGHT REACHES 100px) -->
Make this reach exactly to the bottom<br/>
<!-- X times... -->
Make this reach exactly to the bottom<br/>
</div>
</div>
<div id="lower">
This one is "behind" the position:absolute one (it partially covers this one)
</div>
<div id="add-a-line">
Click to add a line
</div>
</body>
I'm trying to have a toolbar always aligned to the right within a DIV without adding any height. The problem I'm finding is making this work both when the box has 100% width and when the width is determined by content. The HTML looks something similar to this:
<div class="box">
<div class="title">
float right
</div>
<div class="toolbar">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
I managed to make it work in Firefox, but Chrome wraps the toolbar when there is not enough space for it instead of increasing the width of the container.
.box {
border: 1px solid #ccc;
display: inline-block;
margin: 5px 0 15px;
}
.title {
display: inline-block;
}
.toolbar {
background: #eee;
float: right;
margin-left: 25px;
}
I would like to find a single set of rules to achieve this regardless the width of the container, but I'm out of ideas unless I use some extra class to differentiate both cases. Also, I'm trying to avoid using overflow or clearfix because I don't want the toolbar to affect the height of the box.
In this fiddle I show all combinations I have tried: http://jsfiddle.net/omegak/c4y4t/2/
You can try this, This worked for me.
.title {
float:left;
}
See if this is the desired output
Updated the below css and added clearfix class to the parent div
.title {
float:left;
}
Add the following CSS and clear the floats on first Div.
.title {
float:left;
}
Here is the demo
I got it working in the end with a little hack.
I gave up on trying the title not to be float: left. Then, to prevent the box to have no height I added overflow: hidden to it. Finally, the hack consists on setting margin-bottom: -999px on the toolbar to prevent it from adding any extra height to the box.
Here is the solution: http://jsfiddle.net/c4y4t/8/
I have a div element, that I essentially want to turn into a window (of sorts). Basically, within that div element is content that extends beyond the view port of the "window" (div element). Here's a picture of what I'm trying to accomplish:
Now, I tried creating a div element of a fixed size, and gave it overflow: hidden, then placed the larger bit of content within that. The problem is (and I've only tested this in chrome so far), that when one of the inner elements no longer fits 100% within the overflow area, it disappears.
To know what I mean, I've attached another picture:
Notice that the turquoise portion to the right is missing (sorry about the white spacing to the left of the yellow, that's just a bad crop job on my part).
Is this a solvable problem without doing something hackish (such as extending the width of the "window" box, then absolute positioning another box in the right portion to hide that new area)?
Edit The question has been answered, but here's the fiddle for everyone to see what I was trying to accomplish: http://jsfiddle.net/MRnL6/1/
Thanks!
I think I understand what you're getting at. I think your elements are dropping down to the next line because their parent container isn't holding them. Try creating a container inside your window to contain the elements with a width equal to all of its children. See this fiddle for example.
The HTML:
<div id="window">
<div id="container">
<div class="elem one"></div>
<div class="elem two"></div>
<div class="elem three"></div>
<div class="elem four"></div>
</div>
</div>
and the CSS:
#window {
height: 100px;
overflow: hidden;
width: 250px;
}
#container {
width: 400px;
}
.elem {
height: 100px;
float: left;
width: 100px;
}
.one {
background: #0f0;
}
.two {
background: #f0f;
}
.three {
background: #ff0;
}
.four {
background: #0ff;
}
If I understand you want to be able to scroll to the content? Try overflow:scroll.
I think you are trying to accomplish something like this.
Please see:
http://jsfiddle.net/UMJwT/2/
try adding a intermediatary
div
The easiest option is to restyle the inner portions so that they all fit instead of overflowing.
See this demo
#container{
width:400px;
height:100px;
border:5px solid gray;
margin:10px;
}
.test{
display:inline-block;
width:25%;
height:100%;
}
I have four div tags. One of them is .main div. The rest of the are inside .main with .sub classes. What I want is first to show 1st div tag inside .main and the rest will be placed on the right side of the first div tag but the overflow of the main div tag is hidden so that the other two div tags are not shown only the first is visible. I am trying to achieve this with this code. How can I achieve this?
.main {
width: 100%;
height: 500px;
background: red;
overflow: hidden;
}
.sub {
width: 100%;
height: 300px;
float: left;
}
.blue { background: lightblue; }
.green { background: green; }
.orange { background: orange; }
Assuming I've understood you correctly, and you want to see all three sub divs, one on the left, and two on the right, the problem is that you've set the widths to 100%, so there is no space to have them floating next to each other.
You need to set their widths so that they don't take up the full width of the container, for example they can each be 50% wide.
You also need to set the heights of the two divs on the right so that their total height is the same as the div on the left if you want them to line up.
Update:
To make it so that only the left div is visible initially, I think it's best you add another wrapper div around the the sub divs like this:
<div class="main">
<div class="wrapper">
<div class="sub blue"></div>
<div class="sub green"></div>
<div class="sub orange"></div>
</div>
</div>
With a width set to 200%.
.wrapper {
width:200%;
}
Then when you want the right hand divs to become visible, you can slide them onto the screen by repositioning the wrapper div, either with a transform, relative position, or margin setting.
Updated fiddle example
I don't know why but i have found that if you have space below the first item in this situation it won't work as expected..
so make the height of sub match then it will work:
.sub {
width: 100%;
height: 500px;
float: left;
}
http://jsfiddle.net/Ex9EC/2/
probably this is totally wrong approach though so wait for someone who knows to comment maybe?
Also I think there might be something about how the position of the outer/container div has to be set (to relative,absolute or fixed) which is why i added that but it seems to work without it too:
http://jsfiddle.net/Ex9EC/3/