1

I am using SP2013 & I am trying to create a new edit form using SharePoint designer 2013 in which I have tried to change the width of the textbox in which we enter the data to display such as title , description etc. but I am not able to change the width & height how is it possible ? am I supposed to use CSS ? thanks in advance.

  • 1
    Please describe what you have already tried and how. – SlackerAmit Feb 23 '16 at 13:30
  • when we try to edit something in default edit form it is in table ; tr & td tags so in td tags there are 3 lines 1.<td width="400px" valign="top" class="ms-formbody"> 2.<SharePoint:FormField 3. <SharePoint:FieldDescription so now when this shows up on site the text box in which we enter is small & I want to increase the length , so I increased the width in 1st line of td which doesn't increase the width of text box. eventually I came to know that sharepoint form field makes the textarea & I am not able to change it's width , how am I suppose to do that ? – Dj21 Feb 24 '16 at 3:46
2

With CSS, you can achieve this by using below code:

textarea[title="<<Internal Name of the SharePoint Multiline Field>>"] {
    width: 1000px;
}

With jQuery, it can be easily achieved by below code:

$('textarea[title="<<Internal Name of the SharePoint Multiline Field>>"]').css("width","1000px");

With plain old javascript, one of the ways to achieve it is:

var getElementsByAttribute = function (attr, value) {
  var match = [];
  /* Get the droids we're looking for*/
  var elements = document.getElementsByTagName("*");
  /* Loop through all elements */
  for (var ii = 0, ln = elements.length; ii < ln; ii++) {
    if (elements[ii].hasAttribute(attr)) {
      /* If a value was passed, make sure it matches the element's */
      if (value) {
        if (elements[ii].getAttribute(attr) === value) {
          match.push(elements[ii]);
        }
      } else {
        /* Else, simply push it */
        match.push(elements[ii]);
      }
    }
  }
  return match;
};

var MyField = getElementsByAttribute('title','<<Internal Name of Multi-line field>>')[0];
MyField.style.width = '1000px';

You can select any one of the javascript codes above depending upon your use-case and availability of jQuery on list forms, put it in a file and add that file as JSLink to the field you are targeting. That will make SharePoint load and run this script anywhere this field is loaded.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.