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?
Related
I have a rather complicated layout.
At the top and bottom are fixed header/footer.
The central display is broken up into two panels:
the left panel is hideable (may be visible, may not); if it is visible then it has a fixed width. It has a scroll within it if needed.
the right panel is always visible and has a variable width. It is scrolled by the window's scroll bar.
The right panel then consists of two parts that each fill the width of the panel - a set of tabs, of various heights (the visible tab should start at the top of the right panel, as the controlling buttons for those tabs are in the header), and directly below that a 'summary' box of unknown height, which comes immediately after the visible tab, no matter which tab we are looking at and how high it is.
Each of these panels/tabs/boxes consist of an outer div, and various internal divs as needed for the content.
The tabs are made by an outer div containing four inner divs, one after the other.
I can change the HTML and css as needed.
See https://jsfiddle.net/jvw8j62t/ (with thanks to JavaSpyder who provided the basic JSFiddle that I adapted for this demo)
I have tried various methods for the left and right panel, and the best one seems to be https://stackoverflow.com/a/4676510 but I would be happy to use a different method.
I then use jquery to hide/show the left panel (using display:none) and fix the right panel's left margin accordingly, though I am happy to use a different system for that.
However the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none. I cannot easily change this as there are three different libraries from three different sources having this issue.
This means that the different tabs' tops are then positioned incorrectly, because of the visibility css - they follow after each other, per https://stackoverflow.com/a/133064/1910690.
If I try different ways to make the top of the all the tabs fall at the top of the right panel then the summary box is positioned wrong and I can't align it to below the visible tab (changing position when you switch to a tab of a different height); or the right panel's scrolling is messed up; or the bottom of the tab disappears behind the footer; or one of several other problems.
Can anyone suggest a solution to the whole layout?
Is this the kind of thing you're looking for?
I used a flex container to create the left and right sections - the header and footer were easy enough with a fixed position. I used flex-shrink:0 on the left section so its width would be fixed, while leaving the right able to change to the screen width.
I'm not sure I did the tabs the way you specified, but feel free to correct if it isn't right. If you click on a tab, it will toggle visibility:hidden , but of course this leaves an empty gap. You said "the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none." Is this something we can also take a look at, or perhaps post in another question and link it here? If we could fix this problem, it could simplify this layout issue.
The left section is really another fixed position div with overflow:auto to give it the scrollbars. The height is handled by jquery.
Finally, clicking "Toggle Left Panel" will toggle the fixed position div and the width of the left section from 0 or 200.
With thanks to #JavaSpyder for his JSFiddle, and #Dhaval Chheda for the comment that inspired me...
I realised that I could use position:absolute on the tabs - NOT to position the visible tab correctly, but rather to REMOVE the invisible tabs from the layout of the page, leaving the visible tab and the summary ONLY in the layout of the page - and the result is as wanted.
See JavaSpyder's https://jsfiddle.net/JavaSpyder/fq43Lhez/ which also fixes an issue with the width of the right panel (my original solution is at https://jsfiddle.net/jvw8j62t/ ).
Again, thanks to JavaSpyder and Dhaval Chheda - could not have done it without you.
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.)
I'm having these troubles since almost 2 full days now and see this as my last chance to get a neat solution of my 2-page-editor before giving up.
Please use Firefox first and have a look at:
http://twopageeditor.bastianschulz.com/
STEPS:
set the caret into the last row "Exiles, similes, and reviles;"
press the "down arrow" key
RESULT: the caret is in the first row on page 2
Short explaination about the implementation:
- The editor contains two separate contenteditable DIV elements.
- In case of leaving a page by moving with the cursor within an contenteditable DIV element, we just swap the places and positions of the DIV elements but the caret stays in the same DIV element. The page 2 which is on the left side, is still the same DIV element that was on the right side when we were still on page 1.
- When changes to the text are done, the unselected DIV element is blurred out because it might be out-of-date. When the selected DIV element is deselected again, its content is fully copied into the other DIV element so that all changes that have been done are kept and therefore synchronized with the other DIV element.
Now use Chrome or Safari (IE not at all, that will be my next issue...)
STEPS:
set the caret into the last row "Exiles, similes, and reviles;"
press the "down arrow" key
RESULT: the caret is in the first row 1 on page 2
BUT: this row is not visible. Press down arrow key again and it appears in the second row of page 2. When you press the arrow up key now, the content moves again, the caret is in row 1 and page 2 is displayed as it should (and like Firefox does it correctly).
REASON: right after you pressed the down arrow key on the first page you will see for a part of a second that content in this DIV is automatically scrolled by the browser so that the position of the caret is still visible. This causes a displacement of the DIV element by 20px of its CSS top attribute. When setting thereafter the new absolute value of top:-520px e.g. (the height of the page / viewport is 520px) this weird shifting of 20px is still there.
I haven't figured out a way how to stop this automatic scrolling of the content when its not visible anymore. Or at least to be able to kind of reset the contenteditable DIV back to its normal state.
Anyone ideas?
Cheers!
I have a div section, which is full of tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href> has focus, is there any way to lock a div section that it's contents don't move ?
So for example the code (psuedo not real) I have the following
<div>
<h4>Heading</hv>
Link 1
Link 2
Link 3
</div>
I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div "window" which is not what I want, so in effect I get <div>Link 1<div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I'm not worried about this, just what is displayed
I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.
Thanks
is there any way to lock a div section that it's contents don't move?
Not really*, but you don't really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.
(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)
What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won't participate in the tabbing order.
From what I can make of your question, you want your div to stay fixed relative to the browser window. If this is the case, it can simply be done by declaring position:absolute for the div.
If you want something else, please clarify your question.
I'm experiencing some strange behavior with a project i'm working on:
http://daft.net76.net/yah/
When you click the rules link the entire layout shifts to the left by a pixel or three. I've attributed this to the amount of content in that div, because when you click the 'Scores' link, which has a smaller content height.
The lower div structure looks like the following:
<div id="lowercontent">
<div id="rulesDiv" >
<h1>Rules</h1>
<p>Clicking the roll button rolls the dice. You have 3 rolls per turn.
After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn.
Submit a combination of dice by clicking an option and clicking Score Roll.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.</p>
</div>
<div id="scoresDiv">
<h1>Scores</h1>
<p>1</p>
</div>
<p id="closeTest"><span id="close">close</span></p>
</div>
I'm using jquery functions to swap between the scores and rules.
lowercontent is a fixed width div. The inner rules and scores divs have no width.
Any ideas? Let me know if more detailed css on the divs is needed.
When the Rules div is shown, it is causing the scrollbar to appear. First, its really not a big deal.. I would just leave it alone.
If it really bothers you, add this to your CSS:
html { height: 100% }
body { height: 101% }
This will force a scrollbar to always be present so the layout won't shift.
My original answers are below but the truth is, there's only one good answer to this if you feel you need to do anything at all: modal windows.
A modal window is one that pops to the foreground and needs to be actioned before you can carry on doing what you were doing. You've used one before even if you didn't know the name. One example is an open file dialogue in an application. You have to pick a file or cancel to carry on.
On the web, you can replicate this functionality quite easily. It involves "overlay" over the content to stop the user touching it and the modal box on top of the overlay. Most web-examples shade the overlay to let the user know what has focus.
This fixes your problem because it stops the content getting longer by putting the new content over the old content and therefore the scroll-bar doesn't need to show.
Luckily for you, there are prefab solutions (see the last line of this) but I think the one that will work best for you is Facebox. It's light and sexy and does the job of just showing some information. it doesn't look like you need to get too bogged down in other actions.
Here, at least, it's because the scrollbar on the window pops up.
There are a few ways to fix this but all are pretty hacky or imperfect:
Use a left-aligned design.
On load, if the height is bigger than the computed height of the content (no scroll bar) force the content to create a scrollbar. Compare widths. Deduct half this from your left margin on your content. Yuck!
Manually centre the content using onload and onresize hooks to change the margin on the content. Probably the cleanest and you can leave it on margin:auto just in case. This won't work for IE6 but I guess that's expected.
You can put the content into tabs that the user has to switch between.
Use pop-in modal layers instead of attaching the content to the bottom of the page. I'm thinking something like LightBox but with content instead of images. I think there's probably a script out there that does this with content already.
Edit: See this for more tips on modal windows.