Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In discussion #159 I had the following problem:
I'm using an external component (in this case a calendar component) that contains a button group to switch views. I'm not able to set the
tourAnchor
-Directive on this button group (as the code is not in my domain).My first solution was to create a
div
and position it absolutely over this button group and use thetourAnchor
-Directive on this newdiv
. If the layout changed somehow and these buttons were not in the same place anymore or changed in dimension, the absolutely positioneddiv
was wrong (especially visible, if backdrop is enabled).So instead of positioning this "artificial" tourAnchor-DIV I've created a directive which receives a CSS selector. This directive finds the element I want to overlay, gets it's bounding rect and sets the
div
's position and dimensions accordingly.In this branch you can see a demo of the directive. As a test I try to highlight the label of the button instead of the whole button (to showcase an element, that is not in my domain but in angular material's).
Additionally theres an Input for padding (which uses the technique from your docs to set padding and remove margin).