Resize a HTML component

Discussion Ask a question
,
1

Hi

Is there any possibility to resize a HTML component to the browser’s size via coding?
If not possible to resize to the browser’s size, at least the possibility to resize the HTML component to a defined width and length.

Thanks in advance
Mickael

1 Like
2

Hi Mickael,

You can’t change the size of the HtmlComponent programmatically. You can however adjust the size: click on the HtmlComponent and drag the resize handles to whatever width and height you want.

You could get “fancy” by using different HtmlComponents on the page, and then using wix-window.formFactor or wix-window.WindowSizeInfo select the appropriate HtmlComponent that fits the current form factor (mobile or desktop) or size. To be honest, I think this approach is really way too much of a headache to consider, but my brain just came up with it so I thought I’d humor my brain.

Have fun,

Yisrael

3

Hi Yisrael

Thanks for your answer.
My real problem is that I adjusted the size of the HTML component with the mouse to make it bigger to a size that is OK and I use the expand and collapse function to show or hide it programmatically .
Problem is when i work on the editor in graphical mode, this HTML component is now displayed all over the editor and the other components and this is not convenient. Any idea how to solve this ?

Cheers,
Mickael

4

Hi Mickael,

Sorry, can’t think of anything convenient. Maybe just “push” it out of the way while you’re working and then put it back when you’re done? Perhaps someone else has and idea or two?

Yisrael

5

Hi Yisrael

I just read an article on the light box component. It seems I can achieve what I want with this component. I will try

Cheers
Mickael

6

Hey Mickael,

I’ve never tried an HtmlComponent in a LightBox, but then again, I’ve never tried fruit-flavored beers.

Let me know how it goes. I’m interested to hear if you succeed, and I also wouldn’t mind learning something interesting as well.

Have fun,

Yisrael

7

Hello,

Any news regarding this features? It would be realyl useful and I do not understand why it is blocked for html components…

Thanks

1 Like
8

Responsive is now a must. What are the motivations to restrict this feature?

1 Like
9

I want to set the size of a line relative to a value in the DB. I had expected to set the maximal size in the editor and then grammatically downsize it in a percentage relative to that number.
E.g.
lineMaxSize = 200px
value = 9 (max 10)

I’d expect to be able to do something like:
$item(‘#line’).size.width = Math.floor($item(‘#line’).size.width * itemData.size/10);

Reading this entry, I suppose this is not possible, or is it?

The other option will be to change the style and split it in N elements showing those < value.
Any other Ideas?

1 Like
10

You can’t change the size of the HtmlComponent programmatically.

11

@yisrael-wix Why not? That is crazy you dont offer that or a design flaw in the designer from the start.

3 Likes
12

@info59086 Lots of technical reasons. The developers are always working hard on improvements, so feel free to post a Feature Request .

13

Coming back to this because I have the exact same problem. Is it fixed now? Can we change the width and height of an element with velo?

I have an iFrame that contains a chatbot but the size of the open chat covers certain buttons and they become unclickable. If I could increase the size of this iFrame when I click the little chat icon that would solve my problem. If anyone has ideas I would appreciate, thank you

14

Nope! It is still NOT-POSSIBLE to change size of HTML-COMPONENT.

Like Yisrael already mentioned → you can generate different-sized components on your page and hide them.

Then using wix.com/velo/reference/wix-window/getboundingrect
to detect current window-size and running an if-else-query to determine which of your hidden HTML-Components you want to show, regarding the resultet window-size.

Also you could try to use a → MultiStateBox additionaly, if it is compatible with an HTM-Component.

Another possible option could be to set the size of the HTML-Component to page-max, covering the whole page, but setting up style-options inside HTML-Component using for example CSS, JS +HTML-CODE.
Now you would be able to set visible and invisible area of your HTML-Component dynamicaly —> JUST AN IDEA!

15

Thank you for responding to the new comment @russian-dima I am going to close this thread as it is from 2018. @fsurrador if you would like to open a new question/thread should this answer not suffice, please do so.

2 Likes