I am using JQuery UI to re-size a div vertically only (dragging from the bottom edge. I set the div height:200px and overflow:auto.
The JQuery looks like this:
$("#resizable").resizable({handles: 's',ghost: false,animate: false,});
$("#resizable" ).resizable({ maxHeight: 300 });
The re-size function works great while the div is empty or has content but no overflow. if however there is an overflow, the drag handle moves out of place up (from the bottom) as I move the scroll bar down. It does not stay on the bottom edge which drives me crazy because it makes it unusable.
I can not figure out how to fix this. Could some one please help out?
Thank you!
HTML:
<div id="resizable" class="divTop">
<div class="dataView">
<?php require_once(ROOT_PATH.'user/controls/data/get_data.php'); ?>
</div>
</div>
Did you try putting a the content inside another div which is(for example) 90% of the resizable div?
jQuery methods modify the HTML, they aren't magic. Look at the new HTML in Firebug and find ways to work around it.
Related
this is my code:
Link to Codepen
How do I make the website stop scrolling down where the content actually ends?
overflow-y:hidden;
in body element, it won't work because it will not give me scroll the page at all. but I need to scroll it down where my content ends.
How can I do it or prevent it in the most simple way except using js or bootstrap?
The problem happening because every new element goes lower and lower.
Thank you for help !
It happens because many elements has position:relative. Position relative saves place where element should be rendered by default.
You need change html structure and css.
Example: codepen
I am trying to use Angular UI-Grid . It works well, but it always small with a scroll bar on the y-axis (You can just visit there home page to view the two examples there, the height of the grids there are the basic grid).
In the docs I have seen that "height" can be given, but I do not want the scroll bar at all.
I want the grid to fit the entire container (page) and to scroll the grid using the browsers scroll-bars.
I have looked everywhere (and in the css) and could not find a solution,
can anyone help me with this?
The ui-grid will just take all the space in the div element it is added in.
http://plnkr.co/edit/hcG0ucnCCbIFbVDqewkr?p=preview take a look at the example and try playing with the .grid in the css.
<div id="grid1" ui-grid="gridOptions" ui-grid-exporter ui-grid-selection class="grid"></div>
I need to have a page with a responsive layout that has the following elements (see picture):
Legend:
"folds" for the menu means that it just becomes a small button, which unfolds the menu again on click);
When the left menu folds, the content and canvas div need to slide to the left side of the page. When it unfolds, they get pushed to the right again;
The bottom menu 2 is folded by default (you can only see a button). If you click it, then the small menu opens (above the other elements);
The content div is scrollable;
The elements both in content and canvas should be selectable;
Right now I have the following code:
<div id="background">
<div id="menu></div>
<div id="content"></div>
<div id="canvas"></div>
<div>
The position of background is "relative", the menu and canvas are set as "fixed".
The problem right now is that something (background div) is covering all the other elements, so I can't select the elements inside the content div and the canvas div.
I tried setting z-index correctly (lowest for the background, highest for the canvas) – didn't work.
I don't understand what the problem is.
Can somebody help me, please? Maybe you can just tell me from scratch how I should arrange those elements in CSS, so that I get the arrangement I need?
Thank you!
It seems that you have forgotten to set the position attribute for the content div? z-index only works on elements with fixed, absolute or relative position. (the default is static position, so the z-index is not working)
No idea why the other elements are covered. Maybe posting the css as well would help.
I have 3 vertically aligned div (header, content, footer)
<div id="container">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
Like this:
Just like in this example: http://jsfiddle.net/jS6pa/2/
(Example from here: http://peterned.home.xs4all.nl/examples/csslayout1.html)
As you can see in the jsfiddle example, I'm unable to complete all the requirements. The footer div doesnt collapse the content when I resize the window. If I make some tweeks I can achieve this but then the overflow:scroll doestn work and the scrollbar is not displayed
Here is another way I tried to solve this ( with no succes :S ) : http://jsfiddle.net/rv4XS/31/
I dont know if one way or another is the best approach to solve this. Just check the first or the second jsfiddle to see which one is the best
How can I achieve a full height content in a scenario where the header has dynamic content and at the same time, show a scrollbar when the content is overflow?
Thanks in advance for any help.
Ok I finally achieve this, using javascript.
The idea is simple. The height of the header has to be setted, no matter what.
For this I dont know why (maybe because this div was called in ajax) but the jquery .height() method didnt worked for me, but using the clientHeight method worked for me well.
var header = document.getElementById('headerDiv');
if(header)
{
$('contentDiv').css('top', header.clientHeight);
}
I have a scrollable area that contains popup menus. Conceptually, something like this:
<div style="overflow:auto; width:100px; height:100px">
... content here that's big enough to trigger scrollbars...
<div>
Click here
<div style="position:relative">
<div id="popup"
style="display:none; position:absolute; width:150px; height:150px">
... more content. This div gets shown and hidden by jquery on click events.
</div>
</div>
</div>
</div>
The problem is that when the popup menu pops up, it is also contained within the scrolling div, and doesn't show up outside the 100x100 pixel scrollable area no matter how high I make the z-index. I realize of course that in a sense that's exactly what I asked for when I told the outer div to be overflow:auto in the first place. But for my use case it isn't what I want - I want the popup menu to be "over the top" and able to extend outside the scrollable area, while still staying in the right place, which is to say, directly underneath the "Click here" link. Even though the "Click here" link can move around as the container is scrolled.
I also realize that there are some complicated workarounds I could employ, like putting the popup entirely outside the scrollable div and using javascript to position it. And then I'd need to react to scroll events to reposition it as the content is scrolled, etc. Quite apart from needing to write lots of code to re-implement what the "position:relative/position:absolute" gave me for free, that'd also require quite a bit of refactoring of my own code, so I'd rather avoid it.
I'm wondering if there's some simple trick I can apply to my inner div to tell it to disregard its container's "overflow" property, or, failing that, a handy jquery script that will implement the complicated stuff for me behind the scenes so I just need to call it to get the effect I'm after.
I'd say that it's not possible to do that without using JS to calculate the position of the link and then display the popup with a position:fixed..
The problem is that your popup is inside a div with overflow:auto and everything inside that div will affect the scroll, so to show the popup you'll need to take it outside that div, and the only way i know to do that is by using the position:fixed... (or maybe using position:absolute on the popup, and a wrapper div with position:relative that contains the text and the popups)
so i'll propose 3 solutions:
put the popup outside the div with scroll, and when the user clicks
on the link, display the popup
calculate the exact position of the link (x,y) and display the popup using position:fixed and the coordinates
use a nice and always-easy-to-use "message box" (e.g. http://csscody.com/demo/wp-content/demo/popup/demo.htm) I know that this is not exactly what you wanted, but.. i ran out of ideas =D
I hope this helps
Displaying a popup inside a of a div with "overflow: auto", "overflow: scroll" or "overflow: hidden" will always generate this kind of issues. By rule, an element child can't be displayed beyond the parent's borders in all these cases because the overflow property makes precisely that. Using "position: fixed" to the popup will solve your issue BUT if you scroll down you'll see how the popup is displayed in the old position, previous to the scroll event. To solve this you can use JQuery, as follows:
$(".your-popup-PARENT-class").live( {
mouseenter: function(event) {
event.stopPropagation();
var position = $(this).offset();
$(this).find(".your-popup-class").css("top", (position.top + 30) );
$(this).find(".your-popup-class").css("left", position.left);
$(this).find(".your-popup-class").css("display", "inherit");
},
mouseleave: function(event) {
event.stopPropagation();
$(this).find(".your-popup-class").css("display", "none");
}
});
This code segment finds your popup parent element on the DOM tree, saves the current position and display the popup in the same position of the parent. As you can see, you can add or remove needed pixels, (bold code in previous CSS top definition).
Hopefully, this will be hepful for someone else with this kind of issue.
Kind regards!
I'm not sure what the effect you're going for is, but if you remove the popup's container, then the popup will show up outside of the scrollable div.
<div style="overflow:auto; width:100px; height:100px">
... content here that's big enough to trigger scrollbars...
<div id="popup"
style="display:none; position:absolute; width:150px; height:150px">
... more content. This div gets shown and hidden by jquery on click events.
</div>
</div>
I don't have an answer to this but if you ever found a good answer I'd love to hear about it. I have a very similar issue (I've a list of options for the user to select to modify the item in the scrolling section. It doesn't look so good if I'm near the bottom of the list.