Develop Reference

Masonry leaving empty gap

I am having a problem with Masonry and struggling to understand why it's happening.
Basically, I have a 4 column grid of items.
When the 3rd item is bigger than the rest (3x bigger = 75% width of container), masonry is unable to fill that gap.
I have created a jsfiddle to demonstrate the issue:
http://jsfiddle.net/7ZVb7/2814/
congole.log('Please check jsFiddle');
Has anyone come across this before?
Thanks in advance

The divs are arranged in the same order. To fill the gap you require 4 divs before your "bigger-div" (excluding the one with class "sizer").
<div class="item">19</div><!-- Just Added this -->
http://jsfiddle.net/u7avyr2u/
EDIT: My reasoning was wrong. But the solution works...
You first div is not in the result... I don't know if this is intentional.
You don't need sizer class if the only reason for it is to pass to Masonry.
changing the class of first div from sizer to item and changing the following code will also solve the problem
// Init Masonry
$('#container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
Potential Reason: This might be a bug in their script. I tried different variation of column-width:total-width ratio. It seems to only fill the gaps on previous row, for columns that are not used-up in the current row.
This will give you a better idea:
http://jsfiddle.net/7ZVb7/2815/
So to get the layout right. You need to have X number of divs before your bigger cell, where X*columnwidth = width-of-bigger-cell

The solution I found was to use Packery!
http://jsfiddle.net/7ZVb7/2816/
$('#container').packery({
itemSelector: '.item',
columnWidth: '.sizer'
});

Document height determined incorrectly - can't see all the content

I am building a wordpress template, and I use a little Javascript to make the 'content' element fill the page from top to bottom. The goal is to cover the background image, so the 'content' doesn't look cut above the edge on larger screens. The code is:
$(document).ready(function() {
var h = Math.max($(window).height()+50, $("#content").height());
$("#content").height(h);
});
$(window).resize(function() {
var h = Math.max($(window).height()+50, $("#content").height());
$("#content").height(h);
});
My layout is: fixed sidebar on the left, then content with auto-width and two floated columns inside. It generally works, however on pages where I have a nivo-slider in one of the columns, the document height is determined incorrectly. When the screen size is small, the other column lands underneath (#media statement) and I can't scroll the screen to see that column.
See example page here: http://figtreephotodesign.com/kidsandfamilies/about/ - and set your browser window below 860px-wide to see the problem.
On another page: http://figtreephotodesign.com/kidsandfamilies/contact/ - it works (there is no nivo-slider).
Is it the nivo-slider's css messing up?

Panes inside kendoSplitter doesn't respect "box-sizing:border-box" property

I am using kendoSplitter to create a page layout with 2 panes.
Setting the first pane size as "100px" and the remaining space for 2nd pane.
Set the padding for the panes as "5px" and set the box-sizing as "border-box".
So,expected the width of pane1 including padding is "100px"
But on page load, it applied padding on top of 100px,making the width as 110px and leading to scrollbar.
$('#splitter').kendoSplitter({
panes:[
{collapsible:true,size:'100px'},
{collapsible:true,resizable:true}
]
});
jsFiddler for this case:
http://jsfiddle.net/nagakiran/xmTJF/
But if I apply the padding after initializing kendoSplitter,it works as in this fiddler.
http://jsfiddle.net/nagakiran/hPVWf/1/
Looks it's a bug in kendoUI or am I missing something?

I don't think it is a bug. Maybe an undocumented feature or a side-effect. It seems that is a question about the order on how things are executed.
Remember that you HTML is "decorated" by KendoUI widgets so what you have defined as splitter1 is not just your div but more things (the decoration).
When you style it after invoking kendoSplitter you are actually re-decorating the result of KendoUI decoration. Since kendoSplitter sets the width of your pane to a fixed width, the padding does not add extra space.
But when you use the CSS, it runs simultaneously to kendoSplitter and when it asks for the size, it gets the wrong size.
Should KendoUI be smarter? Maybe but it's actually pretty hard guessing what CSS are going to do and apply a counter action before the CSS.

Fixed it by adding a flag in kendoSplitter which modifies the way width is assigned to splitter panes. If this flag is set,it will reduce the width that's assigned to each pane by the "padding-left+padding-right" specified for that pane.
After that found a simple solution of creating wrapper div inside each splitter-pane and set "box-sizing:border-box" and "padding:10px", which worked without issues.

Kendo has issues with box-sizing: borderbox. This post may help.

scroll bar not visible in jquery tabs

First up, I know this question is probably asked several times, but everyone's layout is different!
I have a mapping application and with a left side tool bar. This tool bar has jquery tabs. I cant get a scroll bar on these tabs. even after overloading .ui-tabs-panel. I know just by adding a height:somepx here gives me scroll bars, but thats not what i want. I want the height to be always till all the way down. I have tried several things but nothing works :(
I suspect its because of my other layout properties which are there to keep the layout liquid (make map adjust to screen sizes and keep left side bar constant).
Here is the stripped down version in Jsbin:
http://jsbin.com/exeguw/edit#source
Can some one please help me get the vertical scroll bar?
Thanks!

If you set the tab div to the height of the #map div (adjusted for tab headers) after the tabs are created, then overflow will kick in and make the contents scrollable:
javascript:
function ResizeTabs() {
$("div.scroll-tab").height($("#map").height() - 80);
}
$(function() {
$(window).resize(ResizeTabs);
$('#tabs').tabs({
create: ResizeTabs
});
});
Updated jsBin.
EDIT: now handles window resizing as well!

Try this
http://jsbin.com/exeguw/9/edit#javascript,html,live

How do I stack two formpanels?

I've got two formpanels I need to stack vertically. When I put both in a panel with layout 'fit', they render on top of each other. If I use a VBox, flex:1 on both splits them by percentage, when I need one form after the other. What's the right way to do this?

Do not put any layout and they will fit themselves automatically. By default, a container has AutoContainerLayout. Add vertical scrolling only to the parent container