In the image below, my code is on the left and my output is on the right. In the div, I allowed for y-overflow only, and set x-overflow to hidden, and replaced x-overflow with elipses. As you can see, I was able to achieve this result in the output box.
However, If I click in the output box div and highlight the text say the "dddd..." part, and drag to the right, I can see all this empty space to the right of the elipses. That is, I can highlight text and drag, to see the white-space overflow in the div. Is there a way to prevent this from occuring?
The reason I can "highlight" the text within the box and "drag" it to the right to see the "x-overflow" is because I was using the browser google chrome. For some reason when I use the browser "firefox" the problem disappears.
(If anyone can suggest how to fix the problem in chrome please post an answer.)
Related
I dont know what the technical term for this is but I decided to use the term "Ghost Marks" to describe it. This is done using Chrome.
Using Bootstrap I have two tabs. There is more content in the first tab so the container is longer than the second tab. Outside (below) the tabs container there is another div with some text and a green button.
Sometimes when I click between the two tabs "Ghost Marks" of the div outside the container are left on the page. This is occurring because when I switch from the larger tab to the smaller tab the div outside the container moves up the page leaving marks as it goes along.
Here is an example of what it looks like:
It has something to do with the way chrome paints the HTML. If I press F12 the Ghost marks disappear.
I could make the 2nd tabs container the same height as the first tabs container but that would leave a lot of white space.
Any ideas how to make sure this doesn't happen?
I have a text input that thinks there is another div element floating over it. When you hover the mouse over, the cursor stays the same. Only a few small parts of the text input can be clicked on.
When you inspect element it shows that it "thinks" you were hovering over the header-resize .
See it here:
http://jsfiddle.net/HxHDK/2/ (Sorry I know a lot of resources are missing, but the problem is still there)
The text input that is bugged is the To: field. This is only happening on google chrome.
I tried adding z-index attributes but did not work.
Any thoughts?
weird behavior, but can be fixed by adding overflow: hidden; to .header rule declaration
Removing the negative top margin on .content solves this indeed weird issue.
Remove the height attribute from header and the problem is gone.
I am building a custom rich text editor. And in its current use, it inserts itself- a div- before a text area that is nested in a div.
This container div is supposed to start out with a top margin that lowers it down on the page, and then the text editor div then sits inline with that.
The problem I am having is, in IE 9, when the editor div gains focus it immediately shifts itself so that its margin-top is 0px. This therefore occurs on the page loading, but also if the user clicks anywhere in the content editable div.
The caret remains at the correct location, but the editor div plus its container have scrolled upward so the editor div has no margin.
This works correctly in IE 8 for some reason.
Without seeing the code, I'm not sure, but have you tried it in quirks mode? There has probably been a fix to make the code work more along standards that doesn't work with IE9. You can either use the built in tools in IE9 to try to identify the problem, or change the DTD and see what happens.
W3 DTD List
I have a webpage with a layer that appears which has height 500px. Inside this layer I have a normal webpage that has a hidden div. On clicking on a link in this layer this div appears, but a scrollbar in the layer appears too. I would like that the appearing of this div doesn't make the scrollbar appear, that is, this div simply appears over the page...
I hope I've been clear, it's really hard to explain.
Thanks all
EDIT:
I cannot post the code of the page because it's more than 800 lines long.
I try to explain myself a bit better:
I have this page full of text with in the middle a hidden div. Of course when the visibility = block is set for this div, it appears right where I want, but since it's in the middle the page becomes "longer" and an overflow appears, and overflow: hidden doesn't do the job :(.
Not sure exactly what you mean, but won't overflow: hidden do the job?
I'm looking for a way to mark when text overflows it's container. The code goes like in this example. Basically, it's a <span> with a set size. I want some kind of marker to show me when the text overflows.
I tried text-overflow:ellipsis;, which sounded perfect, except that it only works if the parent is the one whose size is restricted (right?).
Does anyone have any pure-CSS (JS and editing the HTML is out of the question here) ideas for how to alert me to when the text is being clipped?
Thanks!
You have to add the white-space: nowrap; style to the container along with the text-overflow:ellipsis;.
See here
Edit Here's some more info on it.