Skip to main content
13-Aquamarine
January 21, 2021
Solved

Problems with Element Height, Widget Padding, and a Forced "Focus Overlay" on Input Widgets

  • January 21, 2021
  • 2 replies
  • 4891 views

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.  (

  1. --ptcs-focus-overlay--padding: 8px; ***!!!
  2. --ptcs-focus-overlay--border-style: solid;
  3. --ptcs-focus-overlay--border-width: 2px; ***!!!
  4. --ptcs-focus-overlay--border-color: #000000; ***!!!
  5. --ptcs-focus-overlay--border-radius: 0px; ***!!!
  6. --ptcs-focus-outline: none😉

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?

Best answer by OldGoat

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;
}

2 replies

Support
January 22, 2021

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

 

 

OldGoat13-AquamarineAuthor
13-Aquamarine
January 22, 2021

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.

Support
February 11, 2021

Hi @OldGoat.

 

I received some feedback from R&D on this:

  • The Focus state is being examined for an upcoming release
  • 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

OldGoat13-AquamarineAuthor
13-Aquamarine
February 11, 2021

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).  

Support
February 11, 2021

Thank you, @OldGoat