CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-dialog
Gary Hillerson
Gary Hillerson

Reputation: 131

jqueryui dialog with table -- how to limit row height

I've got a jqueryUI dialog with a table in it that I am populating with results from a database query. All is working well, except for one annoyance: I want each row of the table to be exactly one line high, never to wrap around to a 2nd line, i.e. I want to truncate the display of results to the table width.

I thought I could do this with css, by setting the max-height property of each tr or td, but I couldn't make that work. So I'm not sure how to do it, or even whether I should tackle this in the css or in jquery.

I tried setting the max-height of the 'tr' elements in my css, and also tried setting max-height of the 'td' elements, but that didn't work. I can't figure out what the best solution would be. Any suggestions appreciated.

The dialog looks like this:

<div id="MyDialog" class="cloudAppDialog" title="Your  Database Entries">
<form>
    <fieldset>
      <table id="TableRetrievedEntries" width="800" border="0" style="cursor:pointer">

      </table>
...
</form>
</div>

The code that builds the table looks like this:

function CreateResultsTable() {
    var i       = 0;
    var lim     = parseInt(WCGetParsedXMLValue('recsReturned'));
    var theHtml;
    theHtml     = '<tr><th>Retrieved Entries</th></tr>';
    for (i=0; i < lim; i++) {
        var theRef   = decodeURIComponent(WCGetParsedXMLArrayValue("records", i));
        var tblRow   = '<tr><td id=' + i.toString() + '>' + theRef + '</td></tr>';
        theHtml     += tblRow;
    }
    if (lim > 0) {
        return(theHtml);
    } else {
        return('');
    }
}

The css looks like this:

table#TableRetrievedEntries {
    border-collapse: collapse;   
}

#TableRetrievedEntries th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    line-height: 12px;
    font-style: normal;
    color: #0242AC;
    font-weight: bold;
    text-align: left;
    background-color: #fff;
    text-decoration: underline;
    padding-left:3px;
    padding-right:3px;
    padding-top:0px;
    padding-bottom:10px;
}

#TableRetrievedEntries td {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    line-height: 14px;
    font-style: normal;
    color: #0242AC;
    padding: 3px 3px;
    max-height: 14px;
}

#TableRetrievedEntries tr:hover {
    background-color: #ccc;
}

Upvotes: 0

Views: 982

Answers (2)

Lance
Lance

Reputation: 3213

It took me to long to answer but Marian is right here is the jsfiddle http://jsfiddle.net/EvSv9/2/

Upvotes: 0

Marian Zburlea
Marian Zburlea

Reputation: 9427

add this css to your table cells:

display:block;
overflow:hidden;
height: 50px; // Assuming that you want your max height to be 50px;

Upvotes: 3

Related Questions