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

Community Tip - Visit the PTCooler (the community lounge) to get to know your fellow community members and check out some of Dale's Friday Humor posts! X

Web frame widget border

jonasf
10-Marble

Web frame widget border

Hi,

 

I was wondering regarding web frames. I have attached a picture of a static mashup and a web frame.

There is a grey border around the web frame which in this case shows a .jpg of the google logo. This is also the situation in responsive mashup with layouts.

 

My question is. Is it possible to get rid of the grey border? - If not, where do I propose a change/improvement?

webframeframequestion.png

 

1 ACCEPTED SOLUTION

Accepted Solutions
slangley
23-Emerald II
(To:slangley)

Hi @jonasf.

 

We created myWebframeBorderClass using the custom CSS editor and applied this class to the widget:

 

.myWebframeBorderClass .widget-webframe-container {
    border: 5px solid #9a9fa6;
}

 

Give this a try and let us know if you still have questions.

 

Regards.

 

--Sharon

View solution in original post

6 REPLIES 6
slangley
23-Emerald II
(To:jonasf)

Hi @jonasf.

 

Is your screenshot from a laptop/desktop browser?  What version of ThingWorx are you running?  What selections did you make when creating the mashup?

 

Could you please export the mashup and post it here?

 

Regards.

 

--Sharon

jonasf
10-Marble
(To:slangley)

Hello,

 

Currently using ThingWorx 8.4.2-b2151 and the screenshot is taken on a desktop browser in the view mashup window. The settings are found below.

As mentioned earlier the mashup is a static frame but the same behaviour exists with a responsive mashup where layouts are used.

2019-05-13_13-08-31.png

 

slangley
23-Emerald II
(To:slangley)

Hi @jonasf.

 

You can use the Custom CSS editor for designing the border appropriate for your application.  Note there is also a tutorial available.

 

The border for the webframe widget is 1 px by default.  You should be able to change this to 0 or change the color.

 

If you run into issues, please provide your CSS for our review.

 

Regards.

 

--Sharon

jonasf
10-Marble
(To:slangley)

Thank you for your reply. 

 

After reviewing the tutorials I was able to use the Custom CSS to change the behavior/look of a button. Although after trying this on a web frame with the following code:

 

.widget-fieldset .widget-webframe {
    border-color: red;
    border-width: 5px;    
}

It does not affect the web frame widget the slightest.

What is the correct syntax?

 

Thank you

slangley
23-Emerald II
(To:slangley)

Hi @jonasf.

 

We created myWebframeBorderClass using the custom CSS editor and applied this class to the widget:

 

.myWebframeBorderClass .widget-webframe-container {
    border: 5px solid #9a9fa6;
}

 

Give this a try and let us know if you still have questions.

 

Regards.

 

--Sharon

jonasf
10-Marble
(To:slangley)

Thank you, that definitely works!

Top Tags