Can't change height using AngularJS

Question

I'm trying to change the height of a textarea using AngularJS within a directive. I add an attribute auto-resize to my textarea and have the directive defined as:

app.directive('autoResize',function(){
return {
            restrict: 'A',
            //scope: {},
            replace: false,
            link: function(scope, element, attrs) {
                    element.css({
                        'overflow': 'hidden',
                        'color': 'red',
                        'height': '50px'
                    });
                }

            }
        }

The color and overflow styles are implemented onto the textarea, however the height of the text-area does not go to 50px.

Any help is appreciated.

may be textarea is displayed inline, set display to block and see what if it works, or try with !important... — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jun 24, 2014 at 4:23
This code works fine (see plunker). Perhaps there is some other problem elsewhere? Are there other directives or css affecting the textarea? — jgawrych
– jgawrych, Commented Jun 24, 2014 at 5:04

benshope · Accepted Answer · 2016-07-15 23:52:44Z

This directive might do what you're looking for :)

Here is a codepen showing it working: https://codepen.io/benshope/pen/xOPvpm

app.directive('expandingTextarea', function () {
    return {
        restrict: 'A',
        controller: function ($scope, $element, $attrs, $timeout) {
            $element.css('min-height', '0');
            $element.css('resize', 'none');
            $element.css('overflow-y', 'hidden');
            setHeight(0);
            $timeout(setHeightToScrollHeight);

            function setHeight(height) {
                $element.css('height', height + 'px');
                $element.css('max-height', height + 'px');
            }

            function setHeightToScrollHeight() {
                setHeight(0);
                var scrollHeight = angular.element($element)[0]
                  .scrollHeight;
                if (scrollHeight !== undefined) {
                    setHeight(scrollHeight);
                }
            }

            $scope.$watch(function () {
                return angular.element($element)[0].value;
            }, setHeightToScrollHeight);
        }
    };
});

ricick · Accepted Answer · 2014-06-24 04:13:41Z

0

you should set the rows attribute on a textarea rather than changing the height through css.

app.directive('autoResize',function(){
return {
            restrict: 'A',
            //scope: {},
            replace: false,
            link: function(scope, element, attrs) {
                    element.css({
                        'overflow': 'hidden',
                        'color': 'red'
                    });
                    element.attr("rows", 5);
                }

            }
        }

http://www.w3schools.com/tags/att_textarea_rows.asp

answered Jun 24, 2014 at 4:13

ricick

5,7763 gold badges29 silver badges37 bronze badges

Comments

German Blanco · Accepted Answer · 2014-08-02 20:26:38Z

0

You must to use 'style' for manipulation of css attributes at the DOM level instead 'css()'. You can use the '.css()' method when you are using jQuery. Try this in your directive.

element.style.height = '50px';
element.style.overflow = 'hidden';
element.style.color = 'red';

See reference here

answered Aug 2, 2014 at 20:26

German Blanco

8166 silver badges9 bronze badges

Collectives™ on Stack Overflow

Can't change height using AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related