one icon in front of another, aligned to right of parent div
one icon in front of another, aligned to right of parent div
I can currently place 2 icons in front of one another, however with position: fixed, I cannot seem to get them justified to the right hand side of my parent div...
position: fixed
div
I have attempted using right: 0, but this seems to justify with respect to the screen rather than div itself. Is there something I'm missing?
right: 0
.settings,
.clear
position: fixed;
// positioning to right?
transition: all .2s cubic-bezier(.4, 0, .2, 1);
.hide
opacity: 0;
transform: rotate(225deg);
<!-- Just for material icon purposes -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="expandPanel" #panel [ngClass]="expanded: isExpanded" style="width: 300px; height: 300px; background: lightgrey;">
<div class="expandButton" (click)="togglePanel()">
<a class="material-icons clear" [ngClass]="hide: isExpanded">clear</a>
<a class="material-icons settings" [ngClass]="hide: !isExpanded">settings</a>
</div>
</div>
1 Answer
1
First position fixed property will position the element relative to view port.
So that is not what you are looking for. To align you child element relative to the parent element first give your parent position relative property and your child a position absolute property. I think this is what you want:
.settings,
.clear
transition: all .2s cubic-bezier(.4, 0, .2, 1);
-webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
-moz-transition: all .2s cubic-bezier(.4, 0, .2, 1);
-ms-transition: all .2s cubic-bezier(.4, 0, .2, 1);
.hide
opacity: 0;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
.expandPanel
position:relative;
.expandButton
position:absolute;
right:0;
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="expandPanel" #panel [ngClass]="expanded: isExpanded" style="width: 300px; height: 300px; background: lightgrey;">
<div class="expandButton" (click)="togglePanel()">
<a class="material-icons clear" [ngClass]="hide: isExpanded">clear</a>
<a class="material-icons settings" [ngClass]="hide: !isExpanded">settings</a>
</div>
</div>
You mean you want your 'expandButton' to be on left and your icons to be placed right relative to this button.
– Surya Neupane
Sep 14 '18 at 7:23
I'd like the button to be on the right hand side of the div that contains it. But the div can be placed anywhere in the page. - Just like in your updated code, but I still would like the icons to be overlapped
– physicsboy
Sep 14 '18 at 7:32
Yes that is what I have done in the above code. You can place the 'expandPanel' div any where you want.
– Surya Neupane
Sep 14 '18 at 7:35
When I click to
Run code snippet, the icons are on the right yes, but they are not on top of each other :-(– physicsboy
Sep 14 '18 at 7:56
Run code snippet
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
This makes sense... How would I alter this to say, if I had the button inside its own div (I have altered my code in the question).
– physicsboy
Sep 14 '18 at 7:14