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...