I'm using tranform: scale(...) to shrink the size on my website to match the browser width. The problem is when this happens, there's this redundant space left at the bottom of the page that's not even part of body. How do I get rid of it ?
Also, this extra space was originally on both top and bottom ends, but I translated the page upwards so that the space is only visible at the bottom.
Related
tl;dr: If you have an element with a negative margin-top, can you make it so the scroll bar allows you to scroll into the negative part?
Hello,
I have a page with cards that need to expand both up and down (if your curious and lucky, it might be up at http://www.biologicalspeculation.com/context.cgi )
The way I accomplish the "expand up" is to have matching transitions such that the height expands at the same time as the margin-top of the containing div moves negative. This makes for a smooth animation, but it means the containing div gets a increasingly negative margin, and eventually goes off the page, and you can't scroll to it. I tried adding an intermediate div with overflow:scroll, but it had the same problem as the body overflow.
Thanks, Nick
Why not have it so that the card just expand in height to fit the content but you use jQuery to scroll the browser so the view port stays on the expanded card instead of using negative margins?
Ok I have a problem where one div's margin doesn't appear to stay relative to the previous div as the browser window re-sizes (height not width). This creates the problem where content overlaps as shown when in a wide browser. The picture bellow shows how in a narrow screen it works fine, however in the second picture you can see how the div has moved up based on the browser being made wider (27 inch imac).
If you go to: http://creativeabyss.co.uk/test/ you can see this effect for your self as you resize the window (You might need a big monitor). I cannot for the life of me figure out what is causing this, so I was wondering if any of you could help? The code should be available at the aforementioned link.
p.s I have set the background of one div to blue which illustrates that it is the size of this div which appears to be causing the issue...
Your problem is the fixed height on #OuterMenu. It is set to 300px, when you resize the browser window, the height of the content inside #OuterMenu decreases, but #OuterMenu is still 300px high, this causes some empty white-space to be displayed before the content which is rendered below it. Getting rid of the fixed height on #OuterMenu will fix this. It breaks on high resolutions because then the content inside #OuterMenu will be too high for its containing div which is only 300px high. In this case it will look like the content below this div is rendering over the top of the content inside #OuterMenu, but in fact it is the 300px height set on #OuterMenu which is limiting the space allowed for #OuterMenu to render its content within.
If you open my page at http://goo.gl/68s0t (Please don't replace the link here as I don't want google to link this page to my site.) in a non-maximized window and maximize it after it loaded, you see the gradient start over again in the lower part. In opera it is one gradient but in other browsers it repeats vertically.
How can I make it not repeat, ie make the gradient adapt to current browser height?
Sometimes, I see blue squares in the lower right and left corner, what causes them?
To answer (2), the blue squares are caused by the background being applied to both the body and the html elements. Since the body is given a small margin (from the browser, by default), it extends downwards a few pixels beyond the html. They both have the same height, the body is just offset by 8px vertically.
The margin on the left and right causes these small boxes.
To fix this, remove the background from the html, only apply it to the body, and change the margin to padding, if you want the space there.
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%
On this site: http://www.catonthecouchproductions.com/new/ - I have been trying to remove the space between the two red borders, for I can keep my latest projects box without scrolling. Right now it has a slight scroll, then if you click the blue box at the top in Latest Projects, it pulls up a Client List.
I am talking about the vertical scrolling. I set the borders for you can see what element is what and what space is occupies.
My goal is to have it push the other content up, but first to start with the scrolling.
The big gap between the main content box and the bottom box.
Any ideas on what I can do fix that?
My css is here: http://www.catonthecouchproductions.com/new/style.css
First of all your site is looking great!
As for the red border causing a horizontal scroll bar, the only way to fix that is remove the border all together. It seems as if that blue box at the bottom stretches to 100% of the page width. Unfortunately when you ad a 1 pixel border it adds two pixels to the width of that 100% div so it ends up taking more than 100% of the window. To my knowing their is no way to fix this with CSS, so you have to get rid of the border all together.