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

Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X

how to hide disclosure-button-container

Yoshihiko.N
13-Aquamarine

how to hide disclosure-button-container

Hi Developers,

I'd like to get your support on CSS part.

I'm try to hide the disclosure button in the value display widget with custom css, however it doesnt work.

Could you tell me how we can hide the button ?

our thingworx env is "ThingWorx 9.2.6-b366".


YoshihikoN_0-1671061869415.png

 

1 ACCEPTED SOLUTION

Accepted Solutions

Hello Yoshihiko,

 

My mistake! I tried it on a TWX 9.3.4 instance because the widget looked the same. But this is not the case. It's a slightly different widget and has a different structure. I've now tried it on a ThingWorx 9.2.1-b112 instance and hope the new CSS works for you now.

 

Edit: No you don´t need to do any further configurations on the DisplayValue Widget itself. If you want to apply the css only on this Widget, consider adding a ".exampleNameClass" before my provided classes.

 

Markus_Neini_0-1671192167148.png

 

Add following CSS, if you want to ...

 

/*hide only the disclosure-button*/ 

ptcs-value-display::part(item-value)::part(disclosure-button){

/*visibility:hidden !important;*/

display: none !important;

}

Markus_Neini_2-1671192565293.png

 

/*To hide the whole disclosure container */

ptcs-value-display::part(item-value)::part(disclosure-button-container){

/*visibility:hidden !important;*/

display: none !important;

/*height: 10px !important;*/

}

Markus_Neini_3-1671192866300.png

 

/*Hide the border from the whole widget*/
ptcs-value-display::part(item-value)::part(popup-root){

border: 0 !important;

}

 

If you don´t want to remove the border, simply use the "visibility:hidden !important;" and the "height: 10px !important;" properties and remove the "display: none !important;".

 

Best regards
Markus

 

 

View solution in original post

4 REPLIES 4

Hi,

i made you an css, so you can understand how to use it in the future. 

1. ValueDispaly Widget, that renders an Imagelink.

Markus_Neini_0-1671097466760.png

2. Use "height: 0px !important;", to hide the lower part named: disclosure-button-overlay. Here I made the background red for you. I am not sure if you want to hide the whole overlay, but in case you need it, I will add the css.

Markus_Neini_1-1671097514326.png

.widget-ptcsvaluedisplay::part(disclosure-button-overlay) {
    /*background: red !important;*/
height: 0px !important;
}

2a. After you removed the overlay, it should look like:

Markus_Neini_2-1671097904159.png

 

3. Now to hide the disclosure-button itself, you add "visibility: hidden !important;".

 

.widget-ptcsvaluedisplay::part(disclosure-button-container){
visibility: hidden !important;
}

 

3a. The result should look like:

Markus_Neini_3-1671097940347.png

 

I hope, that i was able to help you :).

 

Hi Markus,

Really appreciate for your quick response.

 

I tried but not work.(ToT)

I put pictures of my code and mashup configuration.

Could you tell me what is wront ?

 

my valuedisplay shows image not imagelink.

 

I write Custom CSS as shown the blow.

I think I dont need any configuration to valuedisplay itself since I specify elements in the CSS, right ?

 

YoshihikoN_0-1671148642804.png

YoshihikoN_1-1671148698397.png

 

 

 

Hello Yoshihiko,

 

My mistake! I tried it on a TWX 9.3.4 instance because the widget looked the same. But this is not the case. It's a slightly different widget and has a different structure. I've now tried it on a ThingWorx 9.2.1-b112 instance and hope the new CSS works for you now.

 

Edit: No you don´t need to do any further configurations on the DisplayValue Widget itself. If you want to apply the css only on this Widget, consider adding a ".exampleNameClass" before my provided classes.

 

Markus_Neini_0-1671192167148.png

 

Add following CSS, if you want to ...

 

/*hide only the disclosure-button*/ 

ptcs-value-display::part(item-value)::part(disclosure-button){

/*visibility:hidden !important;*/

display: none !important;

}

Markus_Neini_2-1671192565293.png

 

/*To hide the whole disclosure container */

ptcs-value-display::part(item-value)::part(disclosure-button-container){

/*visibility:hidden !important;*/

display: none !important;

/*height: 10px !important;*/

}

Markus_Neini_3-1671192866300.png

 

/*Hide the border from the whole widget*/
ptcs-value-display::part(item-value)::part(popup-root){

border: 0 !important;

}

 

If you don´t want to remove the border, simply use the "visibility:hidden !important;" and the "height: 10px !important;" properties and remove the "display: none !important;".

 

Best regards
Markus

 

 

Hi Markus,

Super Thanks for your support !!!
I can do what I want to do!


YoshihikoN_0-1671578709247.png

 

Top Tags