augusto.pellis Posted March 27, 2020 Share Posted March 27, 2020 Good morning, I need suggestion to solve my problem. In the testcase attached I've got a svg image embedded in a hmtframe. I put the svg source also in a label at the center of the form. I would like the svg to draw entirely within its parent and most important to resize accordingly to the user resizing the browser window. Any suggestions? Thank you and stay safe. Augusto TestCaseImageResizing.zip Quote Link to comment Share on other sites More sharing options...
augusto.pellis Posted March 30, 2020 Author Share Posted March 30, 2020 Hi everybody. From the example above, would it be possible to redraw the svg into the htmlframe when the browser window is resized? I guess to reassign svg's viewBox accordingly to the new dimension of its container. is it doable? Thank you Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 30, 2020 Share Posted March 30, 2020 3 hours ago, augusto.pellis said: Hi everybody. From the example above, would it be possible to redraw the svg into the htmlframe when the browser window is resized? I guess to reassign svg's viewBox accordingly to the new dimension of its container. is it doable? Hi, One possible solution I think. UniHTMLFrame1.ClientEvents.ExtEvents -> function afterupdatehtml(sender, eOpts) { if (sender.getEl().down('svg')) { sender.getEl().down('svg').el.dom.setAttribute('width', sender.getWidth()+'px'); sender.getEl().down('svg').el.dom.setAttribute('height', sender.getHeight()+'px'); } } UniHTMLFrame1.ClientEvents.ExtEvents -> function resize(sender, width, height, oldWidth, oldHeight, eOpts) { if (sender.getEl().down('svg')) { sender.getEl().down('svg').el.dom.setAttribute('width', width+'px'); sender.getEl().down('svg').el.dom.setAttribute('height', height+'px'); } } 2 Quote Link to comment Share on other sites More sharing options...
augusto.pellis Posted March 31, 2020 Author Share Posted March 31, 2020 That was it! P e r f e c t. Thanks for your invaluable help in these dire times! Respect. Augusto 1 Quote Link to comment Share on other sites More sharing options...
augusto.pellis Posted March 31, 2020 Author Share Posted March 31, 2020 About this topic I have a strange behaviour. If I set 4 copied/pasted panels in a container hbox'ed (Imean the same exact panel with same html, ext events) only the first one gets resized correctly. What do I wrong this time? :-( I attach screenshot of the container with the four panels in a row. Mr. Sherzod I need your advice, again! Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 31, 2020 Share Posted March 31, 2020 Can you make a simple testcase for reproduce!? Quote Link to comment Share on other sites More sharing options...
augusto.pellis Posted March 31, 2020 Author Share Posted March 31, 2020 By creating the test case I've been using a generic svg and it works as expected. By using the svg's my designer created, then the problem arise. I guess it's something about the svg elements, then. I will contact the svg designer, then! Thank you!!! Quote Link to comment Share on other sites More sharing options...
augusto.pellis Posted March 31, 2020 Author Share Posted March 31, 2020 If interesting for anyone, the issue was the SVG having the same field id set with the same value. That created the not resizing issue. Augusto Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 31, 2020 Share Posted March 31, 2020 1 hour ago, augusto.pellis said: If interesting for anyone, the issue was the SVG having the same field id set with the same value. That created the not resizing issue. Yes. So is everything working as it should? Quote Link to comment Share on other sites More sharing options...
augusto.pellis Posted March 31, 2020 Author Share Posted March 31, 2020 Absolutely! Thank you! 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.