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