Adjusting the width of a nested Angular custom directive within an *ngIf statement to an absolute value

Question

Adjusting the width of a nested Angular custom directive within an *ngIf statement to an absolute value

I'm struggling with a custom angular directive that I only want to display conditionally using ng-if. The directive contains HTML elements, one of which is positioned absolutely.

My goal is to make the absolute element's width match the root width of the directive. However, I am unable to change the display of the directive's root to relative.

How do you suggest I go about accomplishing this task?

UPDATE: To clarify, here is a jsfiddle link - http://jsbin.com/qofolahani/edit?html,css,js,console,output

Keep in mind that in the link function, I have not set the css styling for the element so the width remains at 0, preventing me from adjusting the child div's width accordingly.

javascript html css angularjs

Answer 1

Answer №1

The problem lies in your usage of restrict: E.
Browsers do not bind the getCalculatedStyle method to non-standard DOM entities.

To fix this, change the directive to be used as an attribute:

<div my-dir></div>

Implement the directive like so:

{
    restrict: 'A',
    link : function (scope, element) {
      element.addClass('my-dir');
      element.find('.my-dir-content').width(element.width());
    },
    template: '<div class="my-dir-content"></div>'
}

Alternatively, you can use internal templated divs only.
Setting replace: false can assist with this.

{
  restrict: 'E',
  link : function (scope, element) {
    var o = element.find('.my-dir');
    var i = o.find('.my-dir-content');
    i.width(o.width());
  },
  replace: false,
  template: '<div class="my-dir"><div class="my-dir-content"></div>/div>'
}

Another option is to replace the parent node:

{
  restrict: 'E',
  link : function (scope, element) {
    var i = element.find('.my-dir-content');
    i.width(element.width());
  },
  replace: true,
  template: '<div class="my-dir"><div class="my-dir-content"></div>/div>'
}

JSBin Preview

Bonus Tip:
To update the width on window resize, include this piece of code:

$(window).on('resize', onResize);
function onResize() {
  i.width(o.width());
}
scope.$on('$destroy', function(){
  $(window).off('resize', onResize);
});

Answer 2

The problem lies in your usage of restrict: E.
Browsers do not bind the getCalculatedStyle method to non-standard DOM entities.

To fix this, change the directive to be used as an attribute:

<div my-dir></div>

Implement the directive like so:

{
    restrict: 'A',
    link : function (scope, element) {
      element.addClass('my-dir');
      element.find('.my-dir-content').width(element.width());
    },
    template: '<div class="my-dir-content"></div>'
}

Alternatively, you can use internal templated divs only.
Setting replace: false can assist with this.

{
  restrict: 'E',
  link : function (scope, element) {
    var o = element.find('.my-dir');
    var i = o.find('.my-dir-content');
    i.width(o.width());
  },
  replace: false,
  template: '<div class="my-dir"><div class="my-dir-content"></div>/div>'
}

Another option is to replace the parent node:

{
  restrict: 'E',
  link : function (scope, element) {
    var i = element.find('.my-dir-content');
    i.width(element.width());
  },
  replace: true,
  template: '<div class="my-dir"><div class="my-dir-content"></div>/div>'
}

JSBin Preview

Bonus Tip:
To update the width on window resize, include this piece of code:

$(window).on('resize', onResize);
function onResize() {
  i.width(o.width());
}
scope.$on('$destroy', function(){
  $(window).off('resize', onResize);
});

Answer 3

Answer №2

To apply a css style to the main element of the directive, you should define its position as relative. This can be done with the following code:

custom-directive {
   position: relative;
}

By setting the root html element to position: relative, it allows the inner html elements to be positioned absolutely in relation to the directive.

Next, you can target the inner html element and specify the following styles:

inner-html-element {
    position: absolute;
    width: 100%;
}

Answer 4

To apply a css style to the main element of the directive, you should define its position as relative. This can be done with the following code:

custom-directive {
   position: relative;
}

By setting the root html element to position: relative, it allows the inner html elements to be positioned absolutely in relation to the directive.

Next, you can target the inner html element and specify the following styles:

inner-html-element {
    position: absolute;
    width: 100%;
}

Adjusting the width of a nested Angular custom directive within an *ngIf statement to an absolute value

Answer №1

Answer №2

Similar questions

Requesting for a template literal in TypeScript:

Issue with displaying personalized radio buttons

What is the reason behind fullstack-angular generator utilizing Lo-Dash's merge rather than document.set?

Within an ng-repeat loop, I'm evaluating whether comparing numbers would be quicker than comparing strings

Steps to extract a hash from a document's URL

Tips for exchanging divs in a mobile view using CSS

The term "Ext" has not been recognized or defined

The grid elements are not in perfect alignment

Sending an ajax request to submit the results of jQuery.each loop

Align the label vertically with the corresponding input field

I am having trouble getting the hamburger menu to open on my website with Bootstrap. Can anyone help me troubleshoot this issue and find

Difficulty in displaying Font Awesome Unicode on website

Implementing JavaScript to showcase a list extracted from an API dataset

Transform JavaScript object into desired structure

Enhance the interoperability of Babel with Express.js by steering clear of relative

Displaying a video in fullscreen on a webpage

When activating SSR in the Urql client, I encountered the following unexpected error: Server HTML should not include an <a> within a <div>

The form submission did not yield any results

What is the best way to introduce a delay in the JSZip API loading process?

Universal PM2 Configuration Settings in JSON Format