Develop Reference

How to prevent column resize below the ctual size

I am working on extJS grid column and I can resize my grid column. But I want my column won't be resize below the actual width. It mean I can not resize the width to left side.
How can I get this.
What I am trying here is ,
columnresize : function(ct,column,width,eOpts){
var actualColumn = this.myXmlDoc.getElementsByTagName('column');
var actualSize = actualColumn.width;
if(actualSize > width){
column.resizable = false;
}
}
But in this case column is resizing and then no option for resizable.
I just want it won't resize below the actual length.
Thanks in advance.

Use minWidth:
The minimum value in pixels which this Component will set its width
to.

Configuring dgrid cells to display the full width of the data

I'm writing an application where the resulting dgrid may have a different number of columns/column-widths depending on the input. Note the following two screenshots. The first one only has a few select fields, and the cells/data render nicely horizontally. the second query has many select fields, and as you can see renders undesirably as it attempts to fit all the cells into one screen cluttering the data. Note the dgrid is also sitting within a dijit BorderContainer.
Screenshot 1 (Small SELECT fieldset, renders ok)
Screenshot 2 (Large SELECT fieldset, renders undesirably
There will be a number of issues to contend with here, but I guess my main question is:
is there a css rule (or any other way - a dgrid function/event?) I can use to specify for the cells to expand to use the full width of the data within it without cutting it off (ie no overflow)? This would then need the grid to be displayed with a horizontal scrollbar. So I'd like the data to drive the width of the grid, rather than setting the width. I tried .dgrid-cell { white-space:nowrap; } but this seemed to be ignored. It almost seems like a span needs to be added inside of the cell, which would have the above css rule?
Secondarily - the next issue will be determining in which cases I should apply the above rule, vs the cases where the data DOES fit in the screen. In those situations it may be best to just let the table use the 100% width as per the first screenshot. any input on this one?
Thanks

Here I the way I set a grid cell width based on data. This is for a datagrid obj but you probably need to make a few adjustments for dgrid obj.
There are a few steps:
1) Create a <div> tag in your html call test
<div id="test"></div>
2) Loop through the data for each column in the grid and capture the largest width of the data for that column using javascript like:
var fnt_sz = '9pt';
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = fnt_sz;
var widthPX = 45; //default px width
for (var i = 0; i < columns.length; i++) {
tst_item.innerHTML = columns[i]; //columns array represents data that will display for the column
widthPX = (tst_item.clientWidth + 1); //Give width in PX of the data pad it a bit as needed
}
Important items here include setting the appropriate font-size (fnt_sz), looping though all the column data to find the largest width in PX for the column. Use the largest widthPX for the column to set the column width in your layout object for the datagrid.
3) When creating the layout JSON data for your datagrid, set the width for each column (Max data widthPX for the column). Something like:
var build_layout = " var layout = [[{'name': 'ID', 'field': 'id', 'width': '17px'},";
for (var i = 0; i < cols.length; i++) {
build_layout += "\n{'name': '" + cols[i] + "', 'field': 'col" + (i+1) + "', 'width': '" + widths[i] + "px'},";
}
build_layout += "]];";
eval(build_layout);
/*create a new grid*/
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout, //Use layout JSON data which has width: xxpx; set for each column
rowSelector: '20px',
style: 'font-size:9pt',
rowsPerPage: 1000,
columnReordering: true,
autoWidth: true,
autoHeight: autoH});
When the grid displays, it should look good in any browser and all data should be visible because the column width PX value is greater than the largest data item for that column.. Should be easy enough to add a max px value for each column so things don't get out of hand with the width.
This is a bit of a pain in the $ss and should be a property of the dojo datagrid object but......
Here is what I end up with going through these steps:

jQuery: Adjust the height of the overall container dynamically

