asked on

CSS div width ignore content of inner div

So I had a nice table layout with 4 columns of specific, easily manageable data. My client wants me to add a "notes" display. My goal was not to specify any widths, and without the notes field it looks nice and resizes perfectly. What I would like to do is put the notes field in a div to the right of the data in the first column and set overflow to elipses. When I do that, it bases the width of that column on the notes field, which I really want the layout to just completely ignore. Hope this makes sense... ideas?

jonahzona

Is it possible to get a link?

Tom Beck

Ideas:

1. In code behind before binding the data, add a carriage return to the notes data after x number of words.
2. Set a max-width css property for the notes column. It will still resize smaller, but will not exceed the specified width.
3. Have a link in the notes column instead of the data that, when clicked or rolled over, shows the notes in a new div that you make visible when needed, hide otherwise.

Cerixus

ASKER

@jonahzona: No, not possible unfortunately.

@tommyBoy:
Option 1: doesn't work, everything has to be one line to preserve the integrity of the table.
Option 2: I tried without success, for one I don't think IE<7 supports the max-width style.
Option 3: This is what I wanted to do, but the client wants at least the first few words to show up inline.

Cerixus

ASKER

(to add to my response to option 1: I originally had all the notes on a separate line below each record. It looked great and functioned well. The client requested each record be one line)

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Cerixus

ASKER

Yeah I could just truncate it to a certain number of words or characters, but instead of all the complications of javascript and replacing the div I'd probably just do a hover over or a click/modal popup. I really wanted it to be dynamic though... (using text-decoration: ellipsis, etc)

Tom Beck

As you have probably figured out, you need to avoid trying to replace the short version of the note with the full text in the table itself as this would cause the notes column to widen and the table would be jumping around alot. What I'm suggesting would be a popup that would occur on mouse over and would be positioned exactly where the note cell is currently so it would be smooth and relevant. You could even add a slight fade in, fade out effect. A modal popup usually grays out the page and prevents any other action while the popup is "on". That seems like overkill. Plus it would not have a position that relates to the note that was hovered over. It would seem like unrelated information. In any case (whether modal popup or show and hide div, which are essentially the same thing), you will have to decide where the full text is coming from on hover (cient side or server side). You can't have the full text hidden in the table cell itself because as soon as you make it visible, the cell will widen and the table will appear to jump around. You are still getting your data dynamically. You just print the note data into a javascript array instead of a table cell. Data is only dynamic until it's rendered, then it's static html.

Tom Beck

A working sample to play with.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
    <style type="text/css">
        * {margin:0 auto;padding:5px;}
        div.centerer{ width:100%; margin: 0 auto;}
        #fullTextDiv {width:20%;height:auto;background-color:#fff;border:solid 3px #55cc55;margin-left:-5px;display:none;}
        td.one {width:25%;}
        td.two {width:25%;}
        td.three {width:25%;}
        td.four {width:25%;}
        span.more {color:blue;font-size:.9em;cursor:pointer;}
    </style>
</head>
<body>
    <form id="form1" runat="server">    
    <div class="centerer">
    <table cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td class="one">Column ONE</td>
            <td class="two">Column TWO</td>
            <td class="three">Notes Column</td>
            <td class="four">Column FOUR</td>
        </tr>
        <tr>
            <td class="one">col 1</td>
            <td class="two">col 2</td>
            <td class="three"><span id="1"></span></td>
            <td class="four">col 4</td>
        </tr>
        <tr>
            <td class="one">col 1</td>
            <td class="two">col 2</td>
            <td class="three"><span id="2"></span></td>
            <td class="four">col 4</td>
        </tr>
        <tr>
            <td class="one">col 1</td>
            <td class="two">col 2</td>
            <td class="three"><span id="3"></span></td>
            <td class="four">col 4</td>
        </tr>
        <tr>
            <td class="one">col 1</td>
            <td class="two">col 2</td>
            <td class="three"><span id="4"></span></td>
            <td class="four">col 4</td>
        </tr>
    </table> 

    <div id="fullTextDiv" onmouseout='javascript:hideDiv();'></div>   
    </div>
    </form>
    <script language="javascript" type="text/javascript">
    var notes=["and wanton ambling nymph; I, that am curtail'd of this fair proportive tricks, Our stern alarums changed to delight the souls of the lascivious sun of mountings, Our steeds To fright the souls of the ocean buried. Nor made glorious wrinkled front; ","And all the souls of York; And all the souls of this wrinkled front; And all am curtail'd of this fair proportive tricks,Our steeds To the souls of our house In the lascivious pleasing nymph;I","that am not shaped front; And all the lascivious pleasing of the winter of the deep bosom of our house In the lascivious sun of York; And now, instead of York; And now, instead of our bruised arms","and wanton ambling nymph; I, that am curtail'd of this fair proportive tricks, Our stern alarums changed to delight the souls of the lascivious sun of mountings"];
    for (i=1; i<5; i++) {
        var shortNote = notes[i-1].substring(0, 25) + "...<span class='more' onMouseOver='javascript:timeout(" + i + ");'>more</span>";
        document.getElementById(i).innerHTML = shortNote;
    }
    function timeout(value) {
        setTimeout('fullText(' + value + ')', 500);
    }
    function fullText(span) {
        var fullTextDiv = document.getElementById("fullTextDiv");        
        fullTextDiv.innerHTML = notes[span-1];
        span = span+'';
        var cell = document.getElementById(span);
        fullTextDiv.style.position = "absolute";
        fullTextDiv.style.left = findPosX(cell) + "px";
        fullTextDiv.style.top = findPosY(cell) + "px";
        fullTextDiv.style.display = "block";
    }
    function hideDiv() {
        document.getElementById("fullTextDiv").style.display = "none";
    }
    
    function findPosY(obj) {
        var curTop = 0;
        if(obj.offsetParent)
            while(1) {
                curTop +=obj.offsetTop;
                if(!obj.offsetParent)
                     break;
                obj = obj.offsetParent;
            }
        else if(obj.y)
            curTop += obj.y;
        return curTop;
    }
    function findPosX(obj) {
        var curLeft = 0;
        if(obj.offsetParent)
            while(1) {
                curLeft +=obj.offsetLeft;
                if(!obj.offsetParent)
                     break;
                obj = obj.offsetParent;
            }
        else if(obj.x)
            curLeft += obj.x;
        return curLeft;
     }
    </script>
</body>
</html>

Open in new window

Cerixus

ASKER

This is more or less what I did. I simply added another column and only display 20 characters of the field. Full text diasplays on hover. Not what I wanted to do, but oh well...