As the title suggests, I'm working front-end trying to make a website where I noticed that letting content overflow in some situations is beneficial to the user experience. I'm just not sure if there's any programmatic issues with letting the content of a div live outside of its parent, and it is working out pretty well for me. The content in never overlapping, just occasionally exceeding the parent div's width.
Is there anything that could go wrong? Any accessibility issues?
It's probably a bad approach. Content should not overflow. Also, div's should be flexible in height and fixed in width, or with a percentage width.
You could set overflow-x: auto; to get a scroll bar.
Accessibility issues might occur on mobile devices.
Related
I have a div which requires scrollbar. I used style="overflow-y:auto" for my div. But if the scrollbar gets displayed, it is affecting the width of the content. Is there any way to maintain the width of the content, constant inspite the scrollbar getting displayed or not. Also I can't set the width of the div in pixel, since my application must be compatible for all screen size.
The element's content width includes the width of scrollbar.
So sorry to disappoint you, but this behavior can not be changed.
Even though you haven't shared much details on your specific case, this could probably be solved by using JavaScript/jQuery, as explained here in various forms:
How can I check if a scrollbar is visible?
I have a <header> that is position: fixed; to the top of the display.
The natural consequence of this is that <main> ends up going underneath the fairly sizeable <header>.
I've faced this problem before and have solved it with a simple margin-top assignment on <main>. Here the issue is a little different though.
The height of the <header> is variable and unknown. It has top and bottom padding of 5px and a bottom margin of 5px. It has no explicitly set height of its own; it is decided by the content within.
The largest element in the <header> is an image that is assigned its height as 20vh. There is also an <h1> and <h3>, again sized using <vh> units. I know of no way that allows me to offset <main> so it is always below this dynamically-sized, responsive <header>.
I've been browsing SO but have found no single accepted solution to solve this. Many ideas rest solely on catching window resizes with JavaScript, getting the computed height of the header and assigning the top of main to match. I fear this approach will decrease performance and also introduce annoying page jumps/leaps etc. as JS catches up with the scrolling.
How this is kind of problem usually tackled in responsive design? Ideally, I'm looking for a pure CSS solution to this problem, or some kind of workaround for `position: fixed;'. Failing that, an elegant and versatile JS solution that doesn't hinder performance. This issue is causing me problems, because none of my usual attempts to resolve absolute/fixed positioning headaches are able to help.
Any advice would be much appreciated.
-Ilmiont
I would check this post. They mention pushing the content down with a second header or using javascript.
My guess is javascript would be a cleaner approach so you don't have extra content and unnecessary requests being made to the server.
When trying to make websites responsive I quite often get horizontal scrollbar on small widths. But often it is quite not obvious which element introduces it and it might take quite some time to pin down. It is even worse when it is interaction of multiple elements... So maybe someone can give some advice, of how to reliably find which elements flow incorrectly?
You get a horizontal scroll bar when some element has width greater than its parent.
If problem is occurring in responsive design, elements which has width in px or em are probably the ones causing issue. Give them width in % and that might solve your issue.
I am creating a Web page, the problem is that when I shrink the window of the browser, the tables and the div will shrink at the size they need to fit the content, and it makes the page look terrible.
I have to declare a width of 90% for all elements, but when I declare min-with:700px; to all elements (div and tables) do not obey and keeps shrinking to fit the content.
Is there anything I am missing? is it IE7 playing arround?
I would appreciate any help to fix this issue (with no JavaScript if possible).
min-width doesn't work right in IE. Have a look at this article for some help with this issue. There are two hacks there of differing complexity.
Another discussion of this topic here.
I'm trying to create a form that has an expandable widget. The problem is that when the widget is open, The form extends outside the limit in the content box, and it looks bad.
I tried using overflow:scroll but it creates 2 ugly scrollbars that do not disappear even if the content is smaller then the content box. I only need one vertical scrollbar.
Visual Studio also alerted that overflow-y is not available in CSS.
Change your overflow to auto and define the height and/or width of the element.
overflow-x and overflow-y are part of the CSS3 proposal, and work in all of the current versions of the big four browsers.
I usually do:
overflow: auto;
overflow-x: auto;
overflow-y: auto;
The reason is that sometimes browsers treat overflow: auto as overflow: scroll (two ugly scrollbars) as soon as content overflows in one direction, but those browsers already support overflow-x and overflow-y, which get precedence.
Swilliams gave a good answer about how to treat the symptom. But, you might want to think about the root cause too - if the content box were not constrained to a fixed size, it could shrink and/or expand to fit any size form, without scroll bars. Web pages are flexible by design, and attempts to "fix" that flexibility usually end up running into problems of this sort.