Skip to main content
Y
Yoshihiko.N14-Alexandrite
14-Alexandrite
December 14, 2022
Solved

how to hide disclosure-button-container

  • December 14, 2022
  • 1 reply
  • 1757 views

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

 

Best answer by Markus_Neini

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

 

 

1 reply

M
Markus_Neini12-Amethyst
12-Amethyst
December 15, 2022

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

 

    Y
    Yoshihiko.N14-AlexandriteAuthor
    14-Alexandrite
    December 15, 2022

    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

     

     

     

    M
    Markus_Neini12-AmethystAnswer
    12-Amethyst
    December 16, 2022

    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

     

     

    Terms & ConditionsAccessibility statement