As you know, the horisontal scrolling is required it is placed on the bottom of element that is not easy to find when the bottom or element is outside of the view port. Is there any css solution (even with partial support) to change the place of vertical scrollbar?
(there is a jquery plugin for that available that create a mock element on top of overflowed element and keep its scrolling position with the scrollbar of the targeted element, it's not what I am looking for, as the created element make trouble sometimes for styling).
Related
There may be 2 ways to do tooltips or pop-ups -- one is using JavaScript, and the other is using CSS.
The CSS method has some elegance to it, but what about the case of, if the tooltip will show below a link or button, and the tooltip will not be visible inside of the window? (because the user scrolled to such position). If using JavaScript, the tooltip can actually be shown above instead of below in such case. Can CSS achieve the same effect?
Regarding CSS depending of the layout for you popup/tool-tip.
You could consider positioning your element with position: fixed;.
You element will be positioned relative to the view-port, this means it always stays in the same place even if the window is scrolled.
Regarding the stack order of an element you could use CSS z-index Property.
I'm having some trouble with the current layout of my polymer site, specifically with regards to nested components and their associated scrollbars. I'll preface this by stating that by absolutely no means am I a CSS guru. I wish I was because I probably wouldn't be struggling with this as much as I am. Also feel free to jump straight to the jsbin URL as my issue may become apparent.
The situation:
I currently have a nested core-scaffold element, whose main content often requires vertical scrolling and thus it's vertical scrollbar becomes active as required. However, as it is nested, it's container(s) can also have scrollbars enabled. Ideally, I'd like a single scrollbar on the highest level element which can scroll the scaffold's content to it's full vertical extents, yet also cause the topbar to slide away as it does now when scrolling down. I've also noticed that the height of the scaffold's main content is determined by the first page that is loaded into it. Subsequent page loads with different heights does not cause the scrollbar height extents to change accordingly.
Please note that I've simply inserted an iframe loading external content into the scaffold's content section for the purpose of this jsbin demo. My actual site loads a bunch of data driven collapsible height containers within the content pages, wrapping horizontally as needed. Due to their collapsibility, their containing page therefore has a dynamic height. That height can vary from page to page as container heights within them vary.
Here is the jsbin. Whoever can remove me from this css hell will be considered my hero...
http://jsbin.com/muniqi/1/
In my initial jsbin sample code, you'll notice I have specified core-pages height as '100vh' the top level polymer element (i.e. my-app-element). The second level polymer element (i.e. my-scaffold-page-element), loads within the aforementioned core-pages. Therefore, the nested scaffold element's maximum height is 100vh. Further down the chain, when the scaffold-element's main content area's height flows past its host's height limitation, it caused a secondary 'inner' scrollbar to appear, which has a different vertical extent than the original outer scrollbar...so trying to use the outer scrollbar alone doesn't effectively scroll the inner content to its entire vertical extent, forcing you to use the inner scrollbar as well to get the job done. Ugly to say the least.
Now that I know that is the case, one way to reduce the likelihood of an inner scrollbar appearing for the nested scaffold element's main content area is to change it's parent element's core-pages height to something much greater than 100vh (400vh?). Doing so solves the problem in a roundabout way. The outer scrollbar can now be used to scroll the entire vertical extent of the nested scaffold's contents without an inner scrollbar occurring.
In the new jsbin example (below), you can witness the 'fix', which also happens to remove the reliance on core-scaffold, instead preferring to utilize its individual components in a more configurable fashion.
http://jsbin.com/muniqi/3/
I have a main container div, where all the important content of the site is inserted, 800px wide, centered horizontally.
I need to put multiple absolute positioned divs layered below it (via z-index) and outside its width, without causing extra scrollbars to appear, and without losing the main container scrollbars (so puting overflow:hidden in a wraper won't do).
In other words, I was wondering if it's possible to create divs with different elements inside (videos, images, or text) that could be treated as backgrounds, so that the scrollbars would only appear when the window resizes below the 800px wide (width of the main container), and the rest of the divs would just bleed out (something similar to what swffit causes with an embebed flash movie).
Is there any way to do this via css or javascript?
Thanks in advance!
There is a way that requires CSS only. I once faced similar problem with this web site I created, take a look at the source. The curves by the side are done this way.
Trick is to change positioning of main container to relative with no shift - that causes change of coordinates base, here is a link. Than use absolute positioning of the "background divs" to get them outside the main box.
To solve the overflow problem use some extra div wrapper (in my site with id graphic). To specify its width use a range - min-width equal to main box and max-width as total width including the "backgound divs". And to this wrapper set the hidden overflow.
Hope it helps.
I'm trying to find out why this CSS3 transition affects the parent div:
http://jsfiddle.net/BpUqt/5/
I'm trying to move an object up inside a div without changing the height of its parent div.
But what happens is that the height of the box shrinks by 1px each time the transition begins/ends (with or without border)
While I want to use three of these in a row my content beyond begins to jump up too if the user hovers over these items very quickly.
Setting an fixed height is not an option since I'm working on an responsive layout.
Instead of animating margin (which means the box height needs to be recalculated, so rounding errors on partial pixels causes movement), use transforms.
Also, remember that IE10 has transitions, so use the ms prefix as well.
Have a look at http://jsfiddle.net/BpUqt/10/
Ok, here's a simple work-around. Simply add a negative margin and it works:
http://jsfiddle.net/BpUqt/12/
Here's how it actually looks like (minimal version):
http://jsfiddle.net/sSjQt/
I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.
Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.
Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).
Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being
obscured.
EDIT: i.e. there is no property in CSS to turn an interactive state on or off.
UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.