Setting height of textarea, view scroll and cloning issue

Hi there,

I am making an app that require a textarea that is pretty height (almost the height of the view).
I have some problem with that:

  • when focusing on the last line of my textarea (let’s say the textarea is full of text) and start edit, the view scroll automatically back to the top of the textarea.

  • then, trying to scroll down to the last line of the textarea is very difficult (sometimes works / sometimes don’t)
    The only way scroll “most of the time” works is using the scrollbar on the left.

  • the textarea clone also resize to 2/3 lines height (hidding the rest of the textarea zone). I managed to fix that by adding a line in the cloneFocusedInput function

    clonedInput.style.height = focusInput.style.height;

My template look like this:

	<div class="list">
		  <label class="item item-input"> 
		    	<input ng-disabled="view.disabled" ng-focus="onFocus()" type="text" placeholder="{{'TITLE_PLACEHOLDER' | translate}}" ng-model="airlineReview.title" ng-change="save('title')">
		  </label>
		  <label class="item item-input item-no-border-bottom">	  	
		    	<textarea full-size ng-disabled="view.disabled" ng-focus="onFocus()"  placeholder="{{'TEXT_PLACEHOLDER' | translate}}" ng-model="airlineReview.text" ng-change="save('text')"></textarea>
		  </label>
	</div> 

and the full-size directive like this:

app.directive('fullSize', function($window) {
	return {
		link: function(scope, element, attrs) {
			var windowHeight = $window.innerHeight;

			windowHeight *= 1.5; // keyboard;
			element[0].style.height = windowHeight+'px';
		}
	}
})

Is there anything I am missing?

Thanks for your help!

2 Likes

Just curious, what version of Ionic are you using? Is it beta4 or the nightly builds?

I just upgraded to beta 4.
If you need more code or info, do not hesitate!
Thanks

Can you try the nightlies, theres always alot of work in there that resolves alot of issues. Also if its using the keyboard, do you have our keyboard plugin install?

I did not have the plugin installed so I installed it.
I am also using the nightly now :smile:

It gets a little better even if the scroll does not react really well when scrolling over the textarea or its clone.
I am wondering, is there a way to disable the automatic scrollTop when starting to edit the textarea?

Do you mean scroll to the top of the view, or to the top of the input?

I think it is scrolling to the top of the textarea (which is really heigh).

In that case, I thinks its default behavior of the ios webview. Also if your text area is really large, you should try using a text area.

    <label class="item-input">
      <textarea rows="20" cols="50">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum tenetur obcaecati temporibus totam fugiat et quae quia quisquam asperiores esse eum ipsum porro officiis reiciendis unde molestias rerum molestiae. Perferendis. 
      </textarea>
    </label>

I am already using a textarea (of course). It is a least of the size of the view.

I found the issue about the scrolling. It is related to

 container.addEventListener('scrollChildIntoView', function(e) {

which force the view and scroll to make sure the component is accessible to the user.
It is working in most case since the input are most of time small.

I added a line of code to disabled this feature:

if (e.detail.target.getAttribute('data-scroll-child-into-view-disabled')) return;

and the code of my textarea:

<textarea data-scroll-child-into-view-disabled="true" full-size></textarea> 

Is that possible to open an issue on that and on the cloneFocusedInput method?

clonedInput.style.height = focusInput.style.height;

I think it is normal to be able to have a large textarea.

Thanks again!

Yeah, theres nothing stopping you from opening an issue. It’s kind of hard to figure out and issue since I don’t have an example of this. Might as well open an issue since the keyboards/scrolling is an ongoing struggle :smile:

i am facing the same issue while typing big email in my contenteditable div …

is this fixed with big text area or div?? or any workaround for scrolling and taping to change caret position.

Im having a similar issue. Im using a directive to update the size of the textarea as it is typed into. Got this working, but then if the page scrolls while the keyboard is open (or as the keyboard opens), the cloned input shows up as only 2 lines providing a flashing effect to the text box. Adding

clonedInput.style.height = focusInput.style.height;

would fix.

I’m having the same issue with the beta 13 and nightly.

Hi,

I also had this problem on a project that I’ve been working on. Basically, I had a textarea that was filling the entire content and if you were to send the app to the background and after that launch it, anything that you were typing in the textarea was not showing up unless you were tapping on the outside and close the keyboard.
My solution was to override the CSS rules associated with cloned inputs that were preventing the input on the actual textarea to show up.

[CSS]:

 
   //Fixes Ionic cloned input issue with textarea that fills the view
   .textarea-screen {
     .cloned-text-input {
       width: 0% !important;
       height: 0% !important;
       display: none !important;

       & + textarea {
        left: 0 !important;
        width: 100% !important;
      }
     }
    }

Also, I’ve namespaced these rules, eg. I had a class .textarea-screen.

[HTML snippet]

<div class="textarea-screen">
    <textarea
           class="note"
           maxlength="{{maxlength}}"
           translate translate-attr-placeholder="{{placeholder}}"
           ng-trim="false"
           ng-model="textinput.value">
    </textarea>
</div>


Hope this will help anyone that faces the same problem!
Happy coding!