I have a design consisting of a main page next to a sidebar, horizontally centered in the browser window. Since the horizontal position will depend on the client's browser window width I can't use position:fixed here for either the main page or the sidebar, I guess.
However, I do want to have a fixed vertical position for the sidebar, i.e. not scrolling with the rest of the page.
So, how can I have at the same time position:absolute for the X-position and position:fixed for the Y-position?
To clarify (some people in comments seem to think it doesn't make sense)
The vertical position in the window should not change, while the horizontal position should change when the browser window gets resized.
Related
This is the page in question: https://globalstudyuk.com/home-page-test/
You will see that on both desktop and mobile, there is some blank space on the right of the page.
I haven't found any solution in my code based on similar StackOverflow questions.
There should be no horizontal scrollbar, with everything filling the full width of the page.
Place the final .row inside the .container in the footer.
The negative margin on the .row is countered by the padding on the .container class.
Always useful to revisit the Bootstrap docs when things go awry:
https://getbootstrap.com/docs/4.0/layout/grid/
I had the same or very similar problem. Making the window more narrow everything seemed to resize correctly, except a horizontal scrollbar appeared at the bottom. When I scrolled with it, white-space appeared on the right side of the page.
Turns out the reason was that on the top of the page I had an element with width 100%. But under that I had another piece of text inside a PRE -section, with lines that were quite wide, wider than the resized window-width.
When I made the window more narrow the top element resized correctly but the PRE -element no longer fit into the horizontal space available, thus creating the horizontal scrollbar.
When I used that scrollbar the browser (of course) did not resize the content on the top of the page, because I was not resizing the window, only scrolling it horizontally.
Therefore the browser did not readjust the top element after the scroll to take 100% of the new visible width and therefore it could only show whitespace to the right of it as I scrolled.
So if you have this type of problem, check out if there are any DOM-elements below the currently visible ones, and whether they might be the cause of the horizontal scrollbar.
My particular problem was solved by making the PRE-section defined like this:
<pre style="width:100%; overflow-x: auto; "
> ...
Now when I make the page too narrow for the PRE-content to fit in horizontally, a horizontal scrollbar appears, but now only under the PRE-section. Scrolling it only scrolls (horizontally) the PRE-section, not the whole page. When I scroll vertically to the top of the page I don't see the PRE-section nor the horizontal scrollbar under it.
I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?
The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the #slider1_container and absolute position, bottom:0 (instead of top:0)
This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.
Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.
How can I make a floating panel, taller than the screen height, in an even taller page, such that the panel always remains visible, yet scrolls enough to display all parts of it?
This strikes me as similar to the more common "panel that stays in one spot", but with a bonus challenge: since my magic panel is taller than the window, anchoring the top of the panel at the top of the screen (or, indeed, anywhere on the screen) means that the lower regions of the panel can never be displayed.
There may be other ways to meet the goal, but FWIW what I envision is
When the page is scrolled to the top, the top of the panel is at the top of its display area.
When the page is scrolled down a bit, the panel stays in sync with it, scrolling down pixel-for-pixel—it behaves position:static (the default).
When things are scrolled down far enough to expose the bottom of the panel, it pins there in the ordinary "stays in one spot" style, allowing the page to scroll down further while keeping the bottom of the panel visible and immobile—it becomes position:fixed.
I guess #2 could also be proportional scrolling, if that's possible, so that when the window scrolls down, say, 30% of its full travel, the panel also scrolls down 30% of its travel.
Concretely, suppose the page height is 1000 lines, the panel height is 200 lines, and the window height is 100 lines.
At the top, line 1 of the page is at the top of the window, and line 1 of the panel is at the top of the window.
Scroll down a bit, and line 10 of each is at the top.
When scrolling reaches line 101 of the page being at the top, scrolling the panel to that position would move its bottom above the bottom of the window. So instead, it leaves its line 100 at top and stays position:fixed as you scroll further down.
You can do this with three pieces of information: the height of the window, how far the window has scrolled down, and how tall the panel is.
Simply put, have the panel be position:static to begin. As soon as the window has scrolled down such that windowScroll + windowHeight >= panelHeight, set the panel to position:fixed with its top at windowHeight - panelHeight so that the panel is moved off the screen entirely except for an amount equal to the height of the window. Edit: misread your question a little bit: don't use windowHeight - panelHeight, use the amount of the panel you want to show when the user scrolls past it.
Listen to the window's (or document's, might have to test that) onscroll event to tell you when to recalculate the panel's state. To keep IE7 and IE8 from choking (they send far too many onscroll events), either use a timeout to emulate listening to the onscroll event or deregister your listener for ~50-500ms (depending on complexity) after each calculation.
Note: getting viewport height can be a little tricky. For figuring out how far it has been scrolled, try $(window).scrollTop() or equivalent. As for the panel height, keep in mind browser differences between height, innerHeight, and outerHeight (or use a library that provides browser-independent access to this value, which I believe jQuery does).
This is my interpretation with your values of example based on scrollTop();
Review this demo and ask any question http://jsfiddle.net/4ZWQU/10/.
EDIT
I have fixed the whitespace behaviour by resizing components within the VerticalPanel, that seem to have had an effect on the panel's dimension somehow missed by the console. I don't quite understand how.
However, I am still stuck with none of my panels showing vertical scroll bars.
In a GWT project, I have the following structure:
Page
DockLayoutPanel
North (header)
Center (body)
South (footer)
/DockLayoutPanel
Body
SplitLayoutPanel$1
West
SplitLayoutPanel$2
North
Center
TabPanel
ScrollPanel
VerticalPanel
-Several widgets-
/VerticalPanel
/ScrollPanel
/TabPanel
/Center
/SplitLayoutPanel$2
/West
Center
/SplitLayoutPanel$1
My problems are with the ScrollPanel in the TabPanel, which in itself contains a VerticalPanel containing several widgets. This is true for each Tab in the TabPanel.
My problem is that, while the width's for all containers in SplitLayoutPanel$2's center have 100% width, the ScrollPanel contains a horizontal scrollbar with a considerable white area next to it's VerticalPanel, while they are in absolute metrics the same size.
Illustrating the situation
This is the TabPanel, with ScrollPanel, and VerticalPanel. Notice how the horizontal scrollbar exists, while the TabPanel, ScrollPanel and VerticalPanel have the same width. Scrolling to the right yields a white area.
The ScrollPanel and VerticalPanel all sport an absolute width of 598px. The West component of the DockLayoutPanel has a size of 600, so that matches. Also notice how bringing up the developer console has made the scrollbar disappear. In fact, the entire panel has disappeared behind it, and no vertical scrollbar pops up.
When scrolling the bar to the right, the VerticalPanel gets partially placed off screen, and the ScrollPanel shows this whitespace. Obviously, I don't want the whitespace to be there, so there won't be need for a scrollbar at all. All panels in this situation still have the same width: 598px. Resizing the SplitLayoutPanel, using the border to the right, increases these values (obviously), but the panels do still share equal width and the whitespace remains the same size, while I'd expect it to get wider too.
The second tab contains a load of text, which continues off the screen, but no scrollbars appear.
Problem conclusion
No vertical scrollbars
A horizontal scrollbar with some magically summoned whitespace
Compontents claim to have equal width
Any help is greatly appreciated.
EDIT
Have tried resizing the VerticalPanel to 90 or 80% width. The whitespace seems unaffected and it shows that 100% really covers the visible width and not more.
TabPanel (at least the one from GWT proper) resizes from the inside-out: its size varies depending on the size of the selected tab. So your ScrollPanel will never have a vertical scrollbar unless you explicitly give it a size, and your content is actually overflowing the layer of the SplitLayoutPanel you put the TabPanel in.
Layout panels, such as TabLayoutPanel, on the other hand resize from the outside-in: the SplitLayoutPanel would set the size of the TabLayoutPanel in its center region, and the TabLayoutPanel would in turn set the size of the ScrollPanel, so if the content of the ScrollPanel overflows, a vertical scrollbar appears.
First Point : Don't mix and match layout panels and non - layout panels.
Second Point : If you want proper resizing and scrollbars, always try to mention width and height in percentages.
I see that you have mentioned width to be 100%. But what about the height?
What I suggest for you is,
Change TabPanel to TabLayoutPanel
Set all the panels height throughout the heirarchy as 100%
What is the status on overflow-x and overflow-y? Whenever I give overflow a value, and inspect that element, the browsers tend to split this into overflow-x and overflow-y. However, trying to explicitly state this gives nothing.
For example, on my math class page: http:math.davehampson.net the grades tab is very wide, and I want it to scroll within the <div> There is no height declared, so it stretches down, and I get a horizontal scroll bar.
By problem is that I also get an unneeded vertical scroll bar. If I change overflow:scroll to overflow-x:scroll, then nothing happens. The table is displayed in full width, and the entire page scrolls. Which, because the body is black, does not show up.
Is there a way for me to eliminate this inactive vertical scroll bar?
Thanks, Dave
overflow:auto only adds a scroll bar when the content within it exceeds the allocated space.
So if you only need a horizontal scroll, make sure the height of the content is less than the height of the enclosing div, if that makes sense.