Making a div scrollable inside a resizeable container div - javascript

I am trying to make a div that looks like the MS Windows Command Prompt.
The div is resizeable, and has two children: a title-bar div, and a content div.
I want the content div to get scrollbars when it is larger than the window div. I want the title-bar to always be visible and not scroll, and not to be on top of the scroll bars.
http://www.webdevout.net/test?0vL interactively demonstrates my problem. Click on the content text and new rows get added. When enough rows are added for scroll bars to appear, they do not.
The content div has overflow:auto set.
Setting max-height or height on the content to 100% does not work because 100% doesn't account for the title-bar height, so the scrollbars appear after some rows have gone off the bottom. Also, the scrollbars, when they appear, obscure the draggable thumb on the outer div, stopping it being resizeable :(

Just change your resizable window to the child 'content' <div>. that way you're resizing the child <div> and the parent <div> resizes automatically to hold its contents.
Also, not sure if it was intentional but you have <div id ="Content" class="Content"> in your html and .Frame>.Contents { in your CSS (note the word content has an 's' in the CSS).
I believe this is what you're looking for:
http://www.webdevout.net/test?0wE

Add the following CSS:
.Content {
overflow: auto;
height: inherit;
}
Here you go: http://www.webdevout.net/test?0v-
Cheers ;)

I assume your HTML tree looks like:
Dialog
Title bar
Content
To make the Content scrollable, use the overflow CSS property
.content {
overflow: auto;
height: inherit;
}

Add the CSS property
overflow:auto;

Just add this to your CSS
overflow: auto;

Related

ReactJS - How to print all the content of a Scrollable elment with react-to-print

I have a <div> tag that has a list of elements, the list can be long so I gave a fixed height to the <div> tag and overflow:auto property to have a scrollable list in case of overflow.
Now I have a button at the bottom of this <div> to print the content of <div>. I am using react-to-print library as it seemed the easiest way to print the contents of my <div> along with the CSS.
The problem is that the print preview is showing only the elements present in the viewport, but I want all the elements in the <div> to print.
I can not use the overflow: visible property on my <div> as I definitely need the <div> to be a scrollable element also I can not place the button to print the list inside my <div> as users cant keep scrolling to the end of list to print it.
Here is a sandbox to play around: https://codesandbox.io/s/material-demo-forked-wifyd?file=/demo.js:337-341
link to react-to-print: https://www.npmjs.com/package/react-to-print
Any help is highly appreciated!!
Try adding #print media queries to your div and increase the height of the div while printing alone?
I noticed it was not printing the viewport, rather it was printing only the
top list of the div.
i.e The part of div that is visible only comes while printing.
Something like
#media print {
div{
height: 100%;
}
}
Add css rule with "!important" will solve the problem.
#media print {
#scrollableDiv {
width: 100%;
height: 100% !important;
overflow: visible;
}
}

PDF Type view using html and css. Page overflow problem

I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page

Creating a draggable, resizable div container with inner scrollbars

I have a container, made up of an outer div with a scrolling inner div, like so: (note this is stripped down version of what I'm actually doing)
HTML:
<div class="faq-clone">
<div class="faq-clone-content">
Some text goes here.
</div>
</div>
CSS:
.faq-clone {
overflow: auto;
}
.faq-clone-content {
overflow: auto;
width: 375px;
max-height: 400px;
}
The idea is to have .faq-clone draggable and resizable, but for resulting scrollbars to still only appear on the inner div, faq-clone-content. I'm working with an existing project, so I started just by added .draggable() in jQuery, as shown in the following fiddle:
http://jsfiddle.net/jessikwa/5LrL3/2/
Simple enough, it still functions as it should. To get the resizing I understand the CSS will need to change. I added .resizable() to .faq-clone and tweaked the CSS so that the outer container has the width/height set and overflow set to hidden, as seen in this fiddle:
http://jsfiddle.net/jessikwa/5LrL3/4/
The container resizes fine, but the inner scrollbars are lost. Changing overflow:hidden on .faq-clone doesn't seem to be the answer, but without it I gain scrollbars on the outer div, which is undesirable. Any ideas on how the CSS should be set to accomplish this?
Using jQuery to set faq-clone-content to the size of it's parent faq-clone seemed to do the trick.
$(".faq-clone-content").css('height', faqClone.height() + 'px');
See fiddle: http://jsfiddle.net/jessikwa/5LrL3/9/

Increase size of parent div as image gets bigger

My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!
Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}
Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.
Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.

overflow:hidden but let the content auto-scroll

I have a div where content is appended periodically to it via query's append(). As the content gets longer, it will eventually overflow the div. I want no scrollbars to appear when overflowed, but still have the content scroll up to show the new content below.
Is this possible? When I use overflow-x: hidden no scrollbar appears but the content is hidden.
If the size of the container is fixed, you could place the content inside an absolutely positioned wrap like so:
<div class="container">
<div class="wrap">
<p>bah</p>
</div>
</div>
and css:
.container {
y-overflow: hidden;
position: relative;
height: 200px;
width: 200px;
}
.wrap {position:absolute; bottom: 0; left:0;right:0;
}
http://jsfiddle.net/sXGd9/
append() will add to content at the end. You may want to prepend() new content, so the data get added before the old content.
As for overflow, you can set it to scroll so that scrollbars appear if necessary, or hidden so no scrollbars will appear but the content won't be visible. Otherwise you can set it to visible so it will be visible but the scrollbars won't appear.
Do you want the overflowed content to be visible? If so set the overflow: visible otherwise set overflow: hidden (because you don't want scrollbars).
Anyway with this you wan't be able to scroll the content. If you need to scroll you have to build your own scroll system, adding event handler to your container.
If you have each appended content in your "#container" div wrapped in a seperate ".append" div you can do something like:
var pos = $('#container div:last').position();
$('#container').scrollTop(pos.top);
Is this helpfull?
Other solutions can be found in earlier post:
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?

Categories

Resources