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.
Related
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
So I am trying to have a dropdown in a fixed header. floatThead works well for fixing to the top, but the dropdown can only display the elements that fit in the header of the table because of the wrapping overflow:hidden as part of floatThead. Here is a jsfiddle. I tried upping/downing the z-index to no avail. Is it possible or should I get rid of the dropdown? (It isn't all together necessary, but a nice bonus if it could work).
$(document).ready(function() {
$('.sticky-header').floatThead({zIndex: 1001});
});
You could set .floatThead-container to have overflow: visible and use !important to override the inline styling.
div.floatThead-container {
overflow: visible !important;
}
JSFiddle
I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.
You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.
You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.
Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.
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/
I currently have a table that has a width of 94%, and the following toggle set to it:
$(document).ready(function(){
$("#moreinfo").hide();
$("#toggleinfo").click(function () {
$("#moreinfo").toggle('normal');
});
});
It toggles fine, but as soon as you toggle, the width goes really small and I have no idea why. If I remove the hide() it's the right width, but again as soon as I start toggling it, the width automatically resizes.
Just tried the following CSS too:
#moreinfo { width: 94% !IMPORTANT; }
Edit: it seems to completely remove any width applied through CSS when I toggle it
Edit2: Wrapping it inside another div works! Not ideal, but not a bad solution I guess.
Any way to stop this please?
The jQuery toggle() function sets your target element ('#moreinfo' in this case) to display: block. It's just a guess without seeing your CSS or HTML, but I'm picking that the table, when having its display property changed, is being positioned or laid out incorrectly.
You may be able to work around this by wrapping your moreinfo element in another div with display: inline or position: relative? But that's just a guess. Do different browsers show the same result?