[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS div width ignore content of inner div

Posted on 2011-04-25
9
Medium Priority
?
582 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?
0
Comment
Question by:Cerixus
  • 4
  • 4
9 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35460795
Is it possible to get a link?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35460801
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.
0
 
LVL 1

Author Comment

by:Cerixus
ID: 35461855
@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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:Cerixus
ID: 35461866
(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)
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 35462211
Option 3 is still viable, but instead of just a link, you print out x number of words in the note followed by an elipsis, followed by the word "more" which is a link that displays the rest of the note. You print the complete note for each line item to a javascript array so it's available without postback. Use javascript to make the div visible, set it's position to the top left corner of the note column of the associated line item, and use innerHTML to print the entire note to the div. The div would be z-indexed to appear on top of the other data. This would of course require each note cell to have an id that could be used to find it's current position on the page.
0
 
LVL 1

Author Comment

by:Cerixus
ID: 35462318
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)
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35462512
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.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35464157
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

0
 
LVL 1

Author Closing Comment

by:Cerixus
ID: 35514593
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...
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question