Code sandbox: Code sandbox
I have a column of Icon like this:
I css it with overflow-x:auto so that It can scroll the icon outside the container.
But when It bounced out. The overflow-y: visible didn't work for me so the Icon is still inside the box.
I tried using oveflow-y but didn't work for me. I coded a code sandbox so that you guys can have a look. Thanks for all of your help! Have a nice day!
For overflow-y to work, the height of the content in the element needs to exceed the specified height.
I just removed the height of container and slightly increased the padding of AppBar to make it work. Yes, you have to little workaround to meet the height of the container actual to the design.
Another solution, for now, I can suggest is to play with z-index property of the elements.
SanBox
from mozilla : "Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto."
source : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow...
You could avoid this side effect either by controlling the scroll another way (css and javascript driven scrollbar) (this would by the way avoid the different scrollbars on some browser which can be a little ugly (ie under edge), either by setting the container bigger, and setting a nested element for the background.
Related
I have some weird CSS issue that I’m having the worst time locating. Something on the page (or in the css) is causing the page to allow for horizontal scrolling. I’ve tried pulling off individual sections of the site and it’s always there. Any ideas what it is?
here is a link to the dev http://phiaconcepts.devlocation.site
it looks like your problem is with the overflow property.
Add this property to the body tag:
overflow-y: hidden;
For more info look at https://css-tricks.com/almanac/properties/o/overflow/
This is happening because something on your page is wider than the screen width. I would go through different larger HTML elements on the page and see which one solves the issue when deleted. When located, you will want to check the width of the parent and its children, especially checking for margins and padding that might make it too large.
[box-sizing: border-box] (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) might be useful to keep the children in the parent container.
Adding overflow-x: hidden to one of the parent containers will also give a hacky fix, but that will be hiding part of the design.
I've encountered some bizarre CSS behavior. However, it works exactly the same across Firefox, Chrome and IE (9) so I suspect it is a part of the CSS standard, however, I cannot find any reference to why it might be the case.
I have a div with some text in it. When I set the font-size larger than the line height, the height of the div is calculated using the line-height, but the content is much larger. That is, the text in the box is much larger than the box itself. I have a jsfiddle with the situation here:
http://jsfiddle.net/RVgzV/4/
If you move the mouse to above the bounding box, you can see the hover css activates before you enter the div. Similarly, clicking close to, but still outside of the box activates the javascript click event. It's slightly easier to see where the content box is here:
http://jsfiddle.net/RVgzV/5/
The height is correctly calculated when the display property on the div is set to inline (which I can't do for various styling reasons). Also, the issue is solved if I set the overflow property to hidden. To me this indicates that the content is larger than its containing box, but I am not sure why. In particular I want to know why the "height" css box model property of the object is smaller than its actual height as displayed on the page.
I've had a look through the CSS spec, and I didn't see my answer there, but I suspect there may be something there I am missing.
Edit
I've found the following link which makes some reference to the problem I am having, but I have no idea what their source is, or why it might be the case.
Also, in response to some answers I have received, I am not looking for how to fix my css so the hover issue doesn't appear anymore, I am looking for why it's happening in the first place.
Edit Again
Apparently, any content of the box, no matter whether inside the box's boundaries or not invokes hover on the box. (See Mr. Lister's comment on This answer. What I'd really like to know is where in the specification this behavior comes from. Is it in there? Or is it an implementation that all browsers have agreed on?
Use overflow:hidden to hide anything outside of the div.
Its acting correctly as children can exist & be hoverable outside of the block area of an element.
This technique is used frequently to move inner pieces of block elements by using negative-margin/padding/absolute positioning etc. yet those pieces will always maintain the hover-ability of the parent.
The div is not incorrectly sized. It is the normal behavior.
You have used CSS incorrectly. The div-height is defined by the number of lines in it. You have given a bigger font-size than line-height, that means it can be only taken the max-line-height to define the number of needed lines.
By the way, what sense makes it to define the font-seize larger than the line-height?
I'm sort of new at Web Design, I'm getting there, though. But I'm still having trouble with elastic layouts and floats. I think that's where my problem with this page lies but I'm too inexperienced to understand it.
Here's my problems illustrated:
https://img.skitch.com/20120327-nwrm3t1u8cwppnwnegw8f2q7st.jpg
Here's a fiddle with my code:
http://jsfiddle.net/C3Dw2/1/
This is what it SHOULD look like:
http://img.photobucket.com/albums/v410/justice4all_quiet/register_13.jpg
I also want to have the right scrolling section fit in it's parent div. Right now, it's flowing out of it.
Ugh.
Any help would be awesome.
EDIT
The only issue remaining now is the icons not staying in their parent divs.
http://jsfiddle.net/xehMG/2/
See the fiddle for code and demo:
Fiddle: http://jsfiddle.net/C3Dw2/4
Demo: http://jsfiddle.net/C3Dw2/4/embedded/result/
see screen shot for output:
Set min-height on each of the elements that u've given height and width in percentage.Percentage will be effective only when the resolution is big enf to encompass ur children elements.
If you want to use percentages - note the min-width required for their children and set that min-width for its parent.Also use overflow:hidden|scroll|auto as a fall back to control the overflow of the children out of its parent.
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example
I am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?