http://dev.clickymedia.co.uk/rdicoursefinder/course-finder/
If you view the link, you will see that there are a number of filters acting at the same time. The overall height of the box is adjusted dependant on the amount of items showing by the filter plugin.
We then have a popup box when you click on each item. This also has a varying height, and pushes the next items down. We need the height of the container to adjust, taking into account the original height of the container before the item is clicked, and the popup box's height.
I have written some jQuery to do this, however, as you will see, each time it is adding the height of the blue popup box to the overall height again and again when you click the item to show the box, instead of once one is showing, adjusting the height of the container accordingly.
The jQuery I have used for the height is below:
var originalHeight = $('#filter-results').height();
var thisHeight = 70 + $('.resultsShowing').height();
var overallHeight = originalHeight + thisHeight;
$('#filter-results').height(overallHeight);
Any help would be much appreciated!

This line
var originalHeight = $('#filter-results').height();
will need to be outside your click() event, and should be done only once on $(document).ready()

This is because you're using the new height every time you're generating more height.
You need to move the originalHeight to one specific point, the first time you need it, and leave it alone there. Then, only thisHeight needs to get updated, and the result height should bet the former (static) + the latter (dynamic).

Remove this first of all
window.setInterval(function(){
///etc
}), 1);
It's killing my machine in Chrome.

if you want to know the blue element height before you display it, you should create it in memory:
var blueBox = $('<div />').html( ... );
var height = blueBox.height();
now you can add this height to the overall container and display blue element:
blueBox.appendTo('.overall');
ps. sorry about pseudo code

Setting a dynamic margin

So I have this issue with setting a margin that dynamical decreases and increases to a minimum of 8px and maximum of 40px.
The margin is being set between 11 different blocks which are inside a container. The container can be a minimum width of 960px or a maximum of 1280px and always has a fixed height.
How can I make it so that the space (margin-left) in between the boxes always stretches to fill the container correctly?
Below is an image of what I am aiming for at 960px width
Now an an image of it at it's full width of 1280px
As you can see from the images all im trying to do is separate the boxes as the resolution is changed.
I currently have something like this using jQuery
$(window).bind('resize', function(){
var barWidth = $(".topBar").width();
$(".barModules li").css('margin-left', my dynamic value here));
});
I'm stuck on how I should be calculating this and if that's even the right way to go about it :/
An example of what I have so far: http://jsfiddle.net/m4rGp/

If...
n = number of LI elements in .barModules
then...
dynamic margin = (barWidth - n * (width of one LI)) / (n - 1)
So your code would look like:
$(window).bind('resize', function(){
var n = $(".barModules li").length;
var barWidth = $(".topBar").width();
var liWidth = $(".barModules li:first").width; // if set through CSS, read the "style" attribute instead...
var dynMargin = (barWidth - n * liWidth) / (n - 1)
$(".barModules li").css('margin-right', dynMargin + "px")); // "margin-right" instead of "margin-left"
$(".barModules li:last").css('margin-right', '0px'); // don't need margin on last element.
});
// if .length isn't returning the a value for "n", there are other ways to count the sub-elements, check the "children()" method at jquery.com

I wouldn't do that with javascript. Its a lot of work
You could make a table with cells that are set to the width you want.
http://jsfiddle.net/HZKpM/
You can even add a minwidth in various places.

I would advise using CSS. Just create an outer box around each box.
<div class="outer"><div class="inner">text</div></div>
Here is a jsfidle http://jsfiddle.net/HZKpM/3/

jquery (or js general) splitter with dynamic height

There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn't support fixed height, it just can't. Other thing is that this container can change it's height dynamicly, so I'd like to this splitter to adjust to the panels height.
Is there a script or a way to avoid that?
My idea was to set container's height the bigger panel's height, like:
var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();
if(lheight > rheight){
$("#container").css("height", lheight+"px");
} else {
$("#container").css("height", rheight+"px");
}
but this doesn't seems to be a nice way for me.
Do you have any suggestions?

You can pass a new value to .height(), like this:
var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);
In this case we're just using Math.max() to get the taller one, and setting the height to that.