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).
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.
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>
I am trying to make my modal to be responsive.
I am currently using "right: 405px" in css to make my modal to stick in the right section.
However, the position of the modal keep changes as the screen size of the browser changes, which means this is not responsive.
In the attached screenshot, you can see the "Google Translator Modal" when the "info icon" is clicked.
Could anyone help me write a responsive CSS code?
Thank you.
.google-translator-modal {
position: absolute;
background: #fff;
z-index: 10000;
right: 405px;
top: 40px;
width: 230px;
height: 50px;
border-radius: 3px;
}
<div class="google-translator-modal" style="display: none">
<span class="upward-white-triangle"></span>
<div class="google-translator-modal-content">
powered by
<a class="google-logo-link" href="https://translate.google.com" target="_blank">
<img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="60px" height="20px" style="padding-top: 3px; padding-left: 3px" alt="Google Translate">
Translate
</a>
</div>
</div>
This a crude example but it ultimately comes down to positioning an absolute positioned element inside of a relative positioned element and showing it on hover.
I have placed the "modal," what I would call a tooltip, inside of the element that appears to be triggering it's appearance. By placing the tooltip inside and relative to the element that triggers it, we don't have to worry about how far from the edge of the viewport we are. The tooltip will always be position relative to the icon in my example.
.translate {
float: right;
margin: 0 1.5rem;
}
.translate-icon {
position: relative;
cursor: pointer;
font-size: 1.5rem;
}
.translate-icon:hover .translate-tooltip {
display: block;
}
.translate-tooltip {
display: none;
position: absolute;
bottom: -1.75rem;
right: -0.35rem;
width: 13rem;
text-align: center;
font-size: 1rem;
border: 1px solid gray;
}
.translate-tooltip::before,
.translate-tooltip::after {
content: '';
position: absolute;
bottom: 100%;
right: 0.25rem;
width: 0;
height: 0;
border: solid transparent;
}
.translate-tooltip::before {
border-bottom-color: gray;
border-width: 9px;
}
.translate-tooltip::after {
border-bottom-color: white;
border-width: 8px;
right: calc( 0.25rem + 1px );
}
<div class="translate">
Select Language
<span class="translate-icon">ω
<div class="translate-tooltip">
Powered by Google Translate
</div>
</span>
</div>
I have created two div's, one at the top and one at the bottom.
I have created one button. I gave a property as fixed position at left side bottom page.
If i scroll the page the button is fixed at that position only.
basically the button is in fix position for the whole page.
My Requirement:
When I scroll the page the button should be fixed for some certain height only.
When I am scrolling the page the button should be fixed at left button only till the first div bottom line touches the button bottom line.
and wen I scroll the page that button should move along with the bottom line of first div.
Basically the button should be in fixed position till the first div bottom line only.
when the first div bottom line collapse with the button bottom line, the button should be relative/absolute and moves along with it.
Hope you understood my requirement.
Below is my code for which I am looking for requirement
#top {
border: 1px solid black;
height: 900px;
width: 80%;
position: absolute;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
bottom: 0px;
font-size: 16px;
margin-left: 0px;
cursor: pointer;
padding: 10px 24px;
position: fixed;
}
#bottom {
border: 1px solid black;
height: 900px;
width: 80%;
top: 910px;
position: relative;
}
#middle {
bottom: 50px;
position: fixed;
}
<html>
<body>
<div id="top">
<div id="middle">
<button class="button">Fixed Element</button>
</div>
</div>
<br>
<br>
<div id="bottom">
</div>
</body>
</html>
I think this is not possible with only css. You need javascript or jquery.
You need jquery to run my example. You should measure the scrolled amount with the top or other element and change the bottom/top of the button accordingly like this:
Jquery
$(window).scroll(function () {
if (($(this).scrollTop()+$(window).height())>$('#top').height()){
$("#btn_fixed").css({ bottom: ($(this).scrollTop()+$(window).height()- $('#top').height())+"px" });
}else{
$("#btn_fixed").css({ bottom: '0px' });
}
});
I have changed css and html of your code.
CSS
#top {
border: 1px solid black;
height: 900px;
width: 80%;
position: absolute;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
bottom: 0px;
font-size: 16px;
margin-left: 0px;
cursor: pointer;
padding: 10px 24px;
position: fixed;
}
#bottom {
border: 1px solid black;
height: 900px;
width: 80%;
top: 910px;
position: relative;
}
HTML
<div id="top">
<div id="middle">
<button class="button" id="btn_fixed">Fixed Element</button>
</div>
</div>
<br>
<br>
<div id="bottom">
</div>
Working fiddle : https://jsfiddle.net/khairulhasanmd/h9y0bf1g/
Use position: sticky; on your #middle div
Within my website, I am making this section inside the <body> tag. Here is a snippet:
<div id="section" class="featurecontent">
<section>
<img src="image.jpg" alt="Featured article">
<p class="pnews">Featured Article - Description </p>
<hr>
</section>
</div>
This is the relevant CSS code, including the section being relative to the browser stated via position: relative; statement.
#section{
display: block;
padding:3px;
margin-right: auto;
margin-left: auto;
position: relative;
height:70%;
width: 35%;
border-width: 3px;
}
.featurecontent{
height: 1100px;
vertical-align: middle;
border-width: 2px;
line-height: 0.5;
padding: 1px;
}
How would I place the image relatively center to the section block (instead of being placed in the left), and adjust itself relative to the size of the browser similar to the section block? I am aware align="middle" does not work for HTML5.
You have a whole bunch of unnecessary code... all you need is:
#section {
position: relative;
width: 35%;
margin: 0 auto;
}
.featurecontent {
text-align: center;
}
To center the image, which I assume is the aim, simply add the code next to the comment to your current CSS.
.featurecontent{
height: 1100px;
vertical-align: middle;
border-width: 2px;
line-height: 0.5;
padding: 1px;
text-align: center; /* New line of code to center img */
}