cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Container border

Highlighted
Alexandrite

Container border

Hi,

I'd like to avoid those grey spaces of container.

mnaeem_0-1579086698400.png

It's showing this kind of result.

mnaeem_1-1579086738072.png

In this mashup all the cells are mashups.

22 REPLIES 22
Highlighted

Re: Container border

Hi,

 

Please can you attach export of entities to reproduce in internal environment?

Probably custom CSS can help here.

 

Thanks,

Raluca Edu

Highlighted

Re: Container border

Hi @raluca_edu ,

Thank you for your quick response.

You can find exported mashup in attachment.

Highlighted

Re: Container border

Can you please attach style used in containers? I cannot see the mashup with all the formatting.

 

Thanks,

Raluca Edu

Highlighted

Re: Container border

Thank uo @raluca_edu 

Yes I have attached. It is just the style with border line.

 

Highlighted

Re: Container border

Hi,

 

I tried to play around with the borders in the attached mashup.

1. Doesn't matter the grey space in Designer mode, that spaces are only to show you where the borders are added.

2. You added borders to every existing container in the mashup and this cause the borders to overlap and that's why you see inconsistent layout of the mashup.

My recommendation is to add borders only to the outer containers and not to the internal ones (e.g. the ones that are containing widgets). In the attached mashup, I have played with the Style of different containers, some of them have "DefaultContainerStyle" instead of Container style.

Although the attached mashup is not perfect, I hope the above explanations will help you to arrange it as per your requirements.

 

Another hint that you could use: instead of using borders , you can create a container with height 1px to separate the contents in the mashup (see Middle Container mashup attached).

 

Hope it helps,

Raluca Edu

 

Highlighted

Re: Container border

Thank You @raluca_edu ,

It was really helpful.

I also want to change the background of the container depending on the property value which has 0 or 1.

In the following example I'm using a label widget inside the container and wrote the name manually. I'd like to change the color of the entire container green or red depending on 1 or 0 value of the property, while keep the manually written name.

mnaeem_0-1579532708181.png

 

Highlighted

Re: Container border

Hi,

 

I didn't find any solution to your question. You can change background to any widget that has State Formatting, but the containers cannot be changed with State Formatting, only custom CSS.

Maybe someone else has an idea about this.

 

Thanks,

Raluca Edu

Highlighted

Re: Container border

Hi @raluca_edu ,

Yes I understand state formatting. But I'd like to display the text written manually and changing only its background colour.

 

Thank You!

Naeem

Highlighted

Re: Container border

Hi @mnaeem.

 

As @raluca_edu stated, you would need to use CSS.  Here is a link to the Help Center.

 

Regards.

 

--Sharon

Highlighted

Re: Container border

Hi @slangley ,

mnaeem_1-1580295007709.png

In the above picture there are 1st container has a label written manually, 2nd container has value of integer type (quantity), 3rd container has value of sting type (hh:mm:ss)

2, 3 containers are binded to property.

I'd like to do one the followings.

1- changing the colour of the value containers when their values are changing and the values start from 0 and 00:00:00, once incremented will not come back to initial values.

2- Bind another property which has 0 or 1 to value containers (I think not possible to bind two properties to one value widget) or label container and changing the colour.

 

 

Instead using the following to solve the issue, but one of above solution will be highly appreciated.

mnaeem_2-1580295645100.png

Thank You!

Highlighted

Re: Container border

Hi @mnaeem.

 

Please check out this tutorial on CSS for addressing your needs.

 

Regards.

 

--Sharon

Highlighted

Re: Container border

Hi @mnaeem.

 

If one of the previous posts answered your question, please mark the appropriate one as the Accepted Solution.  Or if you found your own solution, please feel free to post it here and mark that as the Accepted Solution.

 

Regards.

 

--Sharon

Highlighted

Re: Container border

Let me explain in another way, may be we have a solution.

I'm using GetProperties of a timer thing and bounded one property to the value display thing as follows

mnaeem_0-1582728174437.png

Is it possible to change the the state based on a property different from the bounded one (both of these properties are taken from GetProperties of a single time thing).

I've tried but didn't work.

mnaeem_1-1582728503034.png

 

Instead I've tried using infotable as a result of a service will return only one row) and saved both properties in two different columns of the table and bounded one column to the value display widget and changed the state based on the second column and it worked to change the background.

 

 

Highlighted

Re: Container border

Hi @mnaeem.

 

Are you saying that you have resolved your issue?  If you still need assistance, please let us know.

 

Regards.

 

--Sharon

Highlighted

Re: Container border

 Hi @slangley,

No I was trying to explain the problem in another way, I'm not sure is it possible to apply css in that way as I have explained in the last message.

 

Thank You!

Muhammad Naeem

Highlighted

Re: Container border

Hi @mnaeem.

 

CSS is the recommended solution to what you need to achieve.  Have you reviewed the examples available in the tutorial?  If you can check this out, we can provide some assistance to specific questions.

 

Regards.

 

--Sharon

Highlighted

Re: Container border

Hi @slangley ,

Not able to find FileRepositoryHomeMashup extension in the marketplace as a prerequisite of the tutorial.

 

Thank You!

Naeem 

Re: Container border

Hi @mnaeem.

 

Thank you for calling that to my attention.  I am following up.

 

Regards.

 

--Sharon

Highlighted

Re: Container border

Hi @mnaeem.

 

The tutorial is being corrected to coincide with the 8.5.5 release currently targeted for late April.

 

Regards.

 

--Sharon

Highlighted

Re: Container border

Hi @mnaeem.

 

The Custom CSS Tutorial has been updated.  Please check it out and let us know if you have further issues.

 

Regards.

 

--Sharon

Highlighted

Re: Container border

Hi @mnaeem.

 

Please let us know if after reviewing the updated tutorial, if questions still exist.  If you have solved your issue, we would be most appreciative if your would post your solution here and mark it as the Accepted Solution for the benefit of others on the community.

 

Regards.

 

--Sharon

Highlighted

Re: Container border

Hi @slangley ,

Thank you for following the issue and sorry for the late reply, I was busy in another project.
Actually, this requirement is not requested anymore. I'll give it a try as soon as I have the time.

 

Thank you!

Muhammad Naeem Akhtar

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum!