changing width of text box in edit form

Question

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.

Answer 1

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.