White Border on the Button

[pshashipreetham]

Thingworx Version: 9.3
When ever the Mashup is opened as PopUp on a button click, there is white border on the button (button on the opened Mashup).

Thanks,
Shashi

[PEHOWE · Accepted solution]

Hello @pshashipreetham

I believe the issue you are seeing is the focus. Have you reviewed  Article - CS324593 - ThingwWorx Web Components customization with Visual SDK CSS

You will find the following section:

• Remove Focus box from UI items

ptcs-focus-overlay {

  visibility: hidden;

}

.ptcs-wrapper:not([no-wc-style]):focus:not(.dummy):not(.dummy):not(.dummy) {

    box-shadow: none;

}

Hope that helps.

Peter

[pshashipreetham]

Hey Hi @PEHOWE,

Is there a way to write a CUSTOM CSS for a ptcs-button when it is disabled? When the button is disabled, its background color should be none or something like that. I was not able to find or code the proper CSS for it. Can you please help me out over here?

Thanks,

[PEHOWE]

Hello @pshashipreetham,

I am not sure I understand your question. The Style Theme being used has a definition for disabled buttons.
Can you provide more information on your goal.

Thanks

[pshashipreetham]

Hi @PEHOWE,

Problem Statement: When I open a Pop-up in the 9.3.0 version, the mashup(not the Pop-up Mashup, main mashup) buttons go into the disabled mode; when the buttons are disabled, the background changes to white.

Goal: Custom CSS to make the button color transparent when disabled not with the Style Properties

Thanks,

[PEHOWE]

Hello @pshashipreetham,

You have a button which is using Navigate to open a popup window. What process is setting the button to disabled?

You want to set the disabled button color to a value other than the Themes's disable button color?

[pshashipreetham]

Hi @PEHOWE ,

You want to set the disabled button color to a value other than Themes's disabled button color? - YES

In Style Properties, when Disabled, Background Color is White. Can we override it from CustomCSS?

[PEHOWE]

Hello @pshashipreetham,

Give this a try. Of course I have set strange properties but it does seem be what you need:

.widget-ptcsbutton:not([no-wc-style])[variant=primary][disabled]{
   background: red;
   border-color: red;
   background-color: red;
}