function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Formatting an S-control for a detail page

I am new to writing s-controls, and I have one which displays a value on the detail tab of an object row.   I would like to give the value a label and have it look just like any of the other values on the detail layout, but so far no luck.  I can get the fonts to match, but the field doesn't line up in the table with the other values.  Also my s-control seems to take up a lot of vertical space, pushing everything below it way down the page for no apparent reason. No doubt this is pretty simple stuff I'm asking, but I haven't found the answer anywhere.  There must be an example somewhere.  In case it makes it clearer, here is my code thus far.  Thanks!

<script language="javascript"  src="/soap/ajax/8.0/connection.js">
<script language="javascript" type="text/javascript">
var conn;
function jsmain() {
    conn = sforce.connection;
    var EmployeeId = "{!Employee__c.SupervisorId__c}";
    var queryResult = conn.query("select Name, Phone_Number__c from Employee__c where Id = '" + EmployeeId + "'");
    if (queryResult.size > 0) {
        var records = queryResult.getArray('records');
        document.getElementById("PutDataHere").innerHTML = "Supervisor Phone: " + records[0].Phone_Number__c;
<body onload="jsmain();">
<p id="PutDataHere" style="font-family: 'Arial','Helvetica',sans-serif; font-size: 75%">
You can set the height of the s-control in the page layout. It defaults to that is probably why you are seeing the vertical space. Setting the height to around 20px should help you (Not sure the correct pixel will need to test).