Set databound repeater textbox height at runtime based on text length

In an ASP.Net 3.5 website we have a databound repeater in one of the tabs of an AJAXToolkit TabContainer.

We would like to adjust the height of one of the repeater's textboxes at runtime based on the length of the text it contains.

We have tried a very crude height adjustment in the repeater's ItemDataBound event in code-behind based on text length but we would like something much more accurate.

Can any of the Experts here help with this please?
Al230762Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Solutions ArchitectCommented:
Is it a Textbox or a TextArea?

From what I understand you want to always show all text and expand vertically to accomplish that. right?

Don't know if you're using jQuery already but this plugin might help you:
http://www.impressivewebs.com/textarea-auto-resize/

Even if you don't use jQuery the code is pretty straight forward.
What he does is use an hidden div and set its width the same as the textarea and apply the same text inside. What this does is that the div will resize itself to fit all the text.
This calculation is done by the browser rendering engine so after you just need to get the div height and apply it to your textarea.

It's ingenious but it works :)

Ah... and using the jQuery plugin will make it easier for you to centralize the code.
As you might have multiple textarea elements, you'll need an hidden div for each one of them...
Al230762Author Commented:
Now why didn't I find that link when searching the web!? Thank you Alexandre that does indeed look ingenious. We'll work on that and let you know how it goes.
Al230762Author Commented:
Alexandre - we are actually using databound textboxes in a repeater rather than textareas. However we have changed the textbox to textarea and implemented the jQuery you suggested but it seems that the textarea only expands when the user clicks inside it.

Maybe I've misunderstood but it seems that is what the jQuery is designed to do i.e. expand onkeyup.

What we need is for the textbox/textarea to autosize when the page is first loaded.

Any thoughts on that?
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Al230762Author Commented:
For future reference, this is how we did it:

<asp:TextBox ID="txtEntryLevel" runat="server" Font-Size="11px" Height="60px"
                                                                        Text='<%# Container.DataItem("EntryLev")%>' TextMode="MultiLine" ToolTip="255 characters limit"
                                                                        Width="140px" CssClass="normalText" onkeypress="return textboxMultilineMaxNumber(this,255)" onclick="setHeight(this);" onkeydown="setHeight(this);" onfocus="setHeight(this);"></asp:TextBox>


<script type="text/javascript">
    function setHeight(txtdesc) {
     //debugger;
   
     var boxHeight = parseInt(txtdesc.style.height, 10);
     var textHeight = txtdesc.scrollHeight;

     if (txtdesc.value !== "" && boxHeight < textHeight)
        {
            txtdesc.style.height = txtdesc.scrollHeight + "px";
        }
    }
</script>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Alexandre SimõesManager / Solutions ArchitectCommented:
Hi mate,
I'm really sorry I lost track of this one.

I assembled a custom implementation of the hack above:
http://jsfiddle.net/AlexCode/2VkvJ/1/

It should be enough to show you what I meant.
To make this work you just need to set the custom attribute autoHeight to the textareas you want to autosize and call applyAutoSize(); at the end of the body or on document.ready

HTML
<textarea id="txt1" autoHeight></textarea>
<br/>
<textarea autoHeight>With initial text</textarea>

Open in new window


javascript
var applyAutoSize = function(){
    var $hDiv;
    
    var resize = function(){
        var $this= $(this),
            width = $this.width(),
            text= $this.val(),
            modifText;
        
        // prevent really thin textareas
        if(text === "") 
            modifText= "|";
        else
            modifText = text;
        
        // replace CR with <br/>
        modifText = modifText.replace(/(\r\n|\n|\r)/g,"<br/>");
        
        // setup the hidden div
        $hDiv
            .css('font-family', $this.css('font-family'))
            .html(modifText)
            .width(width);
        
        // pick the hidden div height and set it to the textarea
        $this.height($hDiv.height());
    };
    
    var init = function(){
        var $txt = $('textarea[autoHeight]');
        
        // dynamically add the hidden div
        $hDiv = $('div#__autoHeight');
        if($hDiv.length === 0){
            $hDiv = $('<div id="__autoHeight" style="display:none;word-wrap: break-word;padding: 3px;"></div>');
            $('body').append($hDiv);
        }
        
        $txt.css('overflow', 'hidden');
        $txt.each(function(idx,item){
            resize.call(item);
        });
        
        // capture all events
        $txt.on('change keyup keydown paste', function(){
            resize.call(this);
        });
    };
    
    init();
}


applyAutoSize();

Open in new window


Again, sorry for the delay.

Cheers!
Alex
Al230762Author Commented:
We resolved the solution ourselves.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.