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

Question

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 :)

Can you post a runnable snippet or a plunker? That would really help — Srijith, Aug 05 '16 at 06:41

score 0 · Accepted Answer · answered Aug 05 '16 at 07:08

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;

Thanks! I missed to make the parent div's position to relative. — Rendy, Aug 05 '16 at 07:24

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

1 Answers1