Is there a way for me to constrain the size of one element (a container) to be only as big as the size of another element (an image)?
Thanks!
Couple of clarifying questions…
Is the other element (image) inside the first element, or just on the page somewhere?
Will the other element (image) always have the same dimensions? or will this be dynamic?
Hey Dorian, it looks like there are a few ways to add columns in weWeb but when I drag in a column element, I get two flexboxe components, one for each column.
Then on the column element that contains the flexbox items, I can set a max hight.
If you know the size of the image, you could just set the height to that height…
This does pose the question, what do you want/expect to happen in a case that the text in the first column is longer than the height of the image? Should it be cut off? overflow out the box or have each element insides position update and squeeze?
I think it is possible to achieve the goal just using flex and its attributes… but I dont full have my head around using flex but I would say that would be the best path to explore and research (google)
Finally, I also think it is possible to write some custom JS that gets the image by ID (you can add an ID in the config) and then save its height to a variable and then use that variable in the max hight settings…
Hope that points you or someone else int he right direction.
1 Like
I managed to have the hight match, in this image the numbers in the first column go to 25, but I had to set overflow hidden…
I think using the flex tools and setting, it is possible to get the elements inside the flexbox to adapt to the restricted height.
Also some articles:
1 Like