AnsweredAssumed Answered

Column and header width in JS Container

Question asked by sev0302 on Jul 28, 2016
Latest reply on Aug 1, 2016 by sev0302

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.

Capture.PNG

Capture2.PNG

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!

Outcomes