I have a content Editable Div with a place holder.
See this fiddle.
[contenteditable=true]:empty:before {
content: attr(placeholder);
}
#myDiv {
border: 1px dashed #AAA;
width: 290px;
padding: 5px;
text-align: center;
}
<div id="myDiv" contenteditable="true" placeholder="Enter text here..."></div>
The problem is:
When we open this fiddle in Chrome and click on div we get cursor focus in div at center. see pic. below:
But when we do same thing in IE we get focus at last of place holder. see below pic.
I want to focus cursor at center in IE too.
I'm not sure exactly why this happens, but you could apply position: absolute; to your pseudoelement and a few additional rules to size the div. This works for me in IE11.
fiddle
Example:
[contenteditable=true] {
position: relative;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
position: absolute;
left: 0;
right: 0;
top: 4px;
margin: auto;
}
#myDiv {
border: 1px dashed #AAA;
width: 290px;
padding: 5px;
text-align: center;
height: 16px;
}
<div id="myDiv" contenteditable="true" placeholder="Enter text here..."></div>
Related
1- There is a tooltip that opens when hovering the cursor over the icon. But when the screen starts to shrink a little, the div starts to change position. How can I prevent this?
EDIT: It was enough to give the properties to the .installmentinfo__container class margin: auto; and transform: translateX(-250px);
2- I have another question. As you can see in the image below, the tooltip that opens does not open exactly under the icon. I don't want a space between the dropdown tooltip and the icon.
Note: The tooltip that opens should appear at the bottom left of the icon.
EDIT: I fixed problem 2.
The picture I'm talking about;
html
<div className="installmentinfo__container">
{
props.installmentList?.map((e, i) => {
return (
<div className="installmentinfo">
<div className="column">
<div className="installmentnumber" >{(i + 1).toString()}</div>
<div className="installmentdate">{e.date}</div>
<div className="installmentamount">{e.amount} {e.currency}</div>
</div>
</div>
);
})
}
</div>
css
.installmentinfo__container {
border: 1px solid #d1d1d1;
border-radius: 10px;
max-width: 300px;
box-shadow: 2px 2px 4px 4px #d1d1d1;
position: absolute;
right: 340px;
background-color: white;
&:last-of-type {
border-bottom: none;
}
.installmentinfo {
width: 280px;
height: auto;
padding: 0em 1em;
.column {
display: flex;
margin: 5px;
justify-content: space-between;
font-size: 1.3rem;
border-bottom: 1.5px solid #d1d1d1;
}
.installmentnumber {
float: left;
}
.installmentdate {
width: 50%;
color: black !important;
}
.installmentamount {
width: 50%;
color: black !important;
font-weight: 1000;
}
}
}
it's hard to understand by looking at these code examples.
My guess is because of "right: 340" value. If the "position: relative" doesn't have a parent element, the current element will always shift 340px from the right.
To prevent this, you may need to give "position: relative" to the parent element where the ".installmentinfo__container" is located. After that, you can use "right: 0".
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
I'm trying to create a div with a fluid-width textarea inside it. The width of the div should be at least 3em, at most 12em, and otherwise the exact same width as the textarea. I've got this working. See fiddle.
When the textarea fills up the div, it creates a line break rather than overflowing to the left, which is the effect I'm going for. Any ideas how to achieve this?
Edit: This code is based on A List Apart's article on Expanding Text Areas.
html
<div><pre><span></span><br></pre>
<textarea autofocus placeholder='Note'></textarea>
</div>
css
div {
border: 1px solid grey;
position: relative;
display: inline-block;
/* overflow: hidden; */
height: 1.3rem;
min-width: 3rem;
max-width: 12rem;
}
textarea {
border: 1px solid blue;
resize: none;
background: rgba(0,0,255,.5);
padding: 0;
width: 100%;
}
textarea, pre {
position: absolute;
top: 0;
right: 0;
height: 100%;
margin: 0;
/* visibility: hidden; */
}
pre {
border: 1px solid pink;
position: relative;
max-width: 100%;
}
* {
font: 1rem arial;
}
js
var textarea = document.querySelector('textarea');
var span = document.querySelector('span');
textarea.addEventListener('input', function() {
span.textContent = textarea.value;
});
In your CSS use:
white-space: nowrap;
overflow: hidden;
Edit this is deprecated:
Can you set wrap="off" as an attribute on the textarea?
edit: to say overflow: hidden; (per comment below) original: overflow: auto;
I have an icon, and when you hover over it, I would like to have a custom CSS tooltip appear to the right of the icon. Whether or not you scroll up or down the page, the tooltip will always need to appear to the right of the icon.
And no, I don't want to use any plugins. I just want a little JS/CSS to get the job done. If you use JQuery, it needs to be compatible with v1.7, and JQuery-UI: v1.8.
In addition, it needs to be compatible with IE 6 and 7.
I would prefer to leave my elements as siblings, but it looks like under certain circumstances the div that appears needs to be a child element, so it's OK if the HTML needs to be changed.
HTML:
<img src="" class="icon">ICON<img/>
<div class="demo">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
CSS:
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
}
.demo:after, .demo:before {
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Live Example: http://jsfiddle.net/49Js3/16/
Since my reputation isn't high enough to comment on the answer above, I just wanted to add an updated fiddle (based on the above answer) that positions the tooltip absolutely, but with display: inline-block so that it is not fixed to certain position from the left and will show to the right:
here is the important bit:
a.tippy:hover + div {
display: inline-block;
position: absolute;
}
http://jsfiddle.net/7gmv3wo2/
Fiddle here: http://jsfiddle.net/49Js3/29/
I don't have access to IE6, so I don't know whether it's legal. I do know you'll need an anchor to get hover behavior with CSS in IE7 and earlier.
So, I added an anchor around your image, as well as a div to contain the tooltip.
HTML
<div class="outer">
<a class="tippy" href="">
<img src="" class="icon">ICON<img/>
</a>
<div class="demo">STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>
</div>
</div>
And here is the CSS:
.tippy {
text-decoration: none;
}
.outer {
width: 350px;
}
a.tippy:hover + div {
display:block;
float: right;
}
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.demo:after, .demo:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
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).