I can't manage to dynamically position an overlay over an existing resizable textarea element.
Textarea doesn't seem to allow child nodes inside of itself so I have to create it as independent element
<body>
<textarea name="description" rows="20" cols="60"></textarea>
<div class="overlay" style="width: 200px; height: 200px;">Something to show over the center of textarea</div>
</body>
I need to position the overlay element exactly to the middle, while adjusting it's position if the textarea size is adjusted.
Probably I could achieve this by adding size change handlers to the TA and recompute the overlay position each time, but this seems yet too cumbersome to me. Are there any other working, more straightforward methods?
You can pull this off with zero javascript by putting the textarea inside a parent element. In this example, I use a div. Make the parent div resizable and stretch the textarea to fill the entire parent div. Then just using relative positioning, you can position another element on top of the textarea directly in the center of the parent div.
.parent
{
resize: both;
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
textarea
{
resize: none;
width: 100%;
height: 100%;
background: #eee;
}
.parent .overlay
{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
background: rgba(255, 0, 0, 0.25);
color: white;
font-size: 20px;
box-sizing: border-box;
padding: 35px 0;
text-align: center;
}
<div class="parent">
<textarea></textarea>
<div class="overlay">Overlay</div>
</div>
Related
There are two containers. One of which is the main (essentially, the parent) container. Another is a child container that serves as a tag for categorizing the content. The tag container needs to be positioned at the top right corner of the main content container, pushed over a bit from the right and where the top border of the main container splits the tag container in half. Below, I have been able to more or less do so. But my question is how can I ensure that the top border of the main container perfectly coincides with the center of the tag container?
Including a link to the codesandbox for convenience.
<div className="main">
<div className="tag">TAG</div>
<p>MAIN CONTENT</p>
</div>
.main {
height: 150px;
width: 350px;
border: 1px solid black;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.tag {
height: 20px;
width: 100px;
border: 1px solid green;
border-radius: 8px;
position: absolute;
top: -12px;
right: 24px;
z-index: 999;
background-color: green;
}
When you have a div with position: relative explicitly, then other divs inside it will be relative to it.
By applying position: absolute to the child div you will produce that it will be at the position (0, 0) of the parent container (counting from top-left). Then, if you apply top: height/2 to your child container, you will assure that it will always be centered with the top border of your parent container. Check the snippet below.
.container {
margin-top: 40px;
}
.parent {
height: 200px;
width: 320px;
background-color: orange;
position: relative;
}
.child {
height: 40px;
width: 80px;
position: absolute;
background-color: red;
top: -20px; /* must the half of the height.*/
right: 10%;
}
<div class="container">
<div class="parent">
<div class="child"></div>
</div>
</div>
Hope it helps you.
According to this statement:
When position is set to absolute or fixed, the left property specifies the distance between the element's left edge and the left edge of its containing block. (The containing block is the ancestor to which the element is relatively positioned.)
I put a fixed element inside a relative element, and set its 'left' property to some value.This value should relative to its parent div. But it doesn't work as expected. see my codepen: https://codepen.io/iamnotstone/pen/PgdPrJ?&editable=true
The text should inside the red box.
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test {
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
left: 0px
}
<div class='test'>
<h1>Fixed positioning</h1>
</div>
According to the doc: Fixed positioning
Fixed positioning is similar to absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.
Instead of left you can use margin-left property:
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test{
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
margin-left: 0px
}
<div class='test'>
<h1>Fixed positioning</h1>
</div>
If you use position: fixed; you are defining the position of an element in the viewport. If you use position: absolute; then you are defining the position of an element in its parent's box. Also CSS prioritises code lower down, so for example in your code h1 is the most prioritised element (does not apply for classes and ID's, Classes take priority over elements and ID's take priority over classes).
You need to use position: fixed for the document's body and use position: absolute for the elements with the parent which has position: relative, so change h1's position to absolute :
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test{
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px;
transform: translate(0) /* added this, and works as expected */
}
h1 {
position: absolute; //
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
left: 0px
}
It's very strange. When I set a transform property inside its parent, everything just works as expected!
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.test{
width: 500px;
height: 132px;
background-color: red;
position: relative;
left: 200px;
transform: translate(0) /* added this, and works as expected */
}
h1 {
position: fixed;
top: 0px;
width: 500px;
margin: 0 auto;
padding: 10px;
left: 0px
}
<div class='test'>
<h1>Fixed positioning</h1>
</div>
finally , I found the answer.
There is also a statement here:
If the position property is fixed, the containing block is established
by the viewport (in the case of continuous media) or the page area (in
the case of paged media).
If the position property is absolute or
fixed, the containing block may also be formed by the edge of the
padding box of the nearest ancestor element that has the following:
A transform or perspective value other than none
A will-change value of transform or perspective
A filter value other than none or a will-change value of filter (only works on Firefox).
A contain value of paint (e.g. contain: paint;)
I have block for images carousel, for example. I know nothing about picture sizes. I want to vertically and horizontally align images to center. One special thing is that i need wrapper above image, so i can set little plates with username. So i use max-width:100% and max-height:100% for center and middle aligning like this
How to vertically align an image inside div
So i have this code
.container{
position: relative;
width: 100px;
height: 100px;
border: 1px solid;}
.frame-wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;}
.frame {
/* equals max image height */
position:relative;
display: inline-block;
border: 1px solid red;
white-space: nowrap;
max-width: 100%;
max-height: 100%;
height: 100%;
box-sizing: border-box;
vertical-align: middle;}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;}
img {
vertical-align: bottom;
max-width: 100%;
max-height: 100%;}
<div class="container">
<div class="frame-wrapper">
<span class="helper"></span>
<div class="frame">
<span class="helper"></span><img src="https://dummyimage.com/50x200/000/fff" />
</div>
</div>
</div>
Problem appears when the image have height is bigger than container. When it happens picture oversize the wrapper and for fixing it I set height:100% to wrapper and picture fits inside it. What I am asking about here is that in FF browser when I set height: 100% to wrapper image is scales, but wrapper doesn't follow it and still have original width.
So you can open this in any browser instead Firefox and look how it must work
JS Fiddle if you want
http://jsfiddle.net/crazyboris/pd3v2kp8/1/
Do you have any ideas why is this happening?
It's because your .frame-wrapper doesn't have height and width specified being an absolute positioned container. Add:
height: 100%;
width: 100%;
I have a div that is added dynamically using JS that includes an overlay and a contained element that should scroll with the page as necessary (I don't want any scrolling to happen within that div, which resizes to fit the content). The overlay is set to width=100% and height=100% to cover the entire page. However, when the contained div ends up being taller than the viewport, this causes the overlay to stop short after the height of the viewport.
That explanation kind of sucks so probably easier to see what I mean, so here's a simplified fiddle:
http://jsfiddle.net/72SU5/
Here's the CSS I'm using:
#overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
z-index: 20;
}
#overlay > div {
width: 100px;
border: 1px solid #ccc;
padding: 20px;
padding-bottom: 40px;
background: #eee;
margin: 50px auto;
}
My question is how I might have the overlay extend to 100% of the new height once the hidden content is shown. I'm fine using JS/jQuery to accomplish this.
Or, if there's a better pure-CSS approach that requires refactoring, I'm open to that as well. The only requirement is that the overlaying content scrolls with the page if the content causes it to extend beyond the viewport.
Add the following property to your #overlay CSS class:
overflow:auto;
Fiddle
You could also remove the height property from the #overlay class.
http://jsfiddle.net/72SU5/6/
#overlay {
width: 100%;
height: auto;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
z-index: 20;
}
#overlay > div {
width: 100px;
border: 1px solid #ccc;
padding: 20px;
padding-bottom: 40px;
background: #eee;
margin: 50px auto;
}
i'm under this situation... i've made an overlay div working as a popup window.
Contains a little header that has some text and a "X" button to "close" it (which is a child div). Then it has the body content as another child div.
I've set the draggable and re-sizable jquery functionality to the parent overlay popup window.
Works fine... sort of speak, because when i scroll down due to large content, the little handler resize icon moves up or down depending on how I scroll instead of being fixed at the bottom like where it was in the first place.
And another thing, the little child divs inside its parent aren't resized with the parent's size. How can i achieve that?
This is my HTML code:
<div id="sendmessage-panel-overlay">
<div id="overlay-header">
<h1 id="title" style="font-size: 12px; float: left; padding-top: 7px;"></h1>
<div id="maximize_icon">
<img src="<c:url value='/images/x-icon.gif'/>" title="Close window" onclick="closePopUp()">
</div>
</div>
<div id="body-content"></div>
</div>
And this is the CSS:
#sendmessage-panel-overlay
{
background-color: white;
border-color: gray;
border-style: solid;
border-width: 1px;
float: left;
height: 500px;
left: 21%;
padding: 0px 17px 17px;
position: fixed;
text-align: center;
top: 10%;
visibility: hidden;
width: 700px;
overflow: auto;
}
#overlay-header
{
width: 700px;
position: fixed;
height: 30px;
background-color: #fff;
}
#maximize_icon {
width: 16px;
height: 16px;
float: right;
}
#body-content {
padding-top: 50px;
padding-left: 10px;
display: inline-block;
}
Either move the element outside of the scroll-able element or use position: absolute (probably combined with a position: relative somewhere).