We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

CSS div width ignore content of inner div

Cerixus
Cerixus asked
on
Medium Priority
628 Views
Last Modified: 2012-05-11
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?
Comment
Watch Question

Top Expert 2011

Commented:
Is it possible to get a link?
CERTIFIED EXPERT
Top Expert 2015

Commented:
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.

Author

Commented:
@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.

Author

Commented:
(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)
CERTIFIED EXPERT
Top Expert 2015
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
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)
CERTIFIED EXPERT
Top Expert 2015

Commented:
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.
CERTIFIED EXPERT
Top Expert 2015

Commented:
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

Author

Commented:
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...
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.