Here is my code:
.parent{
position: fixed;
border: 1px solid;
height: 40%;
width: 300px;
max-height: 200px;
}
.first_child{
border: 1px solid blue;
padding: 10px;
height: 20px;
text-align: center;
}
.second_child{
border: 1px solid red;
height: 100%;
overflow-y: scroll;
}
<div class="parent">
<div class="first_child">title</div>
<div class="second_child">
one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br>
</div>
</div>
As you see .second_child is out of parent. I want to keep it inside .parent element. How can I do that?
In other word I want to implement something like this:
.second_child{
height: 100% - 40px;
/* 40px: 20px of .first_child's height, 10+10px of .first_child's padding */
...
}
Note: I don't want to use neither calc() or box-sizing: border-box; .. Because they aren't supported in old browsers like IE7. So I'm looking for a third approach.
Would something like this work?
.parent{
position: relative;
border: 1px solid;
height: 100%;
width: 300px;
max-height: 200px;
min-height: 100px;
}
.first_child{
border: 1px solid blue;
padding: 10px;
height: 20px;
text-align: center;
}
.second_child{
border: 1px solid red;
overflow-y: scroll;
position: absolute;
top: 40px;
right: 0;
bottom: 0;
left: 0;
}
<div class="parent">
<div class="first_child">title</div>
<div class="second_child">
one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br>
</div>
</div>
Related
div#content {
position: relative;
width: 100%;
border: 1px solid black;
height: 500px;
bottom: 0px;
}
div#menu {
position: absolute;
height: 125px;
width: 100%;
border: 1px solid black;
bottom: 0px;
line-height: 125px;
text-align: center;
}
div#recenter {
line-height: 50px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
position: absolute;
margin: 10px;
padding: 0px 20px;
bottom: 180px;
background-color: aliceblue;
}
div#geolocation {
line-height: 50px;
text-align: center;
border: 1px solid black;
position: absolute;
margin: 10px;
bottom: 125px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>
Currently, when I hide the #geolocation block in javascript, the #recenter button does not move.
What I want is that when I run the following jQuery command:
$('#geolocation').hide();
(or in js : document.getElementById('geolocation').style.display = 'none';)
the #recenter button moves to the bottom (where the #geolocation block was located)
How to do ?
Don't position elements the absolutely, take advantage of flexbox layout and alignment options.
div#content {
position: relative;
width: 80%;
margin: 1em auto;
border: 1px solid black;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
div#menu {
height: 50px;
width: 80%;
border: 1px solid black;
text-align: center;
margin: 0 auto;
}
div#recenter {
line-height: 20px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
margin: 10px;
padding: 0px 10px;
background-color: aliceblue;
}
div#geolocation {
line-height: 20px;
text-align: center;
border: 1px solid black;
margin: 10px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>
When you click the geolocation, and hide it, you can also move the recenter button to the bottom.
It's not a very nice way to do this, but it works.
div#content {
position: relative;
width: 100%;
border: 1px solid black;
height: 500px;
bottom: 0px;
}
div#menu {
position: absolute;
height: 125px;
width: 100%;
border: 1px solid black;
bottom: 0px;
line-height: 125px;
text-align: center;
}
div#recenter {
line-height: 50px;
text-align: center;
border: 1px solid black;
border-radius: 30px;
position: absolute;
margin: 10px;
padding: 0px 20px;
bottom: 180px;
background-color: aliceblue;
}
div#geolocation {
line-height: 50px;
text-align: center;
border: 1px solid black;
position: absolute;
margin: 10px;
bottom: 125px;
background-color: aliceblue;
}
<div id="content">
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';document.getElementById('recenter').style.bottom = '125px';">MENU (CLICK ME)</div>
</div>
wrap the geolocation and recenter div within a div and give it to them a class. then use calc and flex to achieve your requirement like below. don't need to use position and bottom CSS it's a very bad practice for this kind of situation. Happy Solution :)
div#content{
position:relative;
width:100%;
border:1px solid black;
height:500px;
bottom:0px;
}
div#menu{
position:absolute;
height:125px;
width:100%;
border:1px solid black;
bottom:0px;
line-height:125px;
text-align:center;
}
#recenter{
padding:10px;
border:1px solid #000;
max-width:120px;
border-radius:30px;
text-align:center;
background-color: aliceblue;
}
#geolocation{
line-height:50px;
text-align:center;
border: 1px solid black;
margin:10px;
background-color: aliceblue;
}
.upper_div{
height: calc(100% - 125px);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<div id="content">
<div class=upper_div>
<div id="recenter">Re-center</div>
<div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
</div>
<div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU</div>
</div>
I'd like to center an icon in the y-middle of an input field.
What I've tried was something like this:
#container {
position: absolute;
width: 40%;
height: 20%;
}
#icon {
position: absolute;
top: 0;
bottom: 0;
width: 15px;
height: 15px;
margin: auto;
right: 4%;
background-image: url("https://i.stack.imgur.com/Xcmsc.png");
background-repeat: no-repeat;
background-size: contain;
z-index: 2;
}
#input {
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
border: none;
border-top: 1px solid #eae8ea;
border-bottom: 1px solid #eae8ea;
}
<div id="container">
<input id="input" placeholder="input" />
<div id="icon"></div>
</div>
For desktop safari (Mac OS) it is working quite fine but on mobile devices like on my iPhone the icon does not seems to be centered at all:
How to fix this error occurring on mobile devices? Any help would be really appreciated. Thanks in advance!
Issue is caused by default margin and padding for input element. Default values are used by browser and need to be overwritten to be nulled. box-sizing: border-box; ensures borders which you add to #input are collapsed to it's height and don't exceed it.
Here you can read more about border-box.
Default browser CSS (example)
More about them.
Here already partially overwritten.
Key part
#input {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Snippet
#container {
position: absolute;
width: 40%;
height: 20%;
}
#icon {
position: absolute;
top: 0;
bottom: 0;
width: 15px;
height: 15px;
margin: auto;
right: 4%;
background-image: url("https://i.stack.imgur.com/Xcmsc.png");
background-repeat: no-repeat;
background-size: contain;
z-index: 2;
}
#input {
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
border: none;
border-top: 1px solid #eae8ea;
border-bottom: 1px solid #eae8ea;
}
<div id="container">
<input id="input" placeholder="input" />
<div id="icon"></div>
</div>
I see no reason that you can't just use a background image directly on the input? (I made some adjustments to the original example, but you get the idea)
#container {
width: 100px;
height: 50px;
}
#input {
line-height: 50px;
font-size: 15px;
border: none;
border: 1px solid #eae8ea;
background-image: url("https://i.stack.imgur.com/Xcmsc.png");
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: right center;
}
<div id="container">
<input id="input" placeholder="input" />
</div>
Hello Stackoverflow Team,
How can the child div inside the parent div with overflow have a right and left margin? I'm trying to solve the issue but it does not give a clean solution for it.
Attempt:
margin-right wont work
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
margin-right: 20px;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
My unclean Solution:
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
border-right: 20px solid red;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
any better way to solve the issue?
Since you are using position: absolute for the child, best way to achieve what you want is remove position: absolute then add the margins you need.
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
width:350px;
height:150px;
top: 50px;
margin: 50px 20px 0;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
Update
If you need the child div to be position: absolute you will have to wrap it in another div as follow:
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
border-color: red;
position: absolute;
top: 20px;
height: 150px;
}
.sub-child {
width:350px;
height:150px;
margin: 0 20px;
display: inline-block;
}
<div class="parent">
<div class="child">
<div class="sub-child"></div>
</div>
</div>
i need to position 2nd element is next to the first element.So i set top value as 100%. the starting point of 2nd element is varies when device pixel ratio as 1.5.
Machine : Lenovo YOGA 500,
Scale : 150%,
Resolution: 1920 * 1080,
Browser: Except Firefox
.wrap {
background-color: #fff;
border: 1px solid #ef36d8;
position: absolute;
top: 70px;
}
.content {
width: 100px;
height: 100%;
padding: 5px;
}
div {
box-sizing: border-box;
}
.arrow {
position: absolute;
width: 16px;
height: 8px;
left: 50px;
top: 100%;
background-color: #fff;
border: 1px solid #ef36d8;
border-top: 1px solid #fff;
}
<div class="wrap">
<div class="content">Content area</div>
<div class="arrow"></div>
</div>
this issue occurs only when device pixel ratio as 1.5.
the arrow class element start position varies based on device pixel ratio.i need to remove border top of red highlighted element
Kindly guide me any solution on this?
Thanks is advance
Definitely an interesting problem. The only way I was able to remove that extra line was to have another, slightly smaller div box within the arrow:
HTML
<div class="wrap">
<div class="content">Content area</div>
<div class="arrow"></div>
<div class="secondary-arrow"></div>
</div>
CSS
.wrap {
background-color: #fff;
border: 1px solid #ef36d8;
position: absolute;
top: 70px;
}
.content {
width: 100px;
height: 100%;
padding: 5px;
}
div {
box-sizing: border-box;
}
.arrow {
position: absolute;
width: 16px;
height: 8px;
left: 50px;
top: 100%;
background-color: #fff;
border: 1px solid #ef36d8;
border-top: 1px solid #fff;
}
.secondary-arrow {
position: absolute;
width: 14px;
height: 7px;
left: 51px;
top: 100%;
background-color: #fff;
}
I have created a slideshow and to the right of it there are divs, they will be enlarged when you hover over them and when you take your cursor off the div it will shrink. But, the aside (the divs parent) is in the correct place where it should be, it's the divs that aren't filling the top of the aside element. How can I get the divs to fill the aside element and not break anything else?
.thing {
height: 120px;
width: 250px;
z-index: 10;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 11;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
display: table-cell;
padding-top: 5px;
width: 250px;
border-radius: 10px;
border: 2px solid black;
overflow: hidden;
position: relative;
height: 385px;
}
.container {
position: relative;
width: 750px;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}
<div class="report">
<div id="imgGallary" class="container">
<img src="images/companies.png" alt="" width="750" height="400" />
<img src="gallery" alt="" width="750" height="400" />
</div>
<aside class="aside">
<div id="c1"></div>
<div class="thing" style="background-color: blue;">
<h1>Find Us!</h1>
</div>
<div class="thing" style="background-color: orange;"></div>
<div class="thing" style="background-color: pink"></div>
</aside>
</div>
Your CSS layout is confusing display: table and display: relative. They aren't compatible like you have them. The preferred way to layout your .container and the aside would be to use floats. I revised your example to float those two containers next to each other (roughly at a 80/20 split for the width). This has the added bonus of making your layout responsive.
Working codepen:
http://codepen.io/staypuftman/pen/vKoPmw
.thing {
height: 120px;
width: 250px;
position: relative;
border: 5px solid brown;
}
.thing:hover {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.report {
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.aside {
padding-top: 5px;
width: 18%;
border-radius: 10px;
border: 1% solid black;
overflow: hidden;
float: left;
position: relative;
height: 385px;
}
.container {
float: left;
width: 80%;
height: 400px;
border-radius: 5px;
border: 1px solid black;
overflow: hidden;
}