Column and header width in JS Container

SallieVaughn — Sat, 11 Dec 2021 22:52:13 GMT

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!

Re: Column and header width in JS Container

FC_Basson — Fri, 29 Jul 2016 11:30:10 GMT

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

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

Re: Column and header width in JS Container

SallieVaughn — Mon, 01 Aug 2016 20:06:24 GMT

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.

topic Re: Column and header width in JS Container in ArcGIS JavaScript Maps SDK Questions

Column and header width in JS Container

Re: Column and header width in JS Container

Re: Column and header width in JS Container