I have a container panel which has the possibility to expand. Inside the container panel I have an element which I want to adjust it the same height when expanded and when not expanded. How can I do it?
.container {
border: 1px solid rgba(0, 0, 0, 0.87);
width: 895px;
position: relative;
display: inline-block;
padding-bottom: 8rem;
top: 60px;
}
.imageAdj {
object-fit: cover;
width: inherit;
height: inherit;
border: 1px solid rgba(0, 0, 0, 0.87);
float: left;
}
<div className="secrets-config">
<div>
<p>Blah blah blah</p>
<Image className="imageAdj ">
</div>
</div>
First of all the use of className is only valid in JavaScript files.
Same goes for Image.
what you did was mostly correct only because you used padding-bottom: 8rem; it will never fill the whole space under your .element.
if you want your child element (.element) to be able to use height: 100%; you need to specify height in your parent element (.container)
.container {
display: inline-block;
width: 895px;
height: auto;
//padding-bottom: 8rem;
position: relative;
top: 60px;
border: 1px solid rgba(0, 0, 0, 0.87);
}
.element {
display: block;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.87);
}
<div class="container">
<div class="element">
<img src="link/to/file.png">
<p>context text</p>
</div>
</div>
Related
.card-container {
border: 1px solid #ccc;
padding: 20px;
width: 200px;
overflow: auto;
}
.card {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.card-content {
position: relative;
padding: 10px;
}
.tooltip {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
}
.card-content:hover .tooltip {
display: inline-block;
}
<div class="card-container">
<div class="card">
<div class="card-content">
<p>This is the main content of the card.</p>
<span class="tooltip">Hover over me to see the tooltip!</span>
</div>
</div>
</br>
<div class="card">
<div class="card-content">
<p>This is the main content of the card.</p>
<span class="tooltip">Hover over me to see the tooltip!</span>
</div>
</div>
</div>
I have a list of cards inside a container that has overflow hidden. I wish to present the tooltip over of the container without changing the size of the container or position of the tooltip.
This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed last year.
is there any way how can I make div bigger then its parent? I know its bad practice.
Basically I have div that is small and I need to create div inside which will be through entire window. But cant find way how to do it.
Thanks for any help.
You need to "pop" that element from normal flow with position rule with specified dimensions. E.g. position: fixed;
.outer {
width: 10vw;
height: 10vh;
position: relative;
background: rgba(130, 130, 255, .3);
border: 1px solid red;
}
.inner {
width: 90vw;
height: 90vh;
position: absolute;
left: 5px;
top: 5px;
background: rgba(130, 255, 130, .3);
border: 1px solid green;
}
<div class="outer">
<div class="inner"></div>
</div>
Alternative
Have overflow: visible with specified dimensions
.outer {
width: 10vw;
height: 10vh;
position: relative;
background: rgba(130, 130, 255, .3);
border: 1px solid red;
overflow: visible;
display: inline-block;
vertical-align: top;
}
.inner {
width: 90vw;
height: 90vh;
margin: 5px;
margin: 5px;
background: rgba(130, 255, 130, .3);
border: 1px solid green;
}
<div class="outer">
<div class="inner"></div>
</div>
You can do it easily. As long as the parent doesn't have overflow: hidden, you can even define its dimensions with pixels and see it working!
.parent {
height: 40px;
width: 40px;
background: red;
}
.child {
height: 100px;
width: 100px;
background: transparent;
border: 1px solid green;
}
<div class="parent">
<div class="child"></div>
</div>
If you want it over the entire screen, you can use vh and vw:
.child {
height: 100vh;
width: 100vw;
background: transparent;
border: 1px solid green;
}
Give a certain height & width to your parent.
Use % for the your .child element.
.parent {
height: 40px;
width: 40px;
background: gray;
}
.child {
height: 125%;
width: 125%;
background: transparent;
border: 1px solid green;
}
<div class="parent">
<div class="child"></div>
</div>
You can use absolute sizing in CSS to have a child div be larger than the parent. You will also need to add in the top and left attributes and set them to 0. This will frame the div to begin in the top left corner.
If you want a div to be the full width and height of the viewport, use the following CSS:
.parent {
position: relative;
width: 120px;
height: 120px;
border: 1px solid red;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
border: 1px solid blue;
}
<div class='parent'>
<div class='child'>
</div>
</div>
This will allow the div to resize based on the user's screen dimensions.
More on CSS sizing can be found here.
In my page I have a div (fixed wrap) that I want to move after the scroll.
I tried something with jQuery, but the height of the div is too high and goes over the footer.
img1
img2
Here's my code:
Sorry, edit2:
var elementPosition = $('#fixed-wrapper').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#fixed-wrapper').css('position', 'fixed').css('top', '0').css('margin', '20px 1%');
} else {
$('#fixed-wrapper').css('position', 'static');
}
});
#header {
width: 101%;
padding: 10px 0px 0px;
margin: -10px -10px 10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
min-width: 700px;
}
#main-bets{
display: table;
float: left;
width: 68%;
margin-left: 7%;
margin-top: 20px;
margin-bottom: 30px;
min-width: 900px;
max-width: 900px;
background-color: rgba(0, 0, 0, 0.5);
}
#fixed-wrapper {
display: table;
float: right;
width: 22%;
right: 5px;
margin: 20px 1%;
max-width: 300px;
}
#footer {
width: 101%;
padding: 10px 0px 0px;
margin: 20px -10px -10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
clear: both;
}
<div id="header">
...
</div>
<div id="main-bets
...
</div>
<div id="fixed-wrapper">
....
</div>
<div id="footer">
...
</div>
You can use my sticky float jQuery plugin for that (demo page), or use the relatively new CSS property: position:sticky (not supported in older Egde/IE)
Check now:
body {padding:0; margin: 0;}
#header {
width: 101%;
padding: 10px 0px 0px;
margin: -10px -10px 10px -10px;
background-color: rgba(0, 0, 0, 0.7);
display: table;
min-width: 700px;
}
#main-bets{
float: left;
width: 68%;
margin-left: 7%;
margin-top: 20px;
margin-bottom: 30px;
min-width: 900px;
max-width: 900px;
background-color: rgba(0, 0, 0, 0.5);
}
#fixed-wrapper {
float: left;
background: red;
width: 22%;
right: 5px;
margin: 20px 1%;
max-width: 300px;
}
#footer {
width: 101%;
padding: 10px 0px 0px;
margin: 20px -10px -10px -10px;
background-color: rgba(0, 0, 0, 0.7);
clear: both;
}
//---------------- HTML ---------- //
<div id="header">
Header
</div>
<div id="main-bets">
Bets
</div>
<div id="fixed-wrapper">
Wrapper
</div>
<div id="footer">
Footer
</div>
jsfiddle
$(document).ready(function() {
$(".button").click(function(){
$(".circle-div").animate({width: "300px"});
});
});
I am trying to may the div expand in width 300px. When I wrote it, it only expands to the right, rather than the center from the p tag. What am I doing wrong?
It worked when I was messing around at W3schools and just centered the div and changed width to height, but it won't work in my workspace?
Need to add a container for it and center align the content inside, so that when it expands it seems like it is expanding from the center.
Check if this helps -
$(document).ready(function() {
$(".button").click(function(){
$(".circle-div").animate({width: "300px"});
});
});
p {
padding: 5px;
font-size: 25px;
color: white;
background-color: yellowgreen;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
position: fixed;
bottom: 15px;
left: 50%;
right: 50%;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
p:hover {
color: #f0f;
}
.circle-div {
background-color: green;
border-radius: 50px;
display: inline-block;
height: 50px;
position: relative;
width: 50px;
}
.container {
bottom: 3.49%;
display: block;
position: absolute;
text-align: center;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="circle-div">
<p class="button">+</p>
</div>
</div>
I created an id wrapper in CSS:
#wrapper {
position: relative;
background: yellow;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
width: 960px;
padding: 40px 35px 35px 35px;
margin: 0px auto;
}
class box in CSS:
float: left;
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
HTML:
<div id="wrapper"><div class="box">
<p>ini box 1</p>
</div> </div>
The problem is the box is out from the wrapper. What is the soultion?
Remove the float:left style from box css
.box {
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
}
Add overflow: auto to wrapper to clear the float of box.
I always recommend a clearing element after floats, old IE especially behaved unpredictably without them
<div id="wrapper">
<div class="box">
<p>ini box 1</p>
</div>
<div class='clr'></div>
</div>
additional CSS
.clr {
clear:both;
height:0px;
}