I have an input field within a absolute positioned div. The div has a specific width and overflow: hidden; applied with the input field being partially outside the confines of the container.
The problem arises in when typing in, the browser Firefox (and Chrome as well) will scroll the contents of this container div to make sure the input focus is within the viewport.
.overlay {
position: absolute;
border: 1px fuchsia solid;
padding: 20px;
max-width: 200px;
overflow: hidden;
label {
display: block;
color: #000;
}
input {
width: 400px;
}
}
How can I stop it doing this? The above example is on:
https://codepen.io/meep3d/pen/jdLdqV
You could get this done using JavaScript by setting scrollLeft to 0 on the scrollevent:
document.getElementById('overlay').onscroll = function(){
document.getElementById('overlay').scrollLeft = 0;
};
.overlay {
position: absolute;
border: 1px fuchsia solid;
padding: 20px;
max-width: 200px;
overflow: hidden;
}
label {
display: block;
color: #000;
}
input {
width: 400px;
}
Outside
<div class="overlay" id="overlay">
<label>Test Area</label>
<input type="text" />
</div>
Related
I have a div that needs to have relative positioning and limited width and height. I want scrollbars added if the content overflows. For this, I have style overflow:auto. This much works. Now I have a tooltip that I want to display when mousing over a target. I want the tooltip to display in its entirety, so it should display beyond the bounds of the enclosing div if necessary. For that I have the tooltip style overflow:visible. Problem is, the tooltip does not display beyond the bounds of the div. If I remove the positioning of the div, it works as expected: the div has the scrollbar, and the tooltip extends beyond the div. How can I get this to work when the div is relatively positioned? Any assistance would be appreciated.
.tooltip {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
vertical-align: central;
cursor: help;
}
.tooltip:before {
content: '?';
}
.tooltip + .tooltiptext {
position: absolute;
display: none;
margin: 5px;
padding: 5px;
min-width: 200px;
max-width: 400px;
background-color: steelblue;
color: #fff;
text-align: left;
border-radius: 6px;
overflow: visible;
}
.tooltip:hover + .tooltiptext {
display: inline;
}
.scrollIfNeeded {
position: relative;
left: 100px;
top: 100px;
overflow: auto;
background-color: lightgoldenrodyellow;
}
<div id="ModePage" class="scrollIfNeeded" style="width:300px; max-height:100px; margin-right:5px;">
<span class="tooltip"></span>
<span class="tooltiptext">
This is my tooltip. I want it to display beyond the bounds of the ModePage div. I have the tooltip style set to overflow:visible, however it is behaving as if it inherits the setting of the ModePage div.
</span>
Scale: <input id="ScaleUpButton" type="text" /> This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
</div>
You need to add position:fixed; to fix that. try this one
.tooltip {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
vertical-align: central;
cursor: help;
}
.tooltip:before {
content: '?';
}
.tooltip + .tooltiptext {
position: absolute;
display: none;
margin: 5px;
padding: 5px;
min-width: 200px;
max-width: 400px;
background-color: steelblue;
color: #fff;
text-align: left;
border-radius: 6px;
overflow: visible;
}
.tooltip:hover + .tooltiptext {
display: inline;
/* here need to set position and width [optionally]*/
position: fixed;
max-width: 200px;
}
.scrollIfNeeded {
position: relative;
left: 100px;
top: 100px;
overflow: auto;
background-color: lightgoldenrodyellow;
}
<div id="ModePage" class="scrollIfNeeded" style="width:300px; max-height:100px; margin-right:5px;">
<span class="tooltip"></span>
<span class="tooltiptext">
This is my tooltip. I want it to display beyond the bounds of the ModePage div. I have the tooltip style set to overflow:visible, however it is behaving as if it inherits the setting of the ModePage div.
</span>
Scale:
<input id="ScaleUpButton" type="text" />This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
This is some extra text to make the vertical scrollbar appear. This is some extra text to make the vertical scrollbar appear.
</div>
I'm trying to add an overlay box at the bottom of a textarea. Positioning the overlay box was easy, but now I want the textarea content to never overlap the overlay box.
My first approach was adding padding-bottom so that the text never reaches the bottom of the textarea, where the overlay box is placed. However, as I type, the text will go under it. Also, scrolling up will cause the same undesired behavior.
Edit:
In response to some of the answers that partially solve my issue. I'm trying to make the textarea look as native as possible, so border color changing on focus would be necessary as well.
.container {
position: relative;
width: 110px;
}
textarea {
width: 100%;
height: 50px;
resize: none;
}
texarea.with-padding {
padding-bottom: 1em;
}
span {
position: absolute;
bottom: 5px;
width: 100%;
height: 1em;
background: rgba(255,0,0,0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
<div class="container">
<textarea class="with-padding" name="" id="">I tried with padding-bottom, but it doesn't work either.</textarea>
<span></span>
</div>
You can use a <div> container (which holds your textarea and overlay) as a fake border and remove the border of textarea. Just as shown in the snippet below:
$('textarea').on('focus', function() {
$('.textarea-holder').css('border-color', 'rgba(255, 0, 0, 0.5)');
});
$('textarea').on('blur', function() {
$('.textarea-holder').css('border-color', '#333');
});
.textarea-holder {
border: 1px solid #333;
display: inline-block;
}
.textarea-holder textarea {
display: block;
resize: none;
border: none;
}
textarea:focus {
outline: none;
}
.textarea-holder .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea-holder">
<textarea rows="6"></textarea>
<div class="overlay"></div>
</div>
Hope this helps!
You can simply add a bottom-border: 1em to the textarea to imitate the span element.
Here is a working example: http://codepen.io/anon/pen/woKyvy#anon-login
.container {
position: relative;
width: 200px;
}
textarea {
width: 100%;
height: 50px;
border-bottom: 1em solid rgba(255,0,0,0.5);
}
<div class="container">
<textarea>Try typing. The cursor will never end up under the red line.</textarea>
</div>
So I went ahead and wrote it down:
Removed the border and reset some styles of textarea
Added the fake border to the container and removed the positioning of the span and made it a block element.
See code below:
.container {
position: relative;
width: 110px;
border: 1px solid;
}
textarea {
width: 100%;
height: 50px;
resize: none;
border:none;
outline:none;
padding: 0;
}
.container span {
display:block;
width: 100%;
height: 1em;
background: rgba(255, 0, 0, 0.5);
}
<div class="container">
<textarea name="" id="">I want this to never go under the red box.</textarea>
<span></span>
</div>
I finally found a solution to this riddle thanks to Saurav Rastogi's and eyetea's answers. Both were almost perfect, but failed to make the textarea have its border highlighted on focus. I've managed to keep this behavior using outline.
I think both approaches are useful as they allow for two different border highlight on focus. One leaving the overlay outside, using a div wrapper strategy, and the one leaving it inside, using a very thick border-bottom.
/* Inner border on focus solution */
.textarea-wrapper {
border: 1px solid gray;
display: inline-block;
}
.textarea-wrapper textarea {
display: block;
border: none;
}
.textarea-wrapper textarea:focus {
outline: 1px solid green;
outline-offset: 0;
}
.textarea-wrapper .overlay {
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.5);
}
/* Outer border on focus solution */
textarea.bottom-padded {
border-bottom: 21px solid rgba(255,0,0,0.5);
outline: 1px solid gray;
outline-offset: -1px;
}
textarea.bottom-padded:focus {
outline-color: green !important;
}
<div class="textarea-wrapper">
<textarea rows="3">Inner border on focus</textarea>
<div class="overlay"></div>
</div>
<textarea rows="3" class="bottom-padded">Outer border on focus</textarea>
When I mouse over div.divClass, the tooltip text should show.
How can I achieve that?
.divClass {
width: 200px;
height: 200px;
border: 1px solid
}
<div class="divClass">
test
</div>
EDIT
Actually I want to show tooltip top of the ANCHOR element when mouse over on div. If I add title in Div means I'm getting alignment issue.
The title attribute cannot force a tooltip to appear in one fixed location, regardless of where the hover occurs. That's not normally how the tooltip works. However, here's a method that may work for you.
.divClass {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
margin: 30px;
cursor: pointer;
}
span { display: none; }
.divClass:hover > span {
display: inline-block;
position: absolute;
top: -25px;
left: 0;
border: 2px solid red;
background-color: yellow;
}
<div class="divClass">
test
<span>Tooltip text</span>
</div>
jsFiddle
References:
title attribute ~ MDN
Global attributes ~ MDN
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
What I want is I have an invisible div somewhere, and then when you hover over it it appears (maybe with a transition, not necessary.). So I've tried the following:
-- CSS code
div.appearingBox {
display: none;
width: 100px;
height: 100px;
}
div.appearingBox:hover {
display: block;
width: 100px;
height: 100px;
background-color: rgb(0,0,0);
border: 1px solid rgb(0,0,255);
}
-- HTML code (Added)
<html>
<body>
<div class="appearingBox">
</div>
</body>
</html>
This doesn't work... Please help!
You'll need a wrapping div. Because it's not visible, it can't respond to :hover. Note that the :hover is on the wrapper instead of the element itself. That is because the wrapper is "visible" but transparent.
http://jsfiddle.net/Cs87c/1/
HTML:
<div class="appearingBox">
<div>Hidden</div>
</div>
CSS:
.appearingBox div {
visibility: hidden;
width: 100px;
height: 100px;
}
.appearingBox:hover div {
visibility: visible;
width: 100px;
height: 100px;
background-color: rgb(0,0,0);
border: 1px solid rgb(0,0,255);
}
(Edited to a cleaner version)