We Keep Coding

Rendering a Kendo Menu from an Ext JS Panel

I'm combining ExtJS and Kendo UI - I realise this I'm off the reservation here ;)
I'm rendering a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel
Fiddle: http://jsfiddle.net/blackfrancis75/5e6Lgtaj/1/
The problem is that the drop-down items (on hover) get drawn only within the bounds of the Ext JS Panel. Is there a way to have the drop down items show 'in front' of everything (I tried changing some of the classes z-order)?

This is not z-index issue. It is parent overflow: hidden issue. If you have relatve container with overflow: hidden CSS property it will always work like that. Simple solution for kendo menu right now is to set all menu relative parents overflow to visible:
.x-panel,
.x-panel-body {
overflow: visible;
}
Like here:
http://jsfiddle.net/5e6Lgtaj/2/
But you must be beware that if you want to use it as scrollbars in them or actually hide overflow it will be a problem.
Other option would be append menu to body element, but you will face more problem then: like loose styling (cause it is moved from initial container with important classes), javascript functions to keep it in correct position and it will be more problems then it is worth.
This is first step how it could looks like:
http://jsfiddle.net/5e6Lgtaj/3/

jQuery UI Splitter/Resizable for unlimited amount of columns

Using jQueryUI Splitter or Resizable functions I want to create a layout that allows an unlimited amount of columns to be added and all columns need to be resizable.
So it is like this fiddle: https://jsfiddle.net/f3gLh3mw/
But in this fiddle the HTML contains out of nested sets instead of inline. Which limits the possibilities as with the above fiddle you can only have equal widths for 2,4,8,16,32 etc columns. Everything in between shows up crooked as you can see in the Fiddle.
When researching this I came on this SO question: jQuery UI and Splitter
If you look at the top answer then it shows a structure like:
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
Full fiddle: http://jsfiddle.net/8qzTJ/86/
Which is the structure I want but the Javascript is hardcoded for only 2 resizable items.
So here is the question:
How to modify the last fiddle so it works with any amount of .resizable divs.
Or does anyone know of a plugin that can do this.
Thanks everyone for helping!

So far I found this plugin: http://www.bacubacu.com/colresizable/
Which does exactly what is says and is very close to the functionality that I want. Only it is in a table layout and not a div layout.
Working fiddle: http://jsfiddle.net/2h4kLzgj/6/
It is activated by this:
$("#sample2").colResizable({
fixed:true,
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging" });

CSS: Position Element between rows of floating unordered list elements

I try to modify some CSS layout and I stuck. I have an unordered list of elements which span 100% of the width and are floated to the left:
Now each of these list elements contains a (on default hidden) container with more details to this element. These details should be visible (only one at a time) if you click on the element. And now there is my problem. These details should be displayed below the row in which the clicked element is located and all other elements should be pushed down. Like so:
Now I'm stuck. I got it working by using position:absolute on the details element and assigning a margin-bottom using JavaScript on all the elements in the same row. This works, but I would prefer a solution where the clicked element does not need to modify all the other elements, just itself.
Is this possible? Using JavaScript is possible, IE9+ should be supported.
Here is a fiddle of my current solution.
Why I don't want to do it that way?
Unfortunately this should be responsive and therefor I don't want to manipulate all elements in a row (as the rows can change anytime).
Thanks! I hope it's clear what I try to do?

CSS: jQuery: Apply margin-right to li elements except for every 4th-child (only apply to elements that are display:block)

jsFiddle (Just an example to give you the idea of problem)
I am stuck at this stupid thing and would really appreciate any help I can get. I have an un-ordered list of fixed width with multiple list items inside. These list items are dynamically populated.
Due to users actions on the page some of these elements might be set to display:none to hide from view. Currently I am applying margin-right to elements except for every 4th element using li:not(:nth-child(4n)){} selector. Now the issue is that when some of these elements are hidden by setting display: none, the nth-child selector still considers the elements that are hidden, as they are still in the markup. This causes the styling to mess up a bit.
Increasing the width of the ul will not work as shown in the fiddle. Is there any way I can achieve what I want without having to remove those list items from the list.
Regards

Though it may be better to just iterate over the elements, here's an interesting approach:
function reMargin(){
$("li").css("margin-right", 10);
$("li:visible").filter(":odd:odd").css("margin-right", 0);
}
jQuery(document).ready(function(){
jQuery('#set-display').on('click', function(){
jQuery('#set-this').addClass('display-none');
reMargin();
});
reMargin();
});
http://jsfiddle.net/PrgTQ/2/
:odd:odd actually returns every 4th element.

Why does jQuery slideToggle() function acts strangely for me in my table?

I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!

jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/

The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..