Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X
When we went from TWX 8.3.3 to 8.5, one of the many things that broke was the ability to set MINIMUM height of many widgets to 20 px. We were forced to set them to 34 px. For this reason, we chose not to update our mashups to the "NEW" widgets. Then you fixed it so we could set the height to what "we" deemed good for our own apps. Thank you for that.
Today, I started designing a new app for a new customer. I decided to use all NEW widgets, and not the deprecated ones, because you fixed all of the silly design things, right?. Nope. There is still a lot left to be desired. I don't have time to go into all of the problems. So I'm going to focus on three things: Widget Height settings, including borders, Padding settings that can't be modified, and a mind-boggling forced Focus Overlay on input widgets that can't be modified.
The focus of this is the height settings of many widgets. Although I can now set the widget height to 20 px, it now chops off the borders (top and bottom) around my text boxes , text areas, buttons, etc. and clips the text inside ..unless I set them to at least 34 px high.
On top of that, you have some sort of weird, unexpected padding scheme that won't let me take text to the edges of the widgets anymore. It's almost like there is a forced 10-pixel (guessing) inner padding all around the text inside my widgets. Text and borders get clipped all around because widgets now collide with other widgets. To get things to display properly, I have to set Z-Index to get things to overlay each other, and I can't set borders the way I want because they are now having to overlay/underlay other widget borders. I can't override your inner-padding scheme, and it isn't exposed in StyleThemes. I've also tried setting custom CSS classes, but it won't let me override these settings there, either. Values of zero and none aren't allowed, either, even though they are valid values for use inside CSS. Why not???
And another thing I just discovered AND HATE with the "new" input widgets is that you now force a "ptcs-focus-overlay" over any input element that has the focus. The border is too wide, too dark, and I can't override it, change it, or change the overlay border color to match my application's theme. (
This isn't the proper way to do this. Why did you do this? What purpose could that possibly serve? Don't say accessibility. That's for ME to determine how to set, not you. And I WAS doing it with the legacy widgets. This is just awful!
ThingWorx COULD be a great thing...it WAS great at 8.3.3. I LOVED it. Unfortunately, I don't love it right now. It has LOTS of potential...there's great things inside. But come on, y'all... Fix it right..please?
Solved! Go to Solution.
We have been having "some" success using custom CSS as a workaround (definitely not the best way around this, but it is helping). We are very afraid that in a later release, something will change again and our custom CSS will be rendered completely useless. I had a mashup started that showcased the problems, and our administrators deleted the file because I named it "TEST something or other". Test files are evidently not allowed on govt. computers. (GRRRR!) I will start again and upload it - hopefully next week sometime. In the meantime, I have included just SOME of our custom CSS below in the hopes it will illustrate what we are trying to do. Maybe it will help someone as well. Now if only the Composer would actually RETAIN the look/feel when I open it.....nope...we can't expect that now, can we?
/*Dropdowns Custom CSS*/
ptcs-dropdown:not([no-wc-style]) {
min-height: 19px;
border: solid;
border-width: thin;
border-color: darkgrey;
}
.widget-ptcsdropdown::part(icon) {
background-image: url(/Thingworx/MediaEntities/Icon_Dropdown_DownArrow);
border-color: blue;
}
/* align dropdown list item to the top of the cell */
.widget-ptcsdropdown::part(list-item) {
display:list-item;
min-height: 19px;
}
/* Border dropdown around icon */
.widget-ptcsdropdown::part(icon) {
border: 1px;
border-style:solid;
}
/*
From George Bell:
When using the dropdown boxes I found the icon for the drop down wasn’t displaying correctly on a box that was on 20px in height. I found that if I added the following CSS it would display correctly.
*/
/* Border dropdown around icon and resize */
.widget-ptcsdropdown::part(icon) {
border: 1px;
border-style:solid;
height: 16px;
width: 16px;
}
----------------------------------
/*Gets rid of that stupid nasty overlay border*/
ptcs-focus-overlay {
visibility: hidden;
}
----------------------------------
/*Textfields Custom CSS*/
ptcs-textfield:not([no-wc-style]) {
min-height: 10px;
display: flex;
flex-flow: column nowrap;
align-content: center;
justify-content: center;
align-items: baseline;
padding: 1px;
border: solid;
border-width: thin;
border-color: darkgrey;
}
ptcs-textfield::part(text-box) {
border-color: #ffff;
}
.widget-ptcstextfield::part(text-box){
height: 20px;
min-height: 10px;
border-style: solid;
border-color: #ffff;
}
.widget-ptcstextfield::part(text-box):not([disabled]):hover{
border-color: white;
}
/*.widget-ptcstextfield::part(text-box)::part(clear-button){
visibility: hidden;
}*/
ptcs-textfield:focus-within::part(hint-text) {
display: none;
}
/*Turn the UBER-UGLY DatePicker to Semi-Ugly DatePicker Custom CSS*/
ptcs-datepicker::part(date-field)::part(text-value) {
padding: 10px;
background-repeat: no-repeat;
margin-top: 17px;
background-image: url("/Thingworx/MediaEntities/DateTimePicker_Calendar");
}
ptcs-datepicker::part(date-field)::part(text-box) {
position: static;
border-radius: 6px;
background: #349fd6;
background: -moz-linear-gradient(top, #349fd6 0%, #124ab5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#349fd6), color-stop(100%,#124ab5));
background: -webkit-linear-gradient(top, #349fd6 0%,#124ab5 100%);
background: -o-linear-gradient(top, #349fd6 0%,#124ab5 100%);
background: -ms-linear-gradient(top, #349fd6 0%,#124ab5 100%);
background: linear-gradient(top, #349fd6 0%,#124ab5 100%);
border-width:1px;
border-color:#01529a;
border-style:solid;
}
ptcs-datepicker::part(date-field)::part(hint-text) {
color: #ffffff;
font-size: 11px;
font-family: sans-serif;
}
ptcs-datepicker::part(date-field)::part(icon) {
display: none;
}
ptcs-datepicker-calendar::part(datepicker-container) {
background: #349fd6;
}
ptcs-datepicker::part(date-field)::part(text-box)::id(maskShell) {
position: fixed;
}
Hi @OldGoat.
Some of these things have already been resolved, but I have notified our Product Managers of your post for further review. Which exact version of ThingWorx 8.5 are you running?
Your feedback helps us to improve our product, and for that we thank you. Please note that you can also post your requests on the ThingWorx Ideas forum located here. While you're there, feel free to vote for ideas posted by other community members.
Regards.
--Sharon
Sharon,
We are running 9.0.4. We just got it patched in early January. And I am having these problems with 9.0.4.
O.G.
Sharon,
We are currently running version 9.0.5...sorry, but I obviously didn't make that clear in my original post.
Hi @OldGoat.
I received some feedback from R&D on this:
In regard to the unexpected padding scheme that prevents being able to take text to the edges of the widgets anymore, we need specifics, as the behavior really depends on the widget
For your statement regarding "text and borders getting clipped all around because widgets now collide with other widgets," please provide some examples of this
I realize you mentioned there were other issues as well. Have you checked 9.1 for some of the improvements that have been made?
To move forward, we propose that a case be logged for these issues, but we'll need some examples and specifics of the problems. If you agree to provide this information, I will be happy to open the case on your behalf.
Regards.
--Sharon
TWX is installed on a government server. I am not in control of what version gets installed. Yes, I am constantly pouring through the release notes; I'm still waiting for the release not that says you reset Composer back to the way it was in 8.3.3. It was a solid interface...very usable, very easy to read and find things, etc. I will admit you have made some really nice improvements recently...but there are MANY improvements needed to get back up to the level of 8.3.3's composer.
I am in the middle of a very short-fused development cycle. After I get some breathing room, I will put together an example mashup of old and new widgets and write up a very comprehensive list of problems (there are many, and that list is growing all the time).
Hi there OlgGoat,
have you been able to create that mashup?
Comparing old and new widgets and their respective behaviour.
It would bee deeply appreciated.
Thanks.
Tomas
We have been having "some" success using custom CSS as a workaround (definitely not the best way around this, but it is helping). We are very afraid that in a later release, something will change again and our custom CSS will be rendered completely useless. I had a mashup started that showcased the problems, and our administrators deleted the file because I named it "TEST something or other". Test files are evidently not allowed on govt. computers. (GRRRR!) I will start again and upload it - hopefully next week sometime. In the meantime, I have included just SOME of our custom CSS below in the hopes it will illustrate what we are trying to do. Maybe it will help someone as well. Now if only the Composer would actually RETAIN the look/feel when I open it.....nope...we can't expect that now, can we?
/*Dropdowns Custom CSS*/
ptcs-dropdown:not([no-wc-style]) {
min-height: 19px;
border: solid;
border-width: thin;
border-color: darkgrey;
}
.widget-ptcsdropdown::part(icon) {
background-image: url(/Thingworx/MediaEntities/Icon_Dropdown_DownArrow);
border-color: blue;
}
/* align dropdown list item to the top of the cell */
.widget-ptcsdropdown::part(list-item) {
display:list-item;
min-height: 19px;
}
/* Border dropdown around icon */
.widget-ptcsdropdown::part(icon) {
border: 1px;
border-style:solid;
}
/*
From George Bell:
When using the dropdown boxes I found the icon for the drop down wasn’t displaying correctly on a box that was on 20px in height. I found that if I added the following CSS it would display correctly.
*/
/* Border dropdown around icon and resize */
.widget-ptcsdropdown::part(icon) {
border: 1px;
border-style:solid;
height: 16px;
width: 16px;
}
----------------------------------
/*Gets rid of that stupid nasty overlay border*/
ptcs-focus-overlay {
visibility: hidden;
}
----------------------------------
/*Textfields Custom CSS*/
ptcs-textfield:not([no-wc-style]) {
min-height: 10px;
display: flex;
flex-flow: column nowrap;
align-content: center;
justify-content: center;
align-items: baseline;
padding: 1px;
border: solid;
border-width: thin;
border-color: darkgrey;
}
ptcs-textfield::part(text-box) {
border-color: #ffff;
}
.widget-ptcstextfield::part(text-box){
height: 20px;
min-height: 10px;
border-style: solid;
border-color: #ffff;
}
.widget-ptcstextfield::part(text-box):not([disabled]):hover{
border-color: white;
}
/*.widget-ptcstextfield::part(text-box)::part(clear-button){
visibility: hidden;
}*/
ptcs-textfield:focus-within::part(hint-text) {
display: none;
}
/*Turn the UBER-UGLY DatePicker to Semi-Ugly DatePicker Custom CSS*/
ptcs-datepicker::part(date-field)::part(text-value) {
padding: 10px;
background-repeat: no-repeat;
margin-top: 17px;
background-image: url("/Thingworx/MediaEntities/DateTimePicker_Calendar");
}
ptcs-datepicker::part(date-field)::part(text-box) {
position: static;
border-radius: 6px;
background: #349fd6;
background: -moz-linear-gradient(top, #349fd6 0%, #124ab5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#349fd6), color-stop(100%,#124ab5));
background: -webkit-linear-gradient(top, #349fd6 0%,#124ab5 100%);
background: -o-linear-gradient(top, #349fd6 0%,#124ab5 100%);
background: -ms-linear-gradient(top, #349fd6 0%,#124ab5 100%);
background: linear-gradient(top, #349fd6 0%,#124ab5 100%);
border-width:1px;
border-color:#01529a;
border-style:solid;
}
ptcs-datepicker::part(date-field)::part(hint-text) {
color: #ffffff;
font-size: 11px;
font-family: sans-serif;
}
ptcs-datepicker::part(date-field)::part(icon) {
display: none;
}
ptcs-datepicker-calendar::part(datepicker-container) {
background: #349fd6;
}
ptcs-datepicker::part(date-field)::part(text-box)::id(maskShell) {
position: fixed;
}
Hi @OldGoat.
Custom CSS is a feature which allows for styling and behavioral changes outside of what ThingWorx provides directly. As it often relies on the underlying implementation of the web component which is generally implemented by third parties (e.g. D3 for charts), PTC cannot guarantee it will work forever. But it is considered to be a solid, supported path to development on ThingWorx. Vendors and third parties don't often make changes, and when they do they are often incremental not wholesale redesigns.
Please let us know if you have further insights on this.
Regards.
--Sharon
hi @OldGoat,
Thanks for the CSS you have shared, these are really helpful, myself, raised lot of Requests asking the CSS for Widgets to PTC, but none from PTC team were able to do it and the Post Left unanswered till date.
cc: @slangley
Thanks
Shashi.