working demo with strange behavior: http://crawfordcomputing.com/AkadineWebOS/#/
If you grab the right div-window border and resize horizontally, It goes wonky vertically. Same for all the windows you can open with the icons. Everything is draggable too, and Jetris works. (check link for info)
This is an Angular single page app. My div-window is defined:
<div ng-repeat="pane in panes">
<div id="{{pane.windID}}" style="position: absolute; top: {{pane.x}}; left: {{pane.y}}; border: 2px solid black; min-height: 70; overflow: hidden">
<div style="padding:2px; overflow: auto; background-color: grey; border: 1px solid black">
<span style="float: left; text-align: left" ng-bind="pane.title"></span><span style="float: right; text-align: right" ng-click="closeWindow(pane.objID)">X</span>
</div>
<div compile="pane.content" style="background-color: white; padding: 5px; border: 1px solid black; overflow: auto;"></div>
</div>
</div>
So the window div id="{{pane.windID}}" has two children, a title bar and a content pane. So when resizing the window I tried asloResize the content pane. That was weird since it did not account for the titlebar. So I did this: (all variables are defined previously if not defined in the function)
objParent.resizable({
handles: "n, e, s, w",
minWidth: 250,
minHeight: fullHeight,
//fullHeight is parents height, don't wanna colapse one liners
//titlebar (child0) resizes just fine due to floating
//child0 size bugs alsoResize child1, let's also it manually
resize: function (event, ui){
//subtact title height from parents height
contentHeight = objParent.innerHeight() - objChild[0].innerHeight();
//width is fine
contentWidth = objParent.innerWidth();
objChild[1].css({'width':contentWidth, 'height':contentHeight});
}
});
Now see, when resizing, I aslo want to asloResize just the content pane, not the title bar. So I am trying to set the content pane's size manually, width is fine, but content pane height equals parents height minus the title bars height.
The problem is that if you resize horizontally first, the vertical goes wonky. Once you grab the bottom and resize vertically the bug goes away, you can then resize however you want perfectly without problems. It only happens if you resize horizontally first.
Why does this happen? I doubt the bug is actually in the draggable resize function because you can stop the bug by resizing vertically first, and then it works perfect. This happens on all browsers.
Does anyone have a clue?
The div with id window100-obj951 does not have a css height set initially. The contained div with compile="pane.content" does not either.
Resizing vertically changes the css height property of both these divs.
Resizing horizontally changes the width of both, but the height only of the contained div.
The containing div has overflow:hidden, so if its height is set, the height of the contained div is not significant. Hence, having the height of the containing div set masks the fact that the height of the contained div is actually being changed to be wonky.
[All this can be seen using Firebug and inspecting the element while resizing]
Related
I'm working on some jquery code using the scrollTop method to implement an infinite scroll (please, don't suggest jQuery plugins, I know they exist) and I don't quite understand what this value means.
Given this fiddle: https://jsfiddle.net/ve8s5fdx/
<div id="outter">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div id="scroll"></div>
#outter {
height: 100px;
width: 100%;
overflow-y:auto;
}
.inner {
height: 150px;
width: 50%;
border: dashed black 2px;
background-color: grey;
}
It makes sense that the value is 0 when the scrollbar is at the very top of the element, but why "208" when it's at the bottom ? The #outter div is 100px high, its content a bit more than 300px.
What #Rory McCrossan said.
If you scrolled down 100px, the .scrollTop will display 100.
The scrollTop will measure the space between the window and the element. So it doesn't matter how high your element is, it will always be the space above it that counts.
Since your .inner is missing the css-rule box-sizing: border-box; the border will be added outside the div, and it's 2px wide. Which in your case means that every .inner element is 154px high. You have 2 of those, so the content of .outer is 308px.
Your .outer-element is 100px high so 100px will always be visible. So when your window is scrolled to the very bottom, the scrollTop displays 308px - 100px = 208px.
If you change your .outer to the height of 50px, the scrollTop will display 258px when scrolled to the bottom.
$.scrollTop:
The vertical scroll position is the same as the number of pixels that
are hidden from view above the scrollable area. If the scroll bar is
at the very top, or if the element is not scrollable, this number will
be 0.
Inspecting your fiddle, you can see that your two .inners have a combined height of 308 px. Your outer (scrolling) div is 100 px tall.
So your .scrollTop(), the number of pixels that are hidden from view above the scrollable area is total inner height - visible height, or 208 px.
I am using Bootstrap 3 with a navbar at the top and a page that displays a table formatted using Bootstrap 3's table class. I would like the table (which is sitting in its own div) to be the only part of the page that is scrollable (when the width/height of the data in the table exceeds that of the page). I have styled the div for the table as follows:
.mygrid-wrapper-div {
overflow: scroll;
height: 200px;
}
I have a fiddle illustrating this, and I added an ugly 5px red border around the div to highlight the area that I would like to have scrollable:
http://jsfiddle.net/4NB2N/4/
Notice that scrolling left-to-right works great - I didn't have to do anything to get this to work, and the div adjusts the scrollbar automatically when the window is resized too. However, I don't know how to setup the div's height to behave the same way - I hardcoded the 200px value but really I would like the div to fill the "rest" of the window so that when the browser is resized it still works.
How can I make the div behave the same both horizontally and vertically?
A scrolling comes from a box with class pre-scrollable
<div class="pre-scrollable"></div>
There's more examples: http://getbootstrap.com/css/#code-block
Wish it helps.
Well one way to do it is set the height of your body to the height that you want your page to be. In this example I did 600px.
Then set your wrapper height to a percentage of the body here I did 70% This will adjust your table so that it does not fill up the whole screen but in stead just takes up a percentage of the specified page height.
body {
padding-top: 70px;
border:1px solid black;
height:600px;
}
.mygrid-wrapper-div {
border: solid red 5px;
overflow: scroll;
height: 70%;
}
http://jsfiddle.net/4NB2N/7/
Update How about a jQuery approach.
$(function() {
var window_height = $(window).height(),
content_height = window_height - 200;
$('.mygrid-wrapper-div').height(content_height);
});
$( window ).resize(function() {
var window_height = $(window).height(),
content_height = window_height - 200;
$('.mygrid-wrapper-div').height(content_height);
});
http://jsfiddle.net/4NB2N/11/
You can use too
style="overflow-y: scroll; height:150px; width: auto;"
It's works for me
I am trying to create a fixed div in the middle of a page that is scrollable, but I'm not able to get the div to scale to the page size properly. It's set to take 70% of the page (AKA, stopping around 20px from the bottom of the browser) but when you make the height of the browser less, it doesn't seem to react properly.
I can't seem to figure out why this is, suspect it's related to fixed positioning a div and then attempting to use a percentage height but I am sure there is a way around it.
To see what I mean, there is an example website here for this. Drag the window up from the bottom and eventually the div does not resize anymore. :(
The CSS for the div is:
.singlepost {
position: fixed;
height: 70%;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
}
And the structure of the HTML is:
<div class="container">
<div class="container">
[This is the fixed width box I want to size]
</div>
</div>
One idea I had was to use javascript to determine the height of the browser dynamically and set the fixed with to a specific pixel height but I doubt that's the best way to solve this.
Your page is calculating the height of the .singlepost div correctly. It is always 70% and it is adjusting when the page height gets smaller.
The problem is the .singlepost div sits after some content that is a fixed height. So when the content above the .singlepost div is greater than 30% of the page height, the .singlepost div does not exceed the bottom of the page. But when you make the page height smaller, the top content gets less than 30% of the page, and at that point the bottom of the .singlepost div will drop under the bottom of the page.
Rather than setting the height, you can set the top and bottom:
CSS
.singlepost {
position: fixed;
background-color: white;
padding-left: 10px;
padding-right: 10px;
overflow-x: hidden;
top: 270px;
bottom: 20px;
}
This assumes that your top content is 270px high.
I want to give the user the ability to resize a DIV to less than its declared width and height. How to ?
Code here: http://jsfiddle.net/hW4nn/
HTML
<div class="divClass"></div>
CSS
.divClass {
resize: both;
overflow: auto;
width: 200px;
height: 200px;
border: 1px dotted #000;
}
Have a look at jQuery UI's Resizable.
As far as I know, the browser will not let you resize any smaller than the initial size. My workaround would be to set the initial CSS to a minimal width and height (whatever you think that should be, e.g. 50px or so); then use javascript to change the CSS of the div onload so that it is properly sized.
See also HTML5 resize only on makes items larger than original size, not smaller.
First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.