Search code examples
angularjsangularjs-material

How to develop this layout in AngularJS and/or AngularJS Material?

I have following code:

div
    div Test1
    div(flex)
    div 12
    div(ng-show=“someCondition”, class="triangleLeft")

If the triangle is shown, it will push the 12 to the left. Is it able to hide/show the triangle without pushing the 12 to the left using AngularJS and/or AngularJS Material?

Here is my Plunk :)

Solution

  • Here is a forked version of your plunk

    The parent div should be relatively positioned like this

    position: relative;

    The triangle or the chevron must be absolutely positioned and should be placed at right: 0px like this

    position: absolute;
right: 0px;

    Now you can see that the triangle does not push the text 12to the left. But you can see that it hides the text. You could add a right/left padding to the parent div like below so it looks better

     padding: 0 10px;