ColResize does not work with table headers with inputs

[marianopeck]

Hi,

I am trying to use ColResize but my tables have inputs (which I use for filtering) and html select lists, etc. The ColResize works OK in columns that are a simple text, but not for those that have inputs/lists. It seems these inputs/lists have a min width so they do not get smaller, yet the rest of the table does.

Is there a workaround?

Thanks in advance,

[maca88]

You have to set the width of your inputs and lists to 100%.

Example: http://live.datatables.net/IroN/23/

[marianopeck]

Hi,

Thank you very much for your answer. I am glad to see this project alive! This are very much needed extensions to Datatables. So thanks for taking care!

OK, thanks for the idea of setting width to 100% in my inputs. However, 2 small notes:

1) In my case, the inputs are in the table HEADER cells (th), not the body, as your example. Would the solution be the same?

2) While I agree I need to set width 100%, it would be nice that if I don't do it, the "resize" would NOT continue after the min so that it doesn't break the table. I mean..it would be nice if the resize would simply stop at the min and not to continue shrinking the body but not the header. Would this be possible?

Thanks in advance,

[maca88]

I rewrited the resizing logic for your second point. Now you can specify minWidth and maxWidth on each column. If the minWidth is not specified I created an algorithm to calculate it. With the initialization parameter 'widthMatch' we can set up when the algorithm calculation will take place. Possible options for 'widthMatch' are: 'none': the algorithm will never be called 'semiauto': this is the default setting and it will be triggered only on first draw 'auto': triggered on each draw

Example: http://live.datatables.net/IroN/62

[marianopeck]

Hi Maca,

Thanks for the development. Originally, my tables use to have nothing set in the inputs of the headers...getting the default size of the browser. I have modified my tables right now so that, all columns by default, specify a "width: 100%;". However, some columns can define a "min-width: 100px;" for example.

I provided an example here: http://live.datatables.net/IroN/67/edit

If you take a look, if you select either 'auto' or 'semi-auto' you cannot resize any column. If I put it to 'none' I can resize but the table gets broken when I try to make some columns very small.

What should I be doing?

Thanks in advance,

[marianopeck]

And here is without bootstrap...just to be clearer: http://live.datatables.net/IroN/73/edit

[maca88]

When using 'auto' or 'semiauto' the columns are actualy resizable but the problem is that the algorithm for calculation of minwidth calculates high values. The solution for now is to manual set the minwidth for the columns. Example for the first 4 columns: http://live.datatables.net/IroN/72

[marianopeck]

Thanks Maca.

Unfortunately, that solution does not work for my case. I have like....30 tables which are all generated with a framework from some descriptions (metadata). So it is really hard to estimate a minWidth for each column for each table. So I think I will have to live with this issue. So the ColResize in my case will work until the user try to make a column a bit smaller and there the table breaks.

Thanks,

[maca88]

I'll try to fix that, stay tuned. :)

[marianopeck]

That would be awesome, thank you very much!

[maca88]

Ok, I fixed the issue with a little css and some code refactoring. :) Example: HERE

Note: Dont forget to add the colResize.css to your page. :)

In addtion to the fix I added some new features to the plugin:

• added global minWidth, maxWidth option in initialization settings for not letting any column to be resized less than minWidth and more that maxWidth
• added double click action (restore column width to the initial width)
• added api for programatically resizing columns (example: api.column(0).resize(200) for resizing the first column to 200px)

[marianopeck]

Hi Maca. Thanks for your changes and improvements. I like the idea of a global minWdth and maxWidth. I also tested the double click action and works nicely.

However....I don't like very much the changes regarding the width the columns get assigned. The good thing is that this change does fix the problem of when I want to make a column small. The tables does NOT break and I can make a column as smaller as I want. This is very cool.

What I don't like (and this is an important point), is the with these changes it seems that columns width are automatically calculated (it seems each column gets the same or similar witdh). In my case, I am using Bootstrap tables (and mostly the "condensed" approach), which very smartly adapts the best width to each column. With this change I loose that, and the width I get for each column is not good.

Is there a possibility I could get the ability to make the columns as smaller as possible yet continue using Bootstrap widths for columns (as I had before this)?

Thank a lot in advance,

[maca88]

The problem lied in the table-layout that I've added in the colResize.css. In order to fix that i've added a new initialization option fixedLayout (default to true) and removed the table-layout style in the colResize.css. If fixedLayout is set to true, the css property table-layout will be set to 'fixed' on the first column resize. If false, a function will be called on each table redraw that will calculate the minWidth that a column can have. Note when setting fixedLayout to false the column will be resized if the content will be larger that the previous.

I've included Bootstrap in your example: HERE

Try to resize a little the first column on both examples and then switch to the second page, you will note the difference.

If your table is redrawn on each action, the default settings should solve your problem (second example in the link above).

Note: I've added an new option dblClick that can be set to:

• 'restoreOrig' -> Is the default setting and it will resize the column to its initial width (same as before)
• 'matchContent' -> it will resize the column to fit the content, (same behaviour as a double click in Excel)

[marianopeck]

Hi Maca,

Thanks for the development to match my needs while also letting it customizable for all tastes :) Indeed, the default settings seem to solve my problem. I still wonder one thing:

When I resize a column to make it smaller...the height of the row gets bigger so that the contents can fit. However, there is a point, of course, where I have only ONE word occupying all the cel width. If I want to make that column even smaller, it won't break my word in half. In this case, what happens is that the words extends to the next cell (from the next column). I am wondering if this is the best behavior or if it would be better that I wouldn't be able to make a column smaller if the cells of any row would not fit. Maybe it will also be very expensive to compute....

Thoughts?

[marianopeck]

BTW, how can I set the matchContent option? :)

[marianopeck]

Ufff, sorry, forget my previous question (about the contents going outside cell). Sorry, my bad. Works correct now. As soon as I refresh the table again, even if I did make the column too small that it would make the cells to not find, after the refresh, they get the min needed width so that the cell contents do fit. That's good. That's the expected behavior with fixedWidth right?

Thanks!

[maca88]

Hmm infact you discovered a bug of mine :). What you described is not the right behaviour that I want for fixedLayout=true. Instead this should be the right behaviuor for fixedLayout=false. You can look HERE what you should expect from table-layout: 'fixed' (fixedLayout=true) and table-layout: 'auto' (fixedLayout=false).

Try with the fixed version :)

[marianopeck]

Hi, thanks Maca.

So in my case what I need is fixedLayout: true so that the columns gets by default the widths they would normally get with bootstrap (otherwise I get wrong default widths). If I resize a column and make it smaller than a single word, it gets simply cut and not displayed in the next cell. That's correct, right? In the w3schools example, the world continues in the next cell. In my case no, but I like mine behavior more :)

[maca88]

Yes you are right, in w3schools example, the world continues in the next cell because they do not have set css property overflow to hidden.

[marianopeck]

Thanks for the explanation. So I guess we can consider this issue closed, right?

[marianopeck]

Hi maca...I am realizing now that I have a problem with saveState and fixedLayout. In my app I am setting fixedLayout: true, and enabled the stateSave...When the table first renders it looks lok (like if fixedLayout were true), however, as soon as I refresh the table or render it again, all the columns look like if I were using fixedLayout false.... do you need an example or you can reproduce it already?

Thanks

[maca88]

When setting fixedLayout to true the table didnt got the fixed table-layout until the first resize. So if you didnt resized before the refresh the behavior was the same as when fixedLayout=false. I've change that behaviour so that the fixed layout is applied after the first draw.

Example: HERE

[marianopeck]

Thank you so much. That fixes my problem!