We Keep Coding

Column layout - how to set textfield witdth

I have a formpanel which contains textfield items. Here is a fiddle demonstrating my current screen
Is there anyway to make the width of the textfield take up less than the entire width of the column? Basically, I want the columns stay at the sizes they are (2 columns at 50% each), but I do not want the textfield taking up that entire space of the column.
Can this be achieved using a column layout like I have now?

I think you just use Ext.layout.container.Column wrong way.
In your example each textfield working as column itself and total columnWidth is 1.5.
columnWidths must always add up to 1 (or 100%) when added together, otherwise your layout may not render as expected.
You have to use any container component as column and add textfields to this containers.
Check this simple example.

Text wrap to columns

I have unlimited length of text, and a fixed height container with no vertical scrollbar option, basically the text overflow the container, but it is hidden.
The requirement is to wrap this text to same height columns like the parent container, container has the option to have horizontal scrollbar.
Al this need to work in responsive layout - what means the text parent container height will be less, and all text columns will be restructured.
E.g. if the current text columns was initial 3 column on smaller devices can go to 4, or 5 column.
I searched Google, but haven't found any possible solution.
Any solution, or guide will be big help - at least to know in which direction to start
CSS, or JavaScript, jQuery solutions are welcome.
Initial has the height auto - click button to set the height/ after the height is set need to wrap the text and set in columns to not exced vertical height, instead will be horizontal aligned columns.
ADD CODE HERE
jsfiddle sample

You can wrap your data in another div inside the opendoc and increase its width.
<div class="opendoc"> // width fixed Change Height
<div class="resizablediv"> // Change the width
{{Your data}}
</div>
</div>

I have an idea, but not really perfect. Such problems always need a lots of try/fail tests…
You need to have two nested elements:
<div class="opendoc">
<div class="opendoc-inside">
[Content]
</div>
</div>
.opendoc will receive a fixed height.
.opendoc-inside will have columns and fixed width;
depending of your device width, you choose a number of columns, I choos 2 for the exemple;
Now with javascript:
set columns 2 and width 100% on .opendoc-inside
if height of .opendoc-inside is greater than height of .opendoc:
add 1 column and 50% to the width of .opendoc-inside
goto 2
else your are ok
This solution generate a reflow on each test. this could become very slow.
You need to avoid to launch this operation on each resize event…

Found an jquery plugin for - http://welcome.totheinter.net/columnizer-jquery-plugin/ . This one solve all what i need.

How can I make an HTML table auto width but larger than the screen?

I have a wide table – possibly very wide – and I want the table to be as wide as necessary to fit everything, i.e. as-if it the width was auto (and the screen was wider).
But, by default, tables seem to never exceed the size of their containers!
I've found an answer using JavaScript, but is there a pure CSS answer too? Or a better JavaScript solution?
Here's a JSFiddle fiddle with an example table. Note that in this example the content is bigger than the 'screen', but the desired effect should cause the width of the cells to be large enough so that the text of each cell is all on a single line.
Per GChabot's answer, I don't want the cells to be bigger than their contents. Per their subsequent comment, by "fit everything", I'm of course referring to the Goldilocks fit, i.e. just enough so that contents don't wrap, but no larger.

Set the cells up so they do not wrap
td { white-space: nowrap; }

Depending on what you mean by "fit everything", you might want to define a min-width for your tds:
min-width:250px;
That way, each cell has a reasonable size to display some text, on one or more lines (or just one if you set them as nowrap as epascarello suggested). If you are displaying fixed-size element (such as images), the table should expand by default.

CSS overflow should fix your issue take a look at this post http://css-tricks.com/the-css-overflow-property/

Here's the quick-and-dirty JavaScript I'm using now:
$('#table-container').attr('style', 'width: 1000%');
$('#table-container').attr('style', 'width: ' + $('#tblMain').width() + 'px;');
#table-container refers to a div surrounding the table; the table has an id of tblMain.
I know this won't work if the table is 10 times wider than the current screen size, but a general solution should be pretty easy to implement.

Scrollable HTML table with top row and left column frozen

Has anyone been able to implement a scrollable table in HTML where the TOP row and LEFT columns are frozen, but the rest of the table is scrollable? A perfect example of this is:
Google Squared
I tried to reverse engineer the code for the google squared table, but I have been unsuccessful so far.
Note: I need the ability to FREEZE the TOP ROW and the LEFT COLUMN at the same time.

There's a working example at http://ajaxian.com/archives/freeze-pane-functionality that should be easy to duplicate. Be sure to note the comments -- many of the users have made helpful suggestions for improving the script.
Per #Nirk's request, a direct link to the active demo is at http://www.disconova.com/open_source/files/freezepanes.htm.

Go with a basic structure like this-
table
row
column (blank)
column
table (1 row high, column headers)
row
column
table (1 column wide, row headers)
column
div (fixed height & width, overflow auto)
table (actual data)
Set a fixed table-layout and specify column widths in pixels explicitly. You should be able to achieve the same effect.

i have a version of this in use (for a Gantt-chart style display).
it uses 3 tables: 1 for left column (the rows), 1 for top (columns), and then the data.
you need to work hard to get the cells to match sizes with the ones they match up to (
table layout-fixed can help achieve this).
The tables then are placed in some divs; the left and top divs have (as suggested above) height & width and overflow-auto in their css.
You then hook up some javascript to sync the scrolling of the left / top divs with the inner one...
As I recall there was a fair bit of 'curse-and-try-again', but it can be done with minimal js.
hth

If you use jQuery there's a lot of plugins for tables with fixed head.

You need Scrollable (jQuery plugin)
Demo is here

Table Row SHOW / HIDE *Without* Column Width Resizing, w/ TableLayout: auto

I have table with multiple rows, showing items for sale. When the user clicks on a row, a Javascript inserts / shows a new row right beneath it with details about the item. The issue is when the description is long, it forces the column widths to readjust / resize. This shifts the columns positions and is really annoying, especially for the user. Right now, I have my table.style.tableLayout: auto. I actually prefer it this way, because the columns are adjusted to the content.
My question is: how do I dynamically "lock" the widths of the columns in my table so that when I insert / show the new row, the columns do not readjust / resize?
I've tried:
dynamically setting the table to temporarily "tableLayout: fixed"
inserting / showing my new row
changing the table back to "tableLayout: auto"
Actions 1 & 2 works in in FireFox, but not in Safari and IE (6 & 7). However, doing all three seems to prevent the columns from shifting too much.
The frustration is unbearable ... loosing lots of sleep ... please help!
Thanks.

For those looking for the code (this is done in jQuery). This also assumes the first row has the proper widths for each cell. Pretty easy changes if needed.
$('table.class_of_table_to_fix tr:first td').each(function() {
$(this).css({'width': $(this).width()+"px"});
});

I would set a percent width on each column simply as a guide. Set it just once on the TH of each column. The browser will still adjust the columns to content if necessary, but the columns will stay in place more consistently.
Next, I would never put css "white-space:nowrap" anywhere on that table. A long description should not break the table layout, it should wrap around properly on multiple lines, and be readable if you set the widths on each column to suit the type of data. Similarly I would keep the use of (non breakable spaces) to dates, times and numbers and allow the text to wrap.
Other than that, I do this at my job on a dialy basis, and there's a time when you need to stop ulling hairs asking the browser to do something it's not designed to do. Content should flow and adapt. Locking column widths to pixels is 99.99999% of the time a bad idea.
PS: If you really, reeally, REALLY need to lock columns, the only solution I'm aware of that works with CSS2 and accross all browsers is to use images. You could insert a 1px high transparent gif image in each column, and counting in the padding of the cells (TD), set a pixel width on each image (IMG), instead of on the columns (TH/TD). You could hide those in the TH for example. You can leave the images at 1 pixel wide and set percent widths on TDs, and when you open a new row, you would get each column width minus TD Padding, and set that to the corresponding IMG. I haven't tried! I just know that in many projects I've worked on, I've used small gif images to lock a minimum vertical spacing between columns, for example.

I had a similar problem when I was implementing a table with groups that could be toggled. I wanted the initial ratio between the columns to stay the same without fixing the widths of the columns. By default the browser would change the widths depending on the visibility of the table's rows, which was undesirable.
I went ahead and followed #faB's suggestion of applying percentages, but doing so using a small script that would calculate the percentages of the th elements and apply them after the initial render. This made my columns stay the same width, even with all rows hidden.
Here's the script, which uses jQuery:
(function($){
var lock_widths = function() {
var total_width = $('table').innerWidth();
var headers = $('table th');
var leftover = 100;
$.each(headers, function(ix, el) {
var header = $(el), width;
// on the last call use the leftover percentage
if (ix == headers.length - 1) {
width = leftover;
} else {
leftover -= width = header.outerWidth() / total_width * 100;
}
header.css({'width': width + '%'});
});
};
$(document).ready(lock_widths);
})(jQuery);
Tested in IE7+, Firefox and Chrome. This works for my special case because I have header columns as a reference, but it could be rewritten to measure some other columns.

You can display the details of the row beneath the clicked one in DIV and set its
style="overflow:auto";
so that details will wrap and scrollbar will be available to display entire text.

I don´t know if you´re familiar with jquery, but that´s what I would use - in combination with a separate class for the column that´s causing resizing in the new row - to:
Calculate / get the with of the column
Set the with of the afore mentioned class
Add the row
I haven´t tried it, but that should do it.
By the way, there are probably other ways to do it, I´m just more familiar with jquery (for point 1. and 2.).