Client Template not flush with grid cell

[Catherine]

Hi, I wanted to ask how I could get html displayed in a grid cell via a Client Template to line up with the left side of the grid. I've played around with some css but nothing I'm doing seems to work. I've include a screenshot of what's happening and below is an example of my code.

function getAlarmTypes(typesArray) {
    var allTypes = ""

    typesArray.forEach(function (element) {

        allTypes += "<li><strong>" + element.optionDesc.trim() + "</strong></li>"

        value = element.gcfDataValue

        if ((value & 1) == 1) {
            //bit 0
            allTypes += "<li>Shutdown</li>"
        }

        if ((value & 2) == 2) {
            //bit 1
            allTypes += "<li>Fault</li>"
        }

        if ((value & 4) == 4) {
            //bit 2
            allTypes += "<li>Non-Latching</li>"
        }

        if ((value & 8) == 8) {
            //bit 3
            allTypes += "<li>Sequence Controlled</li>"
        }

        if ((value & 16) == 16) {
            //bit 4
            allTypes += "<li>Autocrossover</li>"
        }

        if ((value & 32) == 32) {
            //bit 5
            allTypes += "<li>RBS Shutdown</li>"
        }

        if ((value & 64) == 64) {
            //bit 6
            allTypes += "<li>Run Responce</li>"
        }

    });

    return ("<class=\"analogType\"><ul style=\"list-style-type:none; left:-50px\">" + allTypes + "</ul></class>").trim()
}

[Viktor Tachev]

Hi Catherine,

The reason for this behavior is because ul elements have default padding applied. In order to change that behavior I would suggest specifying the padding-left property for the list. 

• https://dojo.telerik.com/EkUquneK

The dojo above outlines the approach. Give it a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik