I'm trying to make a child div of a Flexbox container with overflowing-x content have 100% of the width WITH the overflow, but I can't figure out it, have made several searches and couldn't find a solution;
Can someone help me?
Fiddle: https://codepen.io/joaovtrc/pen/MWaaxKr
HTML:
<div class="test-container">
<div class="test-item-overflow">
overflowing contenttttttt
</div>
<div class="test-item-2"></div>
</div>
CSS:
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.test-item-overflow {
width: fit-content;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
I want the 'test-item-2' (the one with the blue background) div to match the red one in width, but, keep in mind that the content on the redbox might not be exactly the same everytime, so no calc(100% + x) with fixed params...
As you have set the width: fit-content; for the overflow div, it makes the width uncontrollable as it grows with more content in that div. one solution might be to change the width: 100%; and add overflow-x: scroll to the class .test-item-overflow. (see the change in the below snippet)
However, if you want to keep the width: fit-content; for the red div and change the blue div's width along with the red one (depending on the content) you can add: document.getElementsByClassName("test-item-2").style.width = document.getElementsByClassName("test-item-overflow").offsetWidth + "px". (in this case it's better to define id for the divs and use getElementById in the js code)
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.test-item-overflow {
width: 100%;
overflow-x: scroll;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
<div class="test-container">
<div class="test-item-overflow">
aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="test-item-2"></div>
</div>
So I really recommend you go ahead and add the following lines
Margin:0px;
This will take away all the space between your content and browser
Padding:0px;
This will take away all the space between your content and content border
Overflow:hidden;
Finally this should remove overflown content.
Hope that helped!
Better to use display:grid; on .test-container. After if you dont want to have gap between to the 2 cells, this is due to .test-container { height: 500px; }.
DEMO:
html body {
width: 100vw;
height: 100vh;
margin: 0px;
overflow: auto;
display: flex;
align-items: center;
background: grey;
}
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
/*display: flex;
flex-direction: column;*/
display:grid;
overflow-x: auto;
}
.test-item-overflow {
width: 1500px;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
<div class="test-container">
<div class="test-item-overflow">
overflowing contenttttttt
</div>
<div class="test-item-2"></div>
</div>
Related
I have an div#in and I want the width of my iFrame to fill the rest of the div#di space if the width of the div#in changes
Friends, how can I do this?
#di{
display: flex;
border:1px solid red;
}
#in{
display: block;
border:1px solid blue;
height: 56px;
width: 50px;
resize: both;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="di">
<div id="in">test by change witdh</div>
<iframe src="https://www.bing.com"></iframe>
</div>
Use this CSS:
#myIFrame {
position: relative;
width: 100%;
}
Where #myIFrame is an id that i gave to your frame.
I tried to make a site with a resizable sidebar using jquery-resizable.js. What I want to do is making stop resizing once it reaches the specific width. However, it keeps moving even though it is already over the min-width value. I found the ResizeObserver to detect the changing width values and tried to change the div element's CSS values like resize:none; but it didn't work.
How could I stop resizing once it reaches a certain width value?
Here are my codes.
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false,
resizeHeightFrom:'center',
});
var ro = new ResizeObserver(entries => {
for (let entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px x ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
if (cr.width <= 330) {
console.log("its too small");
cr.css('resize', 'none');
}
}
});
ro.observe(document.querySelector('.panel-right'));
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
}
.panel-left {
flex: 0 0 auto;
padding: 10px;
width: 900px;
/* min-height: 100%; */
min-width: 650px;
white-space: nowrap;
background: #8E44AD;
color: white;
}
.panel-right {
flex: 1 0 auto;
padding: 10px;
width: 300px;
/* min-height: 100%; */
min-width: 350px;
background: #34495E;
color: #fff;
overflow-x: hidden;
}
.splitter {
flex: 0 0 auto;
width: 8px;
background: url(images/vsizegrip.png) center center no-repeat #ccc;
min-height: 100%;
cursor: col-resize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Generate-Resizable-DOM-Elements-Resizable/src/jquery-resizable.js"></script>
<div class="panel-container el" style="height:100%;">
<div class="panel-left resizable">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right" id="panelRight">
right panel
</div>
</div>
What you try do do is possible with max-width like #JHeth mentioned.
You can set the min-width to set the minimum width of your div and max-width to stop on the pixel size you want.
.panel-left {
min-width: 50px;
max-width: 200px;
width: 50%;
}
See the example below:
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false,
resizeHeightFrom:'center',
});
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
width: 100%;
}
.panel-left {
flex: 0 0 auto;
padding: 10px;
min-height: 100vh;
min-width: 50px;
max-width: 200px;
white-space: nowrap;
background: #8E44AD;
color: white;
width: 50%;
}
.panel-right {
flex: 1 0 auto;
padding: 10px;
min-height: 100vh;
background: #34495E;
color: #fff;
overflow-x: hidden;
}
.splitter {
flex: 0 0 auto;
width: 8px;
background: url(images/vsizegrip.png) center center no-repeat #ccc;
min-height: 100%;
cursor: col-resize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Generate-Resizable-DOM-Elements-Resizable/src/jquery-resizable.js"></script>
<div class="panel-container el" style="height:100%;">
<div class="panel-left resizable">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right" id="panelRight">
right panel
</div>
</div>
So I can't figure this out.
I'm trying to get a red vertical box to display in middle of page. I've set the div's margin to auto.
And then there's another div that holds a centered text.
Setting margin auto on both.
They are both stacking on top of eachother fine in middle of page.
However I want it to be responsive to all heights. Right now it's just responsive to the x-axis and not the height.
HTML & CSS:
.parentDiv {
position: relative;
width: 250px;
height: 450px;
margin: auto;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}
#CSText {
position: absolute;
top: 45%;
width: 250px;
color: black;
text-align: center;
}
<div class="parentDiv" style="margin-top: auto;">
<div id="CSText" class="TextAlignCenter">
</div>
<div id="RedBox">
</div>
</div>
flexbox would be a great solution to this:
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.red-box {
background-color: red;
padding: 100px;
color: white;
}
<div class="container">
<div class="red-box">text</div>
</div>
I did this for you.
https://jsfiddle.net/95ssv6q1/
HTML
<div class="parentDiv">
<div class="inner">
<div id="RedBox">
</div>
</div>
</div>
CSS
.parentDiv {
display:table;
width: 100%;
height: 100%;
position: absolute;
}
.inner{
display: table-cell;
vertical-align:middle;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg