0

I have a parent div containing child divs (child divs having transform property), so I save this whole HTML content and then render it again in a different page. On rendering the content in different page the size of the parent div is enlarged, so the issue is the translate values remain same. How can I make the translate positions of the child divs relative to the parent div.

I had referred to some Stack Overflow answers.

From Stack Overflow answers, what I understood is if divs will not help then svg and g svg element might help; I am open to changing the structure of the html content.

The HTML content which I would save and render in other screen

<div _ngcontent-c5="" appdropzone="" appmovablearea="" class="dropzone" 
   id="toget" ng-reflect-ng-style="[object Object]"
   style="width: 100%;
    background-image: url(&quot;data:image/jpeg;base64,/9j/9H/==&quot;); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; 
    border: 1px solid black;
    height: 340px;">

    <!--bindings={
    "ng-reflect-ng-for-of": ""
     }-->

        <div _ngcontent-c5="" appmovable="" class="box draggable movable 
           ng-star-inserted" ng-reflect-ng-style="[object Object]" 
           touch-action="none" style="transform: translateX(176.8%) 
           translateY(156%);">  mno
        </div>

         <div _ngcontent-c5="" appmovable="" class="box draggable movable 
            ng-star-inserted" ng-reflect-ng-style="[object Object]"
            touch-action="none" style="transform: translateX(276%) 
            translateY(180.8%);">  pqr
         </div>

         <div _ngcontent-c5="" appmovable="" class="box draggable movable 
            ng-star-inserted" ng-reflect-ng-style="[object Object]"
            touch-action="none" style="transform: translateX(361.6%) 
            translateY(62.4%);">  beit
         </div>

     <!--bindings={
     "ng-reflect-ng-for-of": ""
     }-->

 </div>

Additional CSS

On parent

.dropzone {
 padding: 20px;
 margin: 20px 0;
 background: lightgray;
 min-height: 200px;
}

On child

.box {
 background: #BADA55;
 border: 1px solid black;
 padding: 10px 20px;
 display: inline-block;
 }

And rest styles are inline in the above html code

I checked the transform property in dom it remains same whether I increase or decrease the size of the parent div. The positions of the child elements should change wrt to parent container size [Note I also know the parent size container when it will be rendered in different page]

  ______________________         ______________________________________
 |           _______    |        | after being enlarged            ___|__     
 |           |     |    |        |                                |      |                   
 |           |_____|    |        |                                |______|
 |                      |        |                                    |
 |                      |        |                                    |
 |______________________|        |____________________________________|

So the position of the child div got changed when the parent div got enlarged.

halfer
  • 19,824
  • 17
  • 99
  • 186
Enthu
  • 512
  • 2
  • 13
  • 38
  • When you say you are "rendering the content", does that mean you're copying the exact HTML code and pasting it in a new view? If so, that's very unlikely to be the right approach. – Will Alexander Aug 11 '19 at 14:09
  • Yeah the same html content – Enthu Aug 11 '19 at 14:10
  • Why that approach? – Will Alexander Aug 11 '19 at 14:11
  • Because I have to display as it is, nothing specific, whatever was uploaded I just get that html content from backend and display it, and the issue is when the parent div is enlarged in size the child elements don't maintain posiitons wrt to parent, if you want to suggest new approach then I can try – Enthu Aug 11 '19 at 14:12
  • But before loading itself cant I make the child divs relative wrt to parent div , so that when they are rendered in large size the child elements also scale accordingly wrt to their positions – Enthu Aug 11 '19 at 14:15
  • The thing is, you're loading content which already contains attributes generated by Angular, and that is certainly not good practice. Apart from that, `transform` is relative to the size of the element being transformed, not its parent. You could always try to work out offsets in the original layout and transmit those to the new component, but I think your whole approach needs revisiting. – Will Alexander Aug 11 '19 at 14:31
  • ok so you are telling to generate new html content there as well instead of it being an image or something , am I right and please suggest this calculation of offset in the original layout and making it relative wrt to its parent when rendered in diff page – Enthu Aug 11 '19 at 14:36
  • I've pointed you in the direction I would suggest (although I still don't really understand what exactly you are trying to achieve), so now it's down to you to do the research and try things. You can always submit a new question if you can't figure it out. If you do, please try to be clearer in exactly what it is you are trying to achieve. – Will Alexander Aug 11 '19 at 14:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197794/discussion-between-enthu-and-will-alexander). – Enthu Aug 11 '19 at 14:41
  • But I was thinking is it not possible to do this only with css – Enthu Aug 11 '19 at 14:44
  • I think it is better for me to load it as it is reason being I am loading many of them ,and if I try to take values and generate html then it might cause performance issue, so if I can find a css way to maintain the positioning it would be great – Enthu Aug 11 '19 at 15:33
  • I can't see where any performance issues would arise. The approach you're using is messy, hacky, and prone to bugs (and even, perhaps, code injection attacks). I seriously suggest you reconsider. – Will Alexander Aug 11 '19 at 15:47

0 Answers0