Skip to main content
1-Visitor
July 20, 2016
Solved

is there any chance to set a widget: width : 80% and height : 300px?

  • July 20, 2016
  • 6 replies
  • 4579 views

Hello everyone , is there any chance to set a widget like this:

width : 80%

height : 300px

Thanks in advance!

Best answer by CarlesColl

Hi Hyman,

This kind of web page can't be build with standard TW Mashups, the only scrollable way it's with Repeaters or Dashboards, but you won't get closer to this kind of web page.

You always can build your own web page ( for instance with Bootstrap ) which calls TW REST API, but then your IoT App development won't be as fast as been done with Mashups.

Best Regards,

Carles

6 replies

5-Regular Member
July 20, 2016

Hi,

It is not possible to set this directly. First of all, in regards to the width, 80% of what? The Layout containing the widget?

As a suggestion for this, You can use a vertical Layout with either a header and a footer. For these, you can setup a static height of 300 px. Further on, you divide them with another layout (horizontal) with two columns and one of the columns you make it 80% (the other will be 20%). Therefore the widget you will add in the 80% column (it needs to be a responsive widget), will take up 80% of the width of the page and will be forced to have a height of 300 px.

I hope this workaround helps you with your scenario.

Costin

丽张_011-VisitorAuthor
1-Visitor
July 21, 2016

Thanks for your suggestion,but maybe it's not what I want. If I use this way, I can't slidedown the page as a whole,and I with I could do something just like this:

<table width="80%" height="300px" > ...... </table>

we can achieve that in html5 code.

I wish the widget could work in panel,for example, when the  width of panel is 400px,then the widget's width is 320px,after I change the width of panel to 1000px,the widget's width become 800px automatically.

Is there any way?

Thanks.

hyman

1-Visitor
July 21, 2016

I think they behavior you're describing is provided by a Layout instead of a Panel. Use three columns, setting the first and third to 10%, leaving the middle column with 80%.