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?
Related
strong textSeems like a common problem, but in my case it's complicated by a few extra requirements, so what I found on SO and MDN didn't lead me to a full solution.
Simple premise:
Horizontal nav bar, full width of the page, semi-transparent background, variable number of tabs (extra space filled with same background as tabs).
Easy, right? Give the container element rgba background, set nav items display:inline or float them left and you're golden.
Complication 1: Active tab has to have a triangular cutout (see pic).
Ok, I can have a cutout by setting background-image to a png with transparent bit. The background of the parent element would get in the way - so set background to individual elements instead of parent.
What about the variable width "empty space" past the tabs (see pic)? Ok, put an empty element with a larger than life width, and cut it off with overflow:hidden on the parent.
Complication 2:
Buttons need tooltips on hover.
Ah, the thrill! The suspense! overflow:hidden won't do unless I put tooltips outside of nav div altogether (which would probably work - but seems smelly).
So, here are a few things I tried:
Old implementation which doesn't have the "filler" element width problem but clips off half a tooltip (with overflow:hidden):
http://codepen.io/istro/pen/aHcdi
Messing with display:table seems to give little control over how display:table-cell div width is decided, also needs content to display the div in the first place. Content can be moved away, but still no good (didn't even add a tooltip here):
http://codepen.io/istro/pen/uIcfn
Messing with floats (tooltip sorta where I'd want it to be more or less), but clueless how to make the last "filler" element fit remaining width:
http://codepen.io/istro/pen/aIGxB
So the question - how could I make a div to fill the remaining width with CSS only? Or perhaps I'm asking the wrong question altogether, in which case what ideas would I use to implement it cleanly?
Thanks!!!
I'm using a "homemade" php calendar in my site's right sidebar. The site's body is a fixed 1000px. When a day on the calendar with an event scheduled is hovered over, a div shows up that gives details on that event. Here's a visual representation:
The problem here is that the event box usually exceeds the boundaries of the body. On smaller monitors, the box extends past the right side of the screen and cannot be read. I tried having it fall to the left instead of the right, but this covers the main text area and looks odd. Is there anything I can do to make the box fall to the right, but if required (viewed on a smaller screen), be pushed to the left? Similar to a float, I guess.
Thanks.
Edit: Sorry, I forgot to mention the way I'm making the boxes show up. It's entirely CSS-driven. The containing element is positioned relatively, and the boxes are absolutely positioned. They're kept off-page (left: -9999px;) and show up upon calendar cell hover. This process seems to be snappier. Therefore, positioning the element to avoid this problem is not possible.
I don't want the box positioned to the left of the cell. I want it positioned to the right unless otherwise required due to a visitor's screen size.
For Javascript:
Check for the size of the document (to find the right most pixel)..
Check for the right most pixel of the box
Subtract box.right from document.right and move box left by that amount
For CSS:
Make the position of the box absolute and right: -10;
This is more a CSS / Javascript question.
First way: assign {position:absolute; right:0} to the popup div and {position:relative} to the containing div, so it will be floating to the left all the time.
Second way: use javascript / jQuery to calculate the right edge location of the popup div, modify the left if the div is going to poke out of the edge.
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
I have a website built with divs floated to various parts of the pages to create the look I want. My problem is, when I make my browser smaller the floats all cram to the left side instead of holding their positions and simply giving a scroll bar.
All I want is for my pages to hold their form when the browser is not maximized.
I suggest you put a min-width on the div wrapping all your floating divs.
Than all your div will be floating as normally, but when the browser will be smaller you will have a scroll bar.
Yeah the code would really help, but a solution (I think) would be to wrap all your floated divs in a div that has a defined width.
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.