jQuery auto fit element to its parent (like extjs) - javascript

I am working with kendoui, and it is a nightmare to take on element and automatically expand it to fit to its parent.
Is there any plugin for kendoui / jquery to automatically take any element (grid/panel/div) and fit to its parent?
it also need to support parent size change.
$("#kendoGrid").fitToParent();
Edit
Then doing fitToParent, the child div (#kendoGrid) will be 100% width and height of its parent.

The grid widget is a bit frustrating to size its height because it puts a height CSS style on the element, and you can only specify pixel sizes for that height.
However, you can work around it with a CSS !important indicator (which I hate, but what can you do?)
<div id="wrapper">
<div id="grid"></div>
</div>
#wrapper {
height: 200px;
}
#grid {
height: 100% !important;
}

Related

Element in container with overflow:hidden; has width same as parent, despite the overflowed width being wider

Given:
<div class=gallery>
<div class=slider>...</slider>
</div>
with gallery having main css as overflow:hidden; positon:relative; and as an example width:1000px;
The slider then has "wider" content, stretching far beyond the width of the gallery which has a set width to 1000px here.
The problem is, calculating the slider width (using jQuery('.slider').outerWidth()) gives the same width as .gallery element, when overflow:hidden is used.
The only way to get slider to show it's actual width, is to use position: absolute on .slider
Problem with that is that now, .gallery will no longer expand it's height.
I have to somehow manually calculate (and keep track of) height to set on gallery. I do not know the height in advance of the contents of .slider.
Frankly, I don't get why .slider width can not be calculated unless position:absolute is used.
There might be a way to iterate child elements of .slider and possibly calculate the width of each child, but risks are the overflown children have width set to zero as well.
Anyone know a good workaround for this?
You could set slider width to
width:100%
with that, it will never go out of its parent width
slider.scrollWidth seems to do the trick and returns the same value as:
var total = 0;
$slider$.children().each(function(i, e){
e = jqr(e);
total += e.outerWidth(true)
})
return total;

Set the scrollable height of an entire page regardless of content?

Is there a way using css and html to control the maximum scrollable height of a page, regardless of the content which is present on the page?
For a concrete, hypothetical example: say the <body> is incredibly simple - a <div> which is 5000px tall. How would you set the scrollable height to be only 2000px?
Thus it would appear that the 2000th pixel is the last pixel on the page. The browser's scroll bar would appear to be at the bottom, not just "stuck" halfway down the page. Am I missing something simple to achieve this behavior? I would prefer pure css/html because it seems like it should be doable, but I would accept js.
You can do something like this
HTML
<div class="outer">
<div class="inner">
<!--your content here-->
</div>
</div>
CSS
.outer {
height:2000px;
overflow:auto;
}
.inner {
height:5000px;
overflow:hidden;
}
You should set the body height to a specific number and set overflow to hidden.
body{
height:2000px;
overflow:hidden;
}
Made an example here
Use max-height or height css properties and overflow:hidden on your container element. It will hide everything that is greater than the height you specify, therefore limiting the scrollbar height.
I should also mention that you can use overflow-y:hidden will achieve the same thing, but will only affect top and bottom edges of an element. See more details here.

How to adjust height of a HTML element to cover all free spaces of it's parent?

Suppose we have a DIV element like this:
<div id='parent'>
<!-- The childs will come here -->
<div id='footer'>This is footer</div>
</div>
and this function that create HTML elements dynamically and inserts them into the div#parent
function addChild(name)
{
$("<div></div>").text(name).prependTo( $("div#parent") );
}
CSS:
div#parent
{
height:400px;
background-color:yellow;
}
div#footer
{
/* height: ??? */
background-color:red;
}
Now I want, the element div#footer covers whole available/remaining height of the element div#parent, How I can do this by CSS or Javascript?
Thanks
Another solution using CSS. The solution here is using display:table and display:table-row
div#parent
{
display:table;
height:400px;
width:100%;
background-color:yellow;
}
div{
display:table-row;
height:20px;
}
div#footer
{
/* height: ??? */
background-color:red;
height:auto;
}
http://jsfiddle.net/aawbE/
If you simply want the footer to always be at the bottom of the page, then I would suggest checking out http://www.cssstickyfooter.com/. They have a great concept for making sure that the footer will either be at the end of the content, or touch the bottom of the page.
Example
If you want the footer to cover the entire bottom portion of the screen (beginning where the content ends and ending at the bottom of the screen) then you do need to know the total height being used by all of the elements inside of the "container" element as well as the height of the "container" element.
An easy way to do this is to put all child elements into a different div (the height of which you can easily track.
//find the difference in height between the
//"parent" div (minimum of 100% of page height) and
//the "main" div (the total height of its child elements)
height = document.getElementById('parent').offsetHeight -
document.getElementById('main').offsetHeight;
//Set the top margin of footer to minus the height
//(make footer go up 'height' number of pixels
document.getElementById('footer').style.marginTop = -height+'px';
//Set the height of the footer to 'height'
document.getElementById('footer').style.height = height+'px';
It's important to note that these calculations are based off of the cssStickyFooter code. This makes sure that the bottom of the footer remains at the bottom of the screen (unless it passes the bottom of the screen).
Example
For this example I added a green border around the 'main' div so that you can see where it ends. I also make sure to change the footer whenever the page is re-sized in case the child elements move around (re-size the page to see this happen). I also added a min-height to the footer so there will still be a footer even if #main.height >= #parent.height.
I hope this helps.

Image scaling size dependent on browser size

Using this site as an example : http://www.reebok.com/en-GB/
The header div height adjusts dependent on the size of the browser, and the inner content has 100% height & width.
Is this controlled by javascript of can this be done solely with CSS?
You can only do this with the help of html & css. Write like this:
img{
width:100%;
height:auto;
}
check this http://jsfiddle.net/e8V47/
In your page, it's actually Javascript which is used.
The height of the container is modified inline (the style attribute)
<div class="module module-hero use-full-width displayed" data-module="Hero" style="height: 232px;">
It's however possible to do a similar thing with CSS, using % in height. For example :
.module{
height:40%; // A percentage relative to the parent element
}
the image in your example is adjusting by browser, it's in , if you only set up the width or height, the browser will adjusts another automatically.

CSS webkit overflow hidden and HTML element height

http://dev.anuary.com/1f1715ac-ad96-536a-a462-74381c7a2baf/test.html
http://dev.anuary.com/1f1715ac-ad96-536a-a462-74381c7a2baf/test2.html
test2.html is the expected behaviour. However, it does not implement test.html CSS body {overflow: hidden;}. The latter is needed to prevent WekKit from overscrolling.
Essentially, I need a page with WebKit overscrolling disabled, with an element in DOM width and height 100% (100% meaning window size) and overflow-y: scroll. The only workaround that I managed to figure out is to use JavaScript to give fixed height to the or the wrapping element. Though, preferably I am looking for a solution that doesn't involve JS.
You need to set height: 100%; on html and body otherwise they will be much larger than the visible window size.
Demo: http://jsfiddle.net/ThinkingStiff/8ejtP/
html, body {
height: 100%;
}

Categories