Column and header width in JS Container

[SallieVaughn]

I'm attempting to modify the widths of 4 columns displayed in a data container/table which I customized from the Tax Parcel Viewer (Tax Parcel Viewer | ArcGIS for Local Government ). Out of the box, the template had 2 columns displayed and I've added 2 additional columns. Now I cannot get the headers and results to line up with one another.

I've attempted to modify the header and field and widths in locator.js. However, no matter what I input, field width seems to be overridden (CSS perhaps?). The actual column widths seem to be more driven by the table contents rather than the specified width. As you can see in the images, the field widths are different.

Header code:

var tableHeader = document.createElement("table");
            tableHeader.className = "tblSearchHeader";
            var tbodyHeader = document.createElement("tbody");
            tableHeader.appendChild(tbodyHeader);
            var trHeader = document.createElement("tr");
            tbodyHeader.appendChild(trHeader);
            trHeader.className = "trAddressGray";


            var tdParcelId = document.createElement("td");
            trHeader.appendChild(tdParcelId);
            tdParcelId.style.width = "47px";
            tdParcelId.innerHTML = "Record";


            var spanUp = document.createElement("span");
            spanUp.innerHTML = "&#9650";
            spanUp.id = "spanUp";
            spanUp.style.marginLeft = "5px";
            tdParcelId.appendChild(spanUp);


            var tdTaxMap = document.createElement("td");
            tdTaxMap.innerHTML = "Tax Map";
            tdTaxMap.style.width = "70px"
            trHeader.appendChild(tdTaxMap);


            var spanUpTaxMap = document.createElement("span");
            spanUpTaxMap.innerHTML = "&#9650";
            spanUpTaxMap.id = "spanTaxMap";
            spanUpTaxMap.style.marginLeft = "5px";
            tdTaxMap.appendChild(spanUpTaxMap);


            var tdAddress = document.createElement("td");
            tdAddress.innerHTML = "Location";
            tdAddress.style.width = "70px"
            trHeader.appendChild(tdAddress);


            var spanUpAdd = document.createElement("span");
            spanUpAdd.innerHTML = "&#9650";
            spanUpAdd.id = "spanUpAdd";
            spanUpAdd.style.marginLeft = "5px";
            tdAddress.appendChild(spanUpAdd);


            var tdOwnerId = document.createElement("td");
            tdOwnerId.innerHTML = "Owner";
            tdAddress.style.width = "20%"
            trHeader.appendChild(tdOwnerId);


            var spanUpOwn = document.createElement("span");
            spanUpOwn.innerHTML = "&#9650";
            spanUpOwn.id = "spanUpOwn";
            spanUpOwn.style.marginLeft = "5px";
            tdOwnerId.appendChild(spanUpOwn);

Field/Attribute Code:

    var parcelID = attributes[displayFields[0]];
    td.innerHTML = parcelID;
    td.style.width = "61px";
    var td1 = document.createElement("td");
    var taxMapNo = attributes[displayFields[1]];
    td1.innerHTML = taxMapNo;
    td1.style.width = "70px";
    var td2 = document.createElement("td");
    var parcelLoc = attributes[displayFields[2]];
    td2.innerHTML = parcelLoc;
    td2.style.width = "85px";
    var td3 = document.createElement("td");
    var owner = attributes[displayFields[3]];
    td3.innerHTML = owner;
    //td3.style.width = "45px";
    tr.setAttribute("addressValue", parcelLoc);

Any assistance would be greatly appreciated!

[FC_Basson]

Does it make any difference if you add "!important" to your td width setting?

td.style.width = "61px !important";

[SallieVaughn]

Thanks for the response!

Actually, I wound up changing the width for the Search Container in the browser.css file. Apparently, the number of pixels I had specified in the headers was more than was allowed by the style sheet.