4

What I need is very simple, or atleast it should be, but after days of research I've come to resort to asking on stackoverflow if anyone actually has any idea how to do this...

I have 3 columns of content, all of which have expandable content inside. None of the content is very wide, but it is plentiful (once expanded). I need to do it so that when you expand the content in one column, it shrinks the other two columns up to a certain amount, and when you expand the content of two columns it evens out etc. Then, the columns must have a percentage max-size and a min-size (percentage or static), so that when columns expand they don't completely squash the others, and so that I can set a maximum "expandability" to each column. For simplicity's sake, here's an example that would've done the trick if only it worked:

<table width="100%"><tr>
<td style="min-width:200px; max-width:60%;">Col1ExpandableContent</td>
<td style="min-width:200px; max-width:50%;">Col2ExpandableContent</td>
<td style="min-width:200px; max-width:40%;">Col3ExpandableContent</td>
</tr></table>

The above code doesn't work of course, but I'm sure you can imagine how it would work if it did. It's exactly what I need, only that max-width doesn't work with percentages on TDs for some reason. If you need a better visualization I made a fiddle to help illustrate the problem here: http://jsfiddle.net/m5xgcf3s/

I can't just use the min-width's of the cols because of the nature of the contents, they all need to be expandable but only a certain amount. I'm open for any solution and any way of doing this, it doesn't need to be a table (it's just that the TD widths and alignments in a table is perfect by default, if only it supported max-width percentage) or anything as long as it meets the requirements and doesn't use a framework (which hopefully shouldn't be needed anyway). Bonus if it doesn't use javascript at all, but BIG BONUS if you find a solution that allows for a smooth animated size transition while still meeting the requirements. Also bonus if you can explain to me why the heck max-width percentage doesn't work on table cells...







Thanks for the help guys, but I made a script that solved it myself... NO frameworks, NO jQuery, NO hacks, just give the TDs an id and put in this code;

<script type="text/javascript">
      window.onresize=function setTDmaxwidth() {
      var containerwidth = window.innerWidth;
        if (containerwidth >= 400 ) {                                                                                                   
            document.getElementById("col1").style.maxWidth=( ( containerwidth * 0.6 )+'px');
            document.getElementById("col2").style.maxWidth=( ( containerwidth * 0.5 )+'px');
            document.getElementById("col3").style.maxWidth=( ( containerwidth * 0.4 )+'px');
        } else {  }
    }
</script>

It simulates a percentage max-width by calculating a fraction of the container width every time its size changes (in this case the container is 100% the width of an iframe). I'll leave the question unanswered though incase anyone comes up with another answer (with or without a table), hopefully one which allows for width transition animations, or a valid explanation as to why percentage max-width's don't work on TDs

KittenCodings
  • 575
  • 1
  • 5
  • 20

2 Answers2

0

Can you try it?

I have kept example for only one tr td.

You have to do each function for this case.

try it, you will have some idea..

Css

    <style type="text/css">
        td { border: 1px solid black; }

    </style>    

Script

    <script>
    function onLoadFunction(){
        if(($(".tdFirst div").text().length)<100){
            $(".tdFirst div").css('width','200px'); // min width
        } else if(($(".tdFirst div").text().length)>=400) {
            $(".tdFirst div").css('width','400px'); //max width
        } else {
            $(".tdFirst div").css('width',$(".tdFirst div").text().length+'px'); //width auto adjust 
        }
    }
    </script>

HTML

    <body onLoad="onLoadFunction()">
        <table>
            <tr>
                <td align="center"class="tdFirst">
                    <div>
                        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
                    </div>
                </td>
                <td><p>testing...</p></td>
            </tr>
        </table>
    </body>

Attempt #2

script Use jQuery in your fiddle

    $('document').ready(function(){
        $(".tdFirst div").each(function(){
            if(($.trim($(this).text()).length)<50){
                $(this).css('width','20px'); // min width
            } else if(($.trim($(this).text()).length)>=60) {
                $(this).css('width','60px'); //max width
            } else {
                $(this).css('width',$.trim($(this).text()).length+'px'); //width auto adjust 
            }
        });
    });
Punitha Subramani
  • 1,467
  • 1
  • 8
  • 6
  • Thank you very much for your code, it brought me hope to see a reply even if it requires javascript after I couldn't do it myself for such a long time... but I'm sorry, I can't get your code to work, either I don't understand how it's supposed to work or I somehow accidentally broke it, I'm still very new to coding... I don't see how this makes a max-width for the TDs, I tried using it like this: http://jsfiddle.net/w6o6261y/ but it looks like nothing happens, what am I doing wrong? – KittenCodings Sep 08 '14 at 09:46
  • edited my post, replace old script and paste new script in your fiddle. select Js in jquery 1.9.1/or any of yur version – Punitha Subramani Sep 08 '14 at 10:08
  • I get very strange results... it changes the width of the contents of the TD, not the TD itself http://jsfiddle.net/w6o6261y/1/ – KittenCodings Sep 08 '14 at 10:19
  • what I did there. If you given test word only in div. That automatically takes min width 20px. If you add more text that automatically adjust till max width – Punitha Subramani Sep 08 '14 at 10:27
  • Yes I given in div. If you want to give the width to TD change like this $(".tdFirst div").each(function(){ to $(".tdFirst").each(function(){ – Punitha Subramani Sep 08 '14 at 10:27
  • Oh I see, very complicated solution having to use a framework for such a simple request but I'll try to implement it into my website and see if I can get it to work. One question though, I'm guessing your function doesn't update the TD width automatically when the content is expanded right? If so I can probably hook up the same button that expands the content to call your function again, but then how do I call your function with a javascript line (like onclick="?")from somewhere else in the document? http://jsfiddle.net/w6o6261y/3/ – KittenCodings Sep 08 '14 at 10:49
0

To set widths to be dynamic using percentages and max-width, the parent should have a fixed width in px terms , so in this case it has to be either on the table element or a container div of table element.

I have updated the fiddle here: http://jsfiddle.net/qoaxxbqp/

this update has both initial widths set on container div as well as table element as in :

<div  style="width:600px;border:2px blue solid;" >
   <table width="500px"><tr>
    <td style="min-width:100px; max-width:60%;">Col1ExpandableContent</td>
    <td style="min-width:100px;max-width:50%;">Col2ExpandableContent</td>
    <td style="min-width:100px; max-width:40%;">Col3ExpandableContent</td>
   </table>
</div>

you also only have table set to a fixed width initially and not have a parent container, or set fixed width on container div and use width:100% on the table. Either way, but have a parent / immediate parent's parent with a fixed width(table with % width in this case).

I have also added a jquery hover in/out functions to demonstrate the expansion.

vreddy
  • 173
  • 1
  • 9
  • That sounds like it could do the trick, I could probably find a simple js code to always keep the container div the fixed size I need too, thanks, but... I don't see your fiddle produce the results you said, it's still ignoring the max-width as far as I can see :S http://jsfiddle.net/qoaxxbqp/1/ I tried it in both chrome and firefox and got the same result; it respects the min-width but not the max-width – KittenCodings Sep 09 '14 at 02:30