Skip to main content
D
drieder1-Visitor
1-Visitor
June 19, 2018
Solved

dynamic button size in Mashups

  • June 19, 2018
  • 1 reply
  • 4247 views

Hello everyone,

 

I would like to have buttons always resized to their container size (note: I will use these mashups on Smartphone and Desktop PCs)

For that I had the following in Mind:

designTime.png

Basically I want the Button be the arrows. The arrows here are Image Widgets which dont need an extra panel and can be placed directly on a responsive panel. The button on the other hand needs a panel.

 

So even though I have selected "Expand to Container" for the button, the result looks like this:

runTime.png

The button just resized to Container size during designTime and kept the size eventhough the container size changed. The image Widgets look exactly like I want to but are missing the button functionality.

 

Is there a way to have the button being dynamically resized accordingly to its container size? Otherwise feel free to make other suggestions how to achiev the functionality with this layout.

 

Best Regards,

Dominik

Best answer by vxavier

Hi Dominik,

 

My suggest for this is, put the images as the background for layout. Divide your layout to be organized the way you want to and, in each box, put a background image in the Style property and set  BGImageSize property to contain. Then you use the value display(because it is responsive also) with invisible Style to apply the clicked event.

 

image2.png

 

Hope it works for you,

 

Thanks,
Vinícius Xavier.

1 reply

Z
zyuan15-Regular Member
5-Regular Member
June 20, 2018

Hello Sir,

 

If a clickable Arrow image which can work as a Button is what you want, you can use the ValueDisplay widget directly.

1. It is responsive, so it can change based on your container size

2. It can show Images, either an Arrow image or a Button image

3, It has the clicked event, which helps it work exactly like a Button 

D
drieder1-VisitorAuthor
1-Visitor
June 20, 2018

Hello @zyuan1,

 

thank you for your reply, I just tried this out. My result looks like this:

valueDisplay.png

The left arrow uses the value display. The problem is, the image does not scale to the container size like in the other arrows.

 

I setted the image scaling to width. When setted to height or none the arrow is not visible at all. Any suggestions on that?

 

Best Regards,

Dominik

Z
zyuan15-Regular Member
5-Regular Member
June 20, 2018

The Image or ValueDisplay widget in ThingWorx is based on Pixel image rather than vector image, and I forgot about that.  I tried to upload vector image ending with .svg, .cgm and .idr, but they don't work.

 

I can't make the Arrow image grow as big, but you can make it appear in the center when size changed, will it work for you?

Terms & ConditionsCookie settingsAccessibility statement