I have a div that the client will be doing some actions that (with JavaScript) will change the content. Sometimes this content will get annoyingly long. Is there a "simple" way to do this? I've messed with the CSS "Overflow" property and it works alright but I'd rather only have a vertical scroll bar, no horizontal scroll bars.
This is also assuming that some of the content doesn't include spaces (which will produce the normal effect).
I need it to split it in the middle of the word if it requires doing so.
Example:
I want the overflow to acti
vate even if it is in the m
iddle of a word.
Thanks if you can. Here is a jsFiddle of what I'm kind of working with:
http://jsfiddle.net/DalexL/znzk2/
overflow-y: auto
overflow-x: none
and also
word-wrap: break-word;
there's also word-break
word-break: break-all;
current support is limited though, appears to be IE9, Chrome, Safari only, but may be worthwhile for the hyphenate option
word-break: hyphenate;
have you tried setting the width of the div? and its overflow to overflow:auto
I think that should work.
If you set html and body overflow to hidden, and your div height to 100% with overflow auto, that will not work. The div will keep flowing out of the window as it was told to use 100% height of the body. if you want overflow to work, it needs to have a max-height at some point not exceeding the body height so that nothing gets hidden. http://jsfiddle.net/robx/XvcXC/1
Edit: So i misunderstood your problem as seem like something has changed since i first saw your question. Updated here http://jsfiddle.net/robx/XvcXC/2/ to break long lines of text.
Related
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
I'm designing a fullscreen website, using javascript to set the height and the width of my sections.
I'd like to have, at the bottom of each section, a diagonal separator.
Now, here's my issue:
In order to display the diagonal divs, i need to have overflow set to auto on the container, but if it is auto, the full website scroll to the right as the diagonal div is bigger than the body.
I need the container to have an overflow:hidden, but still be able to see the diagonal dividers.
You can see what i'm talking about here:
http://codepen.io/anon/pen/emoLpd
If you uncomment out //overflow:hidden from div.website-section you will see that the diagonal is not visible anymore.
How can i have the overflow hidden and the diagonal divs displayed at the same time?
Thanks in advance for any help.
PS: sorry for the tons of code, but i'm developing using less and i pasted the full code.
Here's a working example, forked from your example: http://codepen.io/anon/pen/jERvrE
No need to set overflow:hidden on the .website-section divs. You can simply set overflow-x: hidden on the body element, which keeps horizontal scrollbars from appearing but leaves vertical scrolling unmodified.
This is the important part:
body {
overflow-y: auto;
overflow-x: hidden;
}
Don't know how to explain this. Let's see the picture
See! Some text is showing divided. I used overflow hidden property. I've cut off the whole string into 200 letters. And then positioned it inside a div. This is dynamic. Problem occurs when someone put extra or newlines in the paragraph. Then this happens. Can anyone please tell me how to stop this? These half sentences should not occur in that div as visible. Is there any system or property to stop this?
use white-space: nowrap; for your div to show the text in one line.this way, it'll hide the extra text that comes in your div of fixed width as you have hidden the overflow
check this for ref :
http://css-tricks.com/almanac/properties/w/whitespace/
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
http://www.w3schools.com/cssref/pr_text_white-space.asp
First of all you need to remove any fixed height for the divs, probably replacing it for a min-height.
Second, you should set the property overflow:none, to avoid rendering to cut the contents of the div, and instead of that expand it to the required size.
you can even try overflow: scroll. By this no matter how much content you have, u can always scroll.
I have a div which pops up into the middle of the screen and is populated with some arbitrary content. I need it to scroll if the content added doesn't fit within the space available.
The basic styling is left: 25%; width: 50%; max-height: 70%
If the screen is big enough it all works fine. In Firefox, if there's not enough space, it also works nicely, adding a vertical scrollbar to the division. But in IE, it adds an annoying and unrequired horizontal scrollbar, and I can't figure out a way to get rid of it.
You can see some screenshots of what I mean here:
http://dl.dropbox.com/u/15633144/popup.html
Sorry I can't post the actual HTML, which certainly doesn't make this any easier! But I'm hopeful this is a standard problem which people have worked around before.
The usual solution posted on here plenty of times is overflow-x / overflow-y. But in some cases the div contents do actually need to scroll horizontally, so I can't use this technique.
First IE don't support max-height CSS property.
And the horizontal scrollbar will show up if some elements inside your container have a width overflowing. You probably have some elements inside with a width:100%. As IE adds random borders/margins here and there, the width of inside elements become larger than its container.
try looking here
CSS div element - how to show horizontal scroll bars only?
I'm afraid that because you said that sometimes you need to scroll then you will need horizontal scrollbars. Which if you hid them by overflow-x: hidden; wouldn't allow you to scroll. You could work a jQuery If statement and say if window.width was more than the width of your content, show the scrollbar, if not, then hide it!
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.