Q:

The size of the inline editor for an outputField

I have an outputField linked to a SObject field of the Text type with enabled inline editing:
<apex:outputField value="{!myStringValue}">
  <apex:inlineEditSupport disabled="false" event="onclick"/>
</apex:outputField>

The inline editor has default size of 20 characters while I want the editor to be much larger:
<input id="j_id0_j_id2_j_id31_j_id32_j_id38" value="long long long long long long long value" size="20" maxlength="4000" type="text">

How can I specify the size of the inline editor for a string output field? I want this:
<input id="j_id0_j_id2_j_id31_j_id32_j_id38" value="long long long long long long long value" maxlength="4000" type="text" style="width: 95%">

A:

I have found a solution. Add the following script to the page:
<apex:page ... >
  <script>
    var _mySSheet = (function() {
        var style = document.createElement("style");
        style.appendChild(document.createTextNode(""));
        document.head.appendChild(style);
        return style.sheet;
      })();

    function makeLong(objName)
    {
      objName = objName.replace(/:/g,"_");
      _mySSheet.insertRule("#" + objName + " { width:95% }", 0);
    }
  </script>

After that it is needed to assign an ID to every field whose style we want to change. Using the Component object we can get the dynamic id for this field and pass this id to the makeLong function:
<apex:pageBlockSectionItem >
  <apex:outputlabel >Subject</apex:outputlabel>
  <apex:outputPanel >
    <apex:outputField id="subjectField" value="{!draftEmail.Subject}"><apex:inlineEditSupport disabled="false" event="onclick" /></apex:outputField>
    <script>makeLong("{!$Component.subjectField}");</script>
  </apex:outputPanel>
</apex:pageBlockSectionItem>

