Im working in a scrollable aside-menu for a website containg thumbnail images. I've been trying to get the images "overflow: visible" when hovering, so the image is not cut off by the container when scaled up.
The tricky part is, that I wish to maintain the possibility to scroll vertically (and thereby disabling overflow: visible). Any suggestions / hacks how to solve this? I haven't been able to find a feasible solution yet :(
Here's a pen of the code: http://codepen.io/anon/pen/lwaGv
W3C specification:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’. :(
I tried z-index and important rule too but both failed. Is this what you need?
http://i.stack.imgur.com/9uYOC.png
EDIT
Maybe you can have a look at this. I made it using multiple divs and fixed the width of divs so that they don't crop the photo on mouse hover. You can adjust the height of the containers. The background of the containers can be set to transparent.
http://codepen.io/anon/pen/pIEih
PS: If a scrollbar is needed, the inner(scrollable) div needs to be of width so that it can accommodate the photos when their size increases (onhover). Similarly the outer div's width has to be adjusted.
codepen.io/anon/pen/fhyAa
Related
We have created Cards which can be resized and moved around by the user. In some of these Cards, we want to embed a Datagrid which is supposed to "fill" the available space (e.g. a card-block).
I am able to control the width, but haven't found a way to control the height in my scenario. Here, the Datagrid grows way outside my Card, even pushing down the card-footer.
Here is a StackBlitz example which shows the behavior.
BTW, the trick with "height: 100%" doesn't seem to work in my scenario.
Any help would be appreciated.
As mentioned in my comment, to use height: 100% you need the parent to have a defined height. Except in your case, it's all dynamic up to the card itself, so you have to propagate that height: 100% down to the datagrid. I updated your plunker with this, and it works fine now: https://stackblitz.com/edit/fit-datagrid-in-card
See https://drafts.csswg.org/css2/visudet.html#propdef-height for the height explanation:
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified. A percentage height on the root element is relative to the initial containing block.
You are correct that setting the height to a percentage does not seem to restrict it to the card-block itself, but setting to absolute pixels does.
I see in your Stackblitz that you tried to set the height to 300px, but that is still beyond the size of the hosting element. The card itself is set to 400px x 400px, but once rendered, the card-block (where the datagrid is placed) is only 398px x 281px.
Please have a look at this Stackblitz where I set the height of the datagrid to 240px.
We have a site under development. The menu bar is fixed to the left hand side of the page. When the window size is reduced to a height of approx 700px, parts of the menu are no longer visible, so we need to make this scrollable vertically.
When we add
overflow-y: scroll;
to .main-header the area is now scrollable, but the hover over sub-menu's are cut off.
Any help greatly appreciated. The development site is here: http://washingtongroup.sbcomms-dev.co.uk/
The problem seems to be arising because your container is set to overflow-y scroll and your overflow-x is hidden, which is making your hover state clip on the horizontal. To avoid this you need to set your overflox-x to visible BUT according to the W3c: https://www.w3.org/TR/css3-box/#overflow-x
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
So in effect, if you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto, which is in turn creating the clipping.
It seems to me you have to implement a different layout strategy, as your header area is position:fixed with a defined width. If I were you I would set the 'header' area back to position static and let the menu scroll with the rest of the page.
Here is a visualization to see more context to show that the current approach you have will not work without drastically changing your layout approach:
http://www.brunildo.org/test/Overflowxy2.html
Please note that I am not trying to resolve any specific issue, but trying to understand what's causing this issue.
I have set the width, height and display of some divs, but the height/width settings are not being honored. The text is also being pushed downward.
http://jsfiddle.net/k7esv/
1) Why does it push the text downward when height is set in table-row then BUT when height is removed, it places text at the top?
2) Why are the width/height settings not honored?
3) Why doesn't setting the margin property have any effect on them either?
http://jsfiddle.net/k7esv/1/
1) This seems to be a rendering issue specific to Firefox. Setting the vertical-align property on the divs fixes it. top, middle, or bottom all seem to work. I don't understand myself what FF is doing when there is a height but no vertical-align set; it might be a bug.
2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).
3) Table cells don't have margins. Use border-spacing and display:table on a parent div.
http://jsfiddle.net/chad/k7esv/3/
I will just add (seeing as it seems to have been missed) that setting the heights on individual table cells in a table row can be pointless, as all cells in the same table row will become the same height as the tallest cell in said row.
Having said that, heights may want to be added for when dynamic content is served to different cells, meaning their heights fluctuate. It may be that you want to set a particular cell to never be less than height X, which will only come in to effect when another certain cell has less content.
I have a GWT application that has a left-hand scrollable navigation panel with a directory tree. I would like to be able to keep the panel narrow with a scroll bar at the bottom (which I have) but show the entire file name on hover, overflowing over the vertical scrollbar and into the next panel. I could do it by overlaying a small div with the full name when hovering, but that seems klugey and prone to subtle visual errors. I've tried fiddling with visibility, wrap and z-index with no effect. Can I do this by just adjusting the CSS parameters of the item in question, or on some other not-so-klugey way?
IntelliJ does this in the right way, but they're not in a browser:
Thanks,
-Lars
I think you'll have to go with an overlay. If the labels are inside a div then that div will control the overflow, and there's no way to specify different overflow values for different children.
You could copy all of the styles from your label onto your new overlay div at runtime to avoid having to duplicate all your styling. I'd probably give up on having the outline box only around the overflow (around "esponse" in your example picture). That seems hard.
Unfortunately, It can't be done in HTML. according to the spec..
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
I have a panel which has top:-138px; I want to give this in %, i tried giving negative percentage but it doesn't seem to be working.
You can do this as long as its parent element has a defined height, whether in pixels or percentage. If you play around with this fiddle, you'll notice that the inner element's top attribute is only respected if you give the container an explicitly-definied height.
http://jsfiddle.net/KcWSr/