Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Set databound repeater textbox height at runtime based on text length

Posted on 2014-01-06
6
566 Views
Last Modified: 2014-04-12
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?
0
Comment
Question by:Al230762
  • 4
  • 2
6 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39761675
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...
0
 

Author Comment

by:Al230762
ID: 39761806
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.
0
 

Author Comment

by:Al230762
ID: 39773439
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?
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Accepted Solution

by:
Al230762 earned 0 total points
ID: 39985356
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>
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39985608
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
0
 

Author Closing Comment

by:Al230762
ID: 39995810
We resolved the solution ourselves.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question