Getting the picture inside valuedisplay widget

[oskarberntorp]

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

[yalmatar · Accepted solution]

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 

[Markus_Neini]

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.

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

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

Best regards

Markus