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?
Solved! Go to Solution.
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
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
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.
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
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
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
Thank you, that definitely works!