Skip to main content
O
oskarberntorp13-Aquamarine
13-Aquamarine
February 1, 2024
Solved

Getting the picture inside valuedisplay widget

  • February 1, 2024
  • 1 reply
  • 1236 views

Hi,

I am developing a widget where Images should be displayed by using a collection widget together with a value display, So what I want to accomplish is to have multiple images to show on the mashup but without the borders that the collection widget provides and that they should be as wide as the mashup allows.

I know how to remove the border and the button underneath the value being displayed. But another problem is that even if trying to use only valuedisplay to see how the image would look, it gets very small.

 

I have figured out that I would need to change the background-size image property to cover as well as affecting the size of some other elements, but my bellow css, even if it seems correct, does not affect what I would want.

If you take a look at the bellow css code, what is missing?

ptcs-value-container ptcs-modal-image-pupup::part(popup-root){
height: 100vh;
width: 100vw;
}

ptcs-modal-image-pupup::part(live-art-area-image-thumbnail){
height: 100vh;
width: 100vw;
}

ptcs-modal-image-pupup::part(image){
background-size: cover;
}

ptcs-value-display::part(overflow-control){ height:100vh; } ptcs-value-display::part(value-container){ height:100vh; } ptcs-value-display::part(item-value-container){ height:100vh; width:100vw; } ptcs-value-display::part(item-value){ height:100vh; width:100vw; }

 

Kind Regards

Oskar Berntorp

    Best answer by yalmatar

    Hi @oskarberntorp , 

     

    your CSS seems on the right way, but there are a few adjustment:

     

    - Please correct (pupup to popup)--> ptcs-value-container.ptcs-modal-image-popup::part(popup-root) { height: 100vh; width: 100vw; }

    - then please set the height and width of the image to 100% with ptcs-modal-image-popup::part(image)

    - set the background-size: cover; within the ptcs-modal-image-popup::part(image)

     

    so the Code should be:

     

    ptcs-value-container.ptcs-modal-image-popup::part(popup-root) {

    height: 100vh;

    width: 100vw; }  

     

    ptcs-value-container.ptcs-modal-image-popup::part(image) {

    height: 100%;

    width: 100%;

    background-size: cover; }

     

    ptcs-value-display::part(overflow-control) {

    height: 100vh; }

     

    ptcs-value-display::part(item-value-container),

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

    height: 100vh;

    width: 100vw; }

     

    I hope this can help you 

     

    1 reply

    Y
    yalmatar10-MarbleAnswer
    10-Marble
    February 1, 2024

    Hi @oskarberntorp , 

     

    your CSS seems on the right way, but there are a few adjustment:

     

    - Please correct (pupup to popup)--> ptcs-value-container.ptcs-modal-image-popup::part(popup-root) { height: 100vh; width: 100vw; }

    - then please set the height and width of the image to 100% with ptcs-modal-image-popup::part(image)

    - set the background-size: cover; within the ptcs-modal-image-popup::part(image)

     

    so the Code should be:

     

    ptcs-value-container.ptcs-modal-image-popup::part(popup-root) {

    height: 100vh;

    width: 100vw; }  

     

    ptcs-value-container.ptcs-modal-image-popup::part(image) {

    height: 100%;

    width: 100%;

    background-size: cover; }

     

    ptcs-value-display::part(overflow-control) {

    height: 100vh; }

     

    ptcs-value-display::part(item-value-container),

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

    height: 100vh;

    width: 100vw; }

     

    I hope this can help you 

     

    M
    Markus_Neini12-Amethyst
    12-Amethyst
    February 2, 2024

    Hey,

    I have exactly the same issue like @oskarberntorp and I tried the CSS of @yalmatar . Unfortunately the provided CSS for the "popup-root" does not work. I am not able to set the height and width of the popup-root part to 100%, which seems to be the last missing part for the solution

    My ThingWorx Version: 9.4.3-b523.

     

    These are my CSS classes.

     

    .ValueDisplay .widget-ptcsvaluedisplay::part(value-display-area){
 height: 100% !important;
 width: 100% !important;
}
.ValueDisplay .widget-ptcsvaluedisplay::part(overflow-control){
 height: 100% !important;
 border: solid blue 2px !important;
}
.ValueDisplay .widget-ptcsvaluedisplay::part(value-container){
 height: 100% !important;
 width: 100% !important;
}
.ValueDisplay .widget-ptcsvaluedisplay::part(disclosure-button-overlay){
 box-sizing: content-box !important;
}

.ValueDisplay .widget-ptcsvaluedisplay::part(item-value-container){
 height: 100% !important;
 width: 100% !important;
}
.ValueDisplay .widget-ptcsvaluedisplay::part(item-value){
 height: 100% !important;
 width: 100% !important;
 border: solid red 2px !important;
}
.ValueDisplay .ptcs-value-container .ptcs-modal-image-popup::part(popup-root){
 height: 100% !important;
 width: 100% !important;
 border: solid orange 2px !important;
}

     

     

    You can see the popup-root part and the class with the height of 121px and a width of 251px.

    9c1d1d25-ed3a-47b2-ae8d-4780dbb9c297.png

    When I manually change the height and width of the popup-root class I get the desired solution.

    TicketImage2.PNG

     

    Maybe someone can help me out here ( T o T )

     

    Best regards

    Markus

      Terms & ConditionsCookie settingsAccessibility statement