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>
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>
Assume I have a form input structured as follows:
<div class="wrapper">
<span class="icon icon-search"></span>
<input type="text"/>
</div>
is there a way, with CSS3, to apply a red border around the .wrapper div on a focus state on the input element?
.wrapper input:focus {
border solid thin red;
}
puts the border on the input field but I want it on the containing div.
You're looking for a css parent selector. Unfortunately that isn't currently available. The exact functionality you're looking for would need JavaScript or alternative HTML.
It looks like you want the border to surround the icon and the field but currently it is only surrounding the field? My suggestion would be to use the sibling selector like so: (From my example below i've moved the icon after the input)
* {
box-sizing: border-box; /* Helps with sizing calculations */
}
.wrapper {
position: relative;
}
.icon {
width: 20px;
height: 20px;
position: absolute;
background-color: blue;
left: 200px;
top: 0;
border: solid 1px transparent;
border-left: none;
}
input {
width: 200px;
height: 20px;
border: solid 1px blue;
border-right: none;
}
input:focus {
border-color: red;
outline: 0;
}
input:focus + .icon {
border-color: red;
}
<div class="wrapper">
<input type="text"/>
<span class="icon icon-search"></span>
</div>
I'm stuck with the following code:
<h1>
Registrer faktura
<span class="helpToggle" style="cursor:pointer;" title="Vis hjelpetekst"> Hjelp</span>
</h1>
//CSS
h1 .helpToggle {
display: inline-block;
width: 40px;
text-indent: 20px;
border: solid 1px red;
overflow: hidden;
}
h1 .helpToggle:after {
content: '?';
display: inline-block;
height: 32px;
width: 32px;
border: solid 1px green;
}
I'm not happy about having a <span> tag inside the H1 tag, but according to HTML5, this is now ok - and I'm not able to edit the HTML code (just the styling).
My goal is to replace the help text inside the span tag with a question mark. But for some reason the ? is placed inside the span.
I can't figure out why this is happening and I was hoping some one else can see what is happening.
See my fiddle here.
You could use visibility in combination with ::before pseudo-element instead of ::after.
Demo: http://jsfiddle.net/abhitalks/E98SE/9/
CSS:
h1 .helpToggle {
border: solid 1px red;
position: absolute;
visibility: hidden;
}
h1 .helpToggle::before {
content:'?';
visibility: visible;
border: solid 1px green;
}
The visibility: hidden; will leave the space occupied by the element as-is, hence we use the ::before pseudo-element to ensure that the ? is displayed before the occupied space. Making it absolutely positioned will take it out of the flow.
You want to replace the word Help with a question mark? Then :after actually is not the thing, it will place the question mark AFTER the element.
BUT you can hide the span and make the :after Element visible:
h1 .helpToggle {
visibility: hidden;
text-indent: 20px;
border: solid 1px red;
overflow: hidden;
font-size: 0px;
}
h1 .helpToggle:after {
visibility: visible;
content: '?';
border: solid 1px green;
font-size: 24pt;
}
Live demo: http://jsfiddle.net/w5B4Z/
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)