Panels alignment and svg resizing

[augusto.pellis]

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

[augusto.pellis]

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

[Sherzod]

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');
    }
}

 

[augusto.pellis]

That was it! P e r f e c t. Thanks for your invaluable help in these dire times! Respect.

Augusto

[augusto.pellis]

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!

[Sherzod]

Can you make a simple testcase for reproduce!? 

[augusto.pellis]

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!!!

[augusto.pellis]

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

[Sherzod]

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?

[augusto.pellis]

Absolutely! Thank you!