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"/>

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%">
  • It is not possible to connect apex:outputField with a normal string variable so i think you are on the wrong way. Mar 10, 2014 at 13:31
  • You are right, I connected it with a Text field of an SObject. I just wanted to note that the editor is a text box. Mar 10, 2014 at 14:08

2 Answers 2


I have found a solution. Add the following script to the page:

<apex:page ... >
    var _mySSheet = (function() {
        var style = document.createElement("style");
        return style.sheet;

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

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>
  • Nice one! I guess I should brush up on my javascript skills.. Mar 11, 2014 at 8:55

I'm afraid this is not part of the current features of inlineEditSupport. Also there are no easy 'tweaks' to add styles via javascript because the component behaves so dynamic and the Id seems to be lost somewhere as well.

If you really need this, you could revert to the 'old-school' inline edit mimics that were built before it became available throught Visualforce, e.g. this one: http://www.forcetree.com/2009/11/inline-editing-in-visualforce.html

  • n.b.-- just today I styled an outputField within an inlineEdit using jQuery: $j('span[id$="foo_ileinner"]').css({'color' : 'red'}); The ..._ileinner is how I found the inlineEdit component with id="foo". For text input fields invoked by doubleclick, the jQuery: $j('span[id$="foo_ileinneredit"].css({'someattr' : 'someval'})'); is worth trying to alter widths.
    – cropredy
    Mar 11, 2014 at 1:51
  • 1
    I have found a similar solution, but the problem is that the ids of objects on a VF page are dynamic. So it is needed to get the valid ID first. Mar 11, 2014 at 5:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .