Creating a draggable, resizable div container with inner scrollbars - javascript

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/

Related

Programmatic scroll on a div with parent with overflow-x hidden

It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this
It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.
Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work

Making Bootstrap modal resizable with jQuery UI issue

So I have a Bootstrap modal I've created and I am trying to make it resizable using jquery. I have the resize working horizontally but if you try to resize vertically its like the content inside of the modal is not contained within the element I am trying to resize.
I tried using the 'alsoResize' property on the .resizable() and included all the divs within the modal but that seems to cause other issues.
$('.modal-content').resizable({
alsoResize: ".modal-header, .modal-body, .modal-footer"
});
Here is my example: https://jsfiddle.net/p7o2mkg4/
You actually did everything right! But the default overflow behaviour of HTML elements is visible. So if the parent element's content gets overflowed, they break out of the modal and that doesn't look good! So, you need to set the CSS overflow property to scroll or hidden to fix breaking on small size. Try adding:
.modal-content.ui-resizable {
overflow: scroll;
}
This will ensure scrolling on overflow of the element.
Link to JSFiddle: https://jsfiddle.net/p7o2mkg4/1/
This works (css)
#myModal>div{
overflow-y: hidden;
overflow-x: hidden;
}
In case anyone stumbles across this like I have, make sure you have both jQueryUI.js and jQueryUI.css.
I thought having only jQueryUI.js was enough, but it turns out adding the stylesheet is why it wasn't working for me.

Overflow:auto hides content

I am working on the following demo which uses snap.js and chart.js on my website
DEMO JSFIDDLE
I added some JavaScript to display a content from chart.js while you scroll, but seems like it is in some trouble with the following style:
Line 10 - CSS: overflow: auto;
Which hides the content. If I delete this style it works perfectly:
DEMO2 JSFIDDLE (without overflow)
Should I create a #canvas style to let me display it in front of the other content? Without deleting the properties of snap.js?
The problem is that overflow:auto is hiding your absolute positioned element. This happens because absolutely positioned elements are essentially taken out of the DOM flow and so because the parent container has nothing to give it height, your absolute positioned element is hidden.
What you'd be better doing is not using absolute positioning, or giving the container a specific height. That or floating the element left and using a clearfix (my favorite is the :after variation).

Making a div scrollable inside a resizeable container div

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;

hide scrollbar but able to scroll with mouse

I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?
Any help would be greatly appreciated.
Thanks
I'm not 100% sure on the browser compatibility of this, but you can have two div's - an outer div and a inner div. The inner div will have all your content. Your css could then look like this:
#outer {
width: 200px;
height: 200px;
overflow:hidden;
}
#inner {
height: 200px;
width: 225px;
overflow: scroll;
}
That is, the inner block would be wide enough to contain a scrollbar, but have it hidden from sight by the containing div. This worked for me in webkit. You might have to fiddle with the widths to make sure text doesn't get cut off.
That said, I would carefully think about WHY you're trying to do this. This could be a huge usability issue for your users, as they will not have any indication that there is more content within the div.
To do this is add the following css
.div::-webkit-scrollbar {
display: none;
}
This is saying that hey remove the display of the scroll bar but keep the functionality

Categories

Resources