field height aka rows?

asked on February 15, 2018 • Show version history

I have an issue where the content of a textarea is overlapping outside of the textarea when saving to repository. It appears that the text is overflowing where the field height is defined. I am guessing this is the 'rows' element?

What is the rows element? it isn't an attribute? I would like to manipulate this and set it to match my number of lines if it exceeds the original setting (in the designer). In the above case, the original setting is 25. Here is the javascript I am using to determine the number of rows:

  $('.textarea').on('change keyup', function(){
  	var text = $(this).find('textarea').val();
	var lines = text.split(/\r|\r\n|\n/);
	var count = lines.length;
	console.log(count);
  });

How can I access the rows and change it?

It is surprising that when saving to the repository the preview does not match what is saved. Why is that?

Thanks!

0 0

replied on February 15, 2018 • Show version history

Disregard, I wasn't selecting properly. This worked:

$('#q5 .cf-xlarge').attr('rows', 10);

Of course, I will swap the 10 with a variable. I am still curious about the saving issue, though.

Thanks

1 0

replied on February 15, 2018

Chris would you mind sharing what your final script looks like? Thanks!

1 0

replied on February 15, 2018 • Show version history

I have found that finding the number of rows is not the way to go. This only returns how many times <ENTER> has been pressed. A better way is to divide (CSS) height by (CSS) line-height.

I still can't get my form to stop overlapping though.

Here is what I have so far:

//Set narrative textarea to auto expand when text exceeds original size  
  $('#q5 textarea').on( 'change keyup paste cut', function (){			
    var scrlHght = $(this).get(0).scrollHeight;
    if(scrlHght>400){
    $(this).height(0).height(this.scrollHeight);
    var lineHeight = $(this).css('line-height');
    var boxHeight = $(this).css('height');
    var calcRows =  Math.round(parseInt(boxHeight)/parseInt(lineHeight)) 
      console.log("line height: "+lineHeight);
      console.log("height: "+boxHeight);
      console.log("calc rows: "+calcRows);
    $(this).attr('rows', calcRows); 
    }
    else{
      return;
    }
	}).find( 'textarea' ).change();

EDIT:

I deleted my custom CSS and ran it again. It worked perfectly with no overlapping text. Not exactly sure what the problematic CSS is yet, but I will find it.

The fact remains that the "submit/thank you" does not match what is saved to the repository.

0 0

Question

Question

Replies

Sign in to reply to this post.