How can I make a Sharepoint textbox (input, type=text) dynamically Multiline?

Question

I want a textbox on my Web Part that will grow vertically on demand. That is, it will be one line unless the user enters too much text for that line, at which point it word wraps and grows vertically to accommodate the verbosity of the user.

I am creating my controls/elements dynamically, and I create this element like so:

boxPaymentExplanation = new TextBox()
{
    CssClass = "dplatypus-webform-field-input"
};
boxPaymentExplanation.Width = 660;
boxPaymentExplanation.Style.Add("display", "inline-block");

I tried adding this line, in the hopes of achieving this functionality:

boxPaymentExplanation.Style.Add("TextMode", "MultiLine");

...but it makes no apparent change to the textbox's behavior - I can enter text into it "until the bovines come back to the barn" but it simply keeps adding the characters to the end of the textbox on a single row. It never wraps, so it never grows.

UPDATE

This is the jQuery that works (derived from the link that Christopher Jennings provided):

$(document).on("keyup", "[id$=explainPaymentTextBox]", function (e) {
    while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height() + 1);
    };
});

...along with this C#:

boxPaymentExplanation = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    ID = "explainPaymentTextBox"
};
boxPaymentExplanation.Width = 660;
boxPaymentExplanation.Style.Add("display", "inline-block");
boxPaymentExplanation.TextMode = TextBoxMode.MultiLine;

UPDATE 2

Unfortunately, although the descent-into-the-mælström-esque jQuery above works for dynamically growing the textbox, it doesn't work if the user removes text; I would like it also to shrink when that happens...

All you should have to do is set the textmode property to multiline. See https://msdn.microsoft.com/en-us/library/ybwb8sse(v=vs.140).aspx for details. — Christopher Jennings, Jun 19 '15 at 03:12
That doesn't show how to do it in C#, which is what I need to know. — B. Clay Shannon-B. Crow Raven, Jun 19 '15 at 17:21
I've added an answer which should hopefully clarify that fully. — Christopher Jennings, Jun 19 '15 at 21:16

score 1 · Accepted Answer · answered Jun 19 '15 at 21:16

1

You're on the right track. You need to set the TextMode property to Multiline. However, the approach you took is to add an HTML tag attribute rather than set the .NET property. Simply replace boxPaymentExplanation.Style.Add("TextMode", "MultiLine"); with boxPaymentExplanation.TextMode = TextBoxMode.MultiLine;

answered Jun 19 '15 at 21:16

Christopher Jennings

306
3
6

That works for wrapping, but it doesn't cause the element to grow vertically as needed to display everything the user enters. Is there a way to check if any of the text is "hidden" (due to their being more text than can be displayed in the current height of the element) and then increase the height accordingly? – B. Clay Shannon-B. Crow Raven Jun 22 '15 at 16:13
1

Automatic height adjustment isn't a feature of the standard textbox control. You will still need to define a height (likely in CSS) and it should wrap text to the next line (presuming there's nothing wonky with your CSS), but it won't automatically expand the control unless you come up with some solution in Javascript. – Christopher Jennings Jun 22 '15 at 16:18
Yes, that's what I'm looking for - a jQuery solution. – B. Clay Shannon-B. Crow Raven Jun 22 '15 at 16:22
1

This should help with that: http://stackoverflow.com/questions/2948230/auto-expand-a-textarea-using-jquery – Christopher Jennings Jun 22 '15 at 16:23

How can I make a Sharepoint textbox (input, type=text) dynamically Multiline?

UPDATE

UPDATE 2

1 Answers1

Linked