Chrome (and maybe other browsers) position the caret in a strange way within a contenteditable div.
Please consider the following snippet:
<div contenteditable="true" style="width: 100%; height: 200px; border: 1px solid black; overflow: auto;">
<p>
<span contenteditable="false" style="width: 75%; height: 80px; display: inline-block; border: 1px solid red;"> </span>.
</p>
</div>
Also available in this JSFiddle.
If you click on the right-side of the period next to the red span and press backspace to delete the period, the caret suddenly shifts to the extreme right of the paragraph. I would expect the caret to be positioned where the period used to be, next to the red span.
Why is it not positioned the way I expect, and is there a way to get the behavior I'm looking for?
This strange behavior is happening because of the p tag, the cause is possibly some conflict between widths, you can edit the css of the tag, instead of using display:block(default), use display:inline.
I created this fiddle: JsFiddle, with display:inline, was the closest I could get from the display:block.
I tried the align attribute but I did not succeed.
I'm fairly confident that it's the span causing it, because the moment you remove it or even display: none it, the problem goes away. I got really curious about this myself and did some searching, this person seems to have the same problem as you.
Why Is My Contenteditable Cursor Jumping to the End in Chrome?
Non-breaking spaces are just what they sound like — spaces where a line break will not occur. You should not use them to add space between words, sentences, or elements. Especially not elements.
Remove & nbsp; (with space or will actually make space :D) and everything's good.
Related
I have a textarea field, which I would like to automatically adjust according to number of lines used (i.e., if the user enters one line, the field height will show that line only, but if the user enters a long text, the field will show all the lines of text).
I would like it to happen dynamically, without using scroll (overflow).
I would appreciate help with this.
thanks
There are lots of ideas given in the answers pointed to in the comments so if you absolutely have to stick with textarea perhaps some of them will solve your problem but they require Javascript and I notice you have tagged CSS not JS.
So, have you considered using a contenteditable div instead? This will automatically resize depending on content without needing Javascript:
.input {
overflow: auto;
border: 1px solid black;
}
<div class="input" contenteditable></div>
So, this is a design decision that many of you may find odd. I would like to hide the caret from appearing in a textbox on a webpage but I want the textbox to remain active.
I was surprised to find that CSS does not actually offer any functionality for custom carets, admittedly it's nothing I've ever had the need for in the past but I thought that surely I wouldn't be the first to want to do this.
The best way for me to explain what I have done is by my showing you the website. www.hududandescape.com
As you can see, I have created my own custom caret which just blinks at the end of the text box that has been styled to blend in with the background. The textbox always keeps focus so there is no risk of users not being able to type in it.
My issue is that the caret that comes with the text box is still blinking. I have fixed this in Chrome and Safari by putting a small black box over the top of the very end of the box, thus covering up the caret. This solution is not ideal however and it does not work in Firefox or IE.
Your solutions, no matter how creative, are highly welcomed :)
Andy
I'm not sure, but try something like this. Idea is simple, i think you'll understand reading the code
<style>
input#top {
width:0px;
border: none;
}
#show-input{
border:1px solid #000;
width: 100px;
height: 25px;
}
</style>
<input id='top' /> <!-- 'hidden' -->
<div id='show-input' ></div> <!-- show input -->
<script>$(function(){
$("#show-input" ).click(function(){
$("#top").focus();
});
$("#top").keyup(
function(){
$("#show-input").html($(this).val())
})
})
</script>
<div class="parent" style="width: 50px; overflow: hidden;">
<div class="child" style="white-space: nowrap;">Some string of text wider than 50 pixels</div>
</div>
Both .parent, and .child report width of 50px, but .child should be extending beyond 50 pixels. Is there a way to determine by how much a child element overflows its parent?
e.g. something like if .child were position: absolute, how wide would it be, without actually making it position: absolute?
You want to know scrollwidth. E.g., http://jsfiddle.net/y8uZe/1
document.getElementById("child").scrollWidth;
Edit: Definitely looks like some sort of bug in Firefox having to do with the white-space:nowrap.
Take a look at this fiddle:
http://jsfiddle.net/y8uZe/2
You can clearly see here how scrollHeight is giving you the right value, and scrollWidth is actually giving the right value as well because the text is wrapping. But when you tell the div NOT to wrap that text, weird things happen.
In any case. SOME of the browsers have a bug. Either it's Safari/IE/Chrome or Opera/Firefox. And since Opera ALWAYS has bugs, I'm going to bet on it being wrong. :)
Also, as I read the definition from http://www.quirksmode.org/dom/w3c_cssom.html, scrollWidth is definitely the right property to use: "The width and height of the entire content field, including those parts that are currently hidden."
One last edit: If you change the inner div to display: table. It fixes the issue. You may or may not be able to do that depending on your CSS, but at least it's good to know. Example: http://jsfiddle.net/y8uZe/3/
I have a <span> tag, .lastMessageLink, with an <a> inside it, .lastMessageText. The text that could be put in .lastMessageText could be as short as a couple characters, or as long as a paragraph, but I want to display maximum 4 lines of text.
The current styling I have, which is not working, is this:
.lastMessageLink {
line-height: 1em;
text-overflow: ellipsis;
max-height: 4em;
overflow: hidden;
}
.lastMessageText {
color: black;
word-wrap: break-word;
}
And here is the HTML:
<span class="lastMessageLink">
<a id="undefined" class="lastMessageText" title="now i need a really really long message so that i can test this whole multiple lines thing which is gonna be a problem and a trickier problem than we had initially thought. it's interesting because you'd think a couple css styles would be enough, but we might have to go by characters" href="#conversation:cid=10714&mid=10735">
now i need a really really long message so that i can test this whole multiple lines thing which is gonna be a problem and a trickier problem than we had initially thought. it's interesting because you'd think a couple css styles would be enough, but we might have to go by characters
</a>
</span>
I have looked at HTML/CSS: Specify number of lines inside <span>, Limit text length to n lines using CSS, Using CSS text-overflow to vary the number of lines of text within an element of a set height, and How to set element height for a fixed number of lines of text.
I am open to solutions that use jQuery or Javascript as I have been unable to make progress solely with CSS.
Research on the web as well as some former stack overflow questions (here also) indicate that unless white-space: nowrap is set, ellipsis does not work. That, of course, means it only works with one line of text.
Some possible JQuery plugins to compensate:
Three Dots
http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/
jQuery Text Overflow
http://www.bramstein.com/projects/text-overflow/
Auto Ellipsis
http://pvdspek.github.com/jquery.autoellipsis/
change <span> to <div> and that should do the trick I think
I have a <div> block that contains an unknown amount of text.
The css for the block is:
.synopsis { width:600px; height:32px; line-height:16px; overflow:hidden; }
In essence the block allows for two lines of text, once the text reaches the block's limits, the rest is hidden from view.
What is the cleanest method to find out what text has been hidden from view? Any jQuery/Javascript functionality that does this?
You can remove the height from the css, or if you want to do this with jQuery you can use in something like this:
$('.synopsis').css('height','auto');
If i've understood you correctly, then a simple way to find the text that's overflowed would be to add a visible background colour and comment out the overflow:hidden on your synopsis class, something along the lines of:
.synopsis {
background: #FF0000;
height: 32px;
line-height: 16px;
/*overflow: hidden;*/
width: 600px;
}
Here a JSFiddle with what I mean: http://jsfiddle.net/UeaBA/4/
I dont think there is any easy way to obtain that in any script. The only way I can think as of now is to get the height and width of each character present in that div. You have to do certain calculations on these metrics to derive which characters fall in the visible area. This would be the most complex to do.