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

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

OldGoat
11-Garnet

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

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?

9 REPLIES 9
slangley
23-Emerald I
(To:OldGoat)

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.  

slangley
23-Emerald I
(To:OldGoat)

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

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

slangley
23-Emerald I
(To:OldGoat)

Thank you, @OldGoat 

tcoufal
12-Amethyst
(To:OldGoat)

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

 

OldGoat
11-Garnet
(To:tcoufal)

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

slangley
23-Emerald I
(To:OldGoat)

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

Announcements