I'm currently working on an Angular project that involves components nested within other components. My goal is to create a popup component that maintains the same size and position, regardless of where it's triggered from.
One suggestion I received was to use Bootstrap modals, but when trying to implement this in Angular, I encountered a specific issue. While that particular problem may be resolved, the challenge of a div breaking out of its containing div remains.
I've explored various solutions for this issue, but none seem applicable when the precise page position is unknown.
Essentially, I'm seeking a way to have a div with attributes resembling an absolutely positioned div directly in the HTML. Here's an example of what I mean:
<html>
<body>
<div class="absolute_div" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
</div>
<div class="some_content" style="position: relative; height: xx; width: xx">
<div class="target_div_to_break_out" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
</div>
</div>
</body>
</html>
I aim to give the target_div_to_break_out container the same properties as the absolute_div, but I'm struggling to find a solution.
In my actual scenario, there are
<app-popup></app-popup>Given that I'm using Angular, a TypeScript/javascript solution would be greatly appreciated if achieving this in CSS proves challenging.
Ultimately, I want a containing div to occupy 80% of the whole page, irrespective of its placement within other divs.