I have a div which is filled with dynamic content. The div width is set to 680px, however if the content exceeds this width, rather than wrapping, it just keep going on a single line creating a very wide div.
What should I do to enforce the 680px of the div and force the dynamic content to wrap within those restraints?
thanks
You can try to add the following in your div's css class:
.someClass {
word-wrap: break-word;
width: 680px;
}
Hope it helps!
Related
I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
I'm trying to build a layout that roughly looks like this JSFiddle. Now, the problem is:
I have this two wrappers inside my container, one is for the sidebar and the other (wrapper-inner-container) is for the page content itself, both are floated to the left and the wrapper-sidebar has a mechanism to hide and show.
The thing is, when the wrapper-sidebar is visible, the wrapper-inner-container, which has a width of 100vw, should stay floated to the left , on the same line as the wrapper-sidebar and the parent container should remain with the same width of 100vw and simply hide the horizontal overflow. But, as you can see in the JSFiddle, what happens is that since both wrappers in the same line exceed the width of the container, the wrapper-inner-container jumps to the next line, when it was supposed to stay on the same line as the wrapper-sidebar and remain with a width of 100vw. How do I achieve that?
If your purpose is for wrapper-inner-container to take up the remaining space with wrapper-sidebar visible or not. Then you can do this be leaving out the width of wrapper-inner-container and removing float: left. It will then automatically size to 100% available space because it's a block element.
https://jsfiddle.net/bdxs8x9r/4/ (updated)
Also here's an example of how you can achieve it a bit more consistently with flex-box:
The trick here is that wrapper-sidebar has a fixed width and wrapper-inner-container flexes to it's remaining space in the container.
https://jsfiddle.net/bdxs8x9r/3/
To do this, you must be creating a parent container which contains the main container, which you'll set its overflow to hidden and its width to 100vw
then set the main container width to 100vw plus the sidebar size, so this way the sidebar will have the space to push the inner-container into
<style>
.overflow {
width: 100vw;
overflow: hidden;
}
.container {
width: 115vw;
}
.wrapper-sidebar {
float: left;
width: 15vw;
}
.wrapper-inner-container {
width: 100vw;
float: left;
}
</style>
<script>
// do your animation code here
</script>
<div class="overflow">
<div class="container">
<div class="wrapper-sidebar"></div>
<div class="wrapper-inner-container"></div>
</div>
</div>
I have a contenteditable div that I want to fill 100% of its container.
The div has the following styles applied, among stylistic ones:
width: 100%;
max-width: 100%;
height: 480px;
overflow-x: auto;
overflow-y: scroll;
word-wrap: break-word;
overflow-wrap: break-word
The issue is that the text never wraps horizontally. The div continues to expand infinitely once the length of each line exceeds its original width, despite width and max-width being set.
Changing the properties to an explicit quantity, e.g. 960px, has the desired effect. The div remains at the defined size and horizontal text wraps inside it once the obvious end of the line is reached. I want the contenteditable div to consume 100% of its parent though. How do I have it fill the parent without it expanding horizontally infinitely on text entry?
Ilmiont
You could try with
text-overflow:ellipsis;
Use this property:
word-break:break-word;
I have a case in which i have to show the content horizontally with overflow-x:scroll;.
Now in this Fiddle the first block has overflow-y:scroll; which gives a scroll and user is able to scroll the content. Where as in the second block user is not able to scroll the content. I want an output this way in the Image, where user can scroll horizontally and see the content.
You need to define an inner container for your second block and give it a width.
<div class="test2"><div>dfdsfdsfds</div></div>
and
.test2 div {
width: 600px;
}
http://jsfiddle.net/qM45U/8/
The reason for this is that by default, when test reached it's width it will word wrap whereas within the y-axis it will just increase the height of the container (if allowed). You could just set white-space to nowrap but then you'd end up with the longest single line of text in the world :)
Give your second div a child div to wrap the content that has the same height but a bigger width. Then style it:
.test2 div {
width:500px;
height:100px;
}
jsFiddle example
I am making a website. All the content is stored in a wrapper DIV. The content DIV has a border style assigned to it.
I want the height of the wrapper DIV to be tall enough to fit it's content, so the border goes to the end of the page.
I thought this would happen by default, as height:auto is the default value of all elements.
Here is my page.
Thanks for any help that can be offered.
Just make wrapper div style
overflow: auto
html {
height: 100%;
}
body {
/* not height: 100%; otherwise you're
* fixing it to the height of the viewport
*/
min-height: 100%;
}
.wrapper {
/* some kind of clearfix is
* necessary because your content
* is floated
*/
overflow: hidden;
}
If I understood you correctly you want to create a full height web site?
If so, try sticky footer.
Just use a div to nest contents and "do not" give it any height. By default, it will fit it's children. If necessary, you may give a display: block.
Here is the fiddle http://jsfiddle.net/8bP9b/