Databases
StackOverflow2013
Postsdbo
POBorder and Padding width javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBorder and Padding width javascript
    primarykey
    data
    text
    <p><strong>UPDATE: Edited javascript code. It's only slightly off now in some columns. Maybe a pixel or two. Not sure why.</strong></p> <p>I need to get the border and internal padding width of a cell of a table. I plan to subtract these values from the offsetWidth to get the content width, and use that to set the style.width of another cell. Unfortunately, I can't find a tried-and-true way to get the border and padding width. Anyone got an idea?</p> <p>UPDATE: I added the code below to show my implementation. It still doesn't align correctly. I'm attempting to sync up column widths of the two tables; however, the table widths are setting smaller than the length of all the columns, pushing some columns to not line up. The table widths are setting too small. :(</p> <pre><code>/* Utilities.js Author: Steven T. Norris Created: 3/2/2012 Updated By: Last Updated: Copyright 2012 Utility functions Logs to debug window if using Debug.aspx or a logger named 'debug' with the HtmlLoggerControlInstance */ /* Syncs column sizes between two tables. @param string table1 : First table to sync @param int table1HeadRow : Row to use as column width sync for table1 (if null, uses first row) @param string table2 : Second table to sync @param int table2HeadRow : Row to use as column width sync for table2 (if null, uses first row) */ function syncColumnWidths(table1, table1HeadRow, table2, table2HeadRow) { var tableTotal = 0; var tableAdd = 0; var t1width = 0; var t2width = 0; var t1Cell; var t2Cell; var t1CellWidth; var t2CellWidth; UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths-") if((typeof table1 == "string" ||table1.constructor == String) &amp;&amp; (typeof table2 == "string" ||table2.constructor == String) &amp;&amp; (typeof table1HeadRow == "number" || table1HeadRow == null) &amp;&amp; (typeof table2HeadRow == "number" || table1HeadRow == null)){ tableOne = document.getElementById(table1); tableTwo = document.getElementById(table2); //Set row to check and get row if(table1HeadRow == null){ t1Start = 0; } else{ t1Start = table1HeadRow; } if(table2HeadRow == null){ t2Start = 0; } else{ t2Start = table2HeadRow; } t1Row = tableOne.rows[t1Start]; t2Row = tableTwo.rows[t2Start]; //Get end number if(t1Row.cells.length &lt; t2Row.cells.length){ tEnd = t1Row.cells.length; } else{ tEnd = t2Row.cells.length; } //Sync widths for (i = 0; i &lt; tEnd; i++) { t1Cell = $("#" + table1+" tr:eq("+t1Start+") td:eq("+i+")"); t1width = t1Cell.width() + parseInt(t1Cell.css("padding-left"), 10) + parseInt(t1Cell.css("padding-right"), 10) + parseInt(t1Cell.css("borderLeftWidth"), 10) + parseInt(t1Cell.css("borderRightWidth"), 10) ; t1CellWidth = t1Cell.width(); t2Cell = $("#" + table2 + " tr:eq(" + t1Start + ") td:eq(" + i + ")"); t2width = t2Cell.width() + parseInt(t2Cell.css("padding-left"), 10) + parseInt(t2Cell.css("padding-right"), 10) + parseInt(t2Cell.css("borderLeftWidth"), 10) + parseInt(t2Cell.css("borderRightWidth"), 10); t2CellWidth = t2Cell.width(); UtilLogger.log(HtmlLogger.CONFIG, "syncColumnWidths:t1 width:" + t1CellWidth + " t2 width:" + t2CellWidth); if (t1CellWidth &gt; t2CellWidth) { tableAdd = t1width; t2Row.cells[i].style.width = t1CellWidth + "px"; t1Row.cells[i].style.width = t1CellWidth + "px"; UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t2 width to t1"); UtilLogger.log(HtmlLogger.FINER, "syncColumnwidths:t1 style width:" + t1Row.cells[i].style.width + " t2 style width:" + t2Row.cells[i].style.width); } else { tableAdd = t2width; t1Row.cells[i].style.width = t2CellWidth + "px"; t2Row.cells[i].style.width = t2CellWidth + "px"; UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t1 width to t2"); UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+" t2 style width:"+t2Row.cells[i].style.width); } tableTotal = tableTotal + tableAdd; } UtilLogger.log(HtmlLogger.FINE, "setting main table width to " + tableTotal); tableOne.style.width = tableTotal + "px" tableTwo.style.width = tableTotal + "px" UtilLogger.log(HtmlLogger.FINER, "tableOne width: " + tableOne.style.width); UtilLogger.log(HtmlLogger.FINER, "tableTwo width: " + tableTwo.style.width); } else{ alert("syncColumnWidths takes parameters (string, int|null, string, int|null)"); } UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-"); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsteventnorris
    1. USsteventnorris
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBorder and Padding width javascript
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAre you open to using jQuery?
      singulars
      1. POBorder and Padding width javascript
      1. USElliot Bonneville
    2. CO@ElliotBonneville everything that you do in jQuery can be done in pure javascript
      singulars
      1. POBorder and Padding width javascript
      1. USNicola Peluchetti
    3. CO@ElliotBonneville I am open to using whatever gets the job done. Although javascript can do whatever jQuery can do, seeing as it is javascript itself, jQuery often does it with less hassle and more fun. :)
      singulars
      1. POBorder and Padding width javascript
      1. USsteventnorris
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload