Image selection widget - display changes

Hi there, I'm using the image selection widget in my form.

1) the images can either be positioned centrically, to the left or to the right. I'd prefer to have the images distributed evenly throughout the whole width, from left to the right. I still want to keep 3 images per row, though. Is that possible?

2) When options have been selected the get a thin blue frame. Is the frame configurable in terms of color and thickness? It is not so visible, I'd like to change that.

3) The second row has two elements with a text of two lines. This causes the pictures to move up compared to the third that is positioned slightly to the bottom. Can those two elements be moved down to the level of the third one?

4) The text under each element is very close to each picture. Can I increase the spacing between them?

5) Can I add more spacing between the text on the top and the picture elements below?

kind regards

Sergio

Thank you for reaching support,

the images can either be positioned centrically, to the left or to the right. I'd prefer to have the images distributed evenly throughout the whole width, from left to the right. I still want to keep 3 images per row, though. Is that possible?

> To confirm, you wish to make it 1 row and three images right?

When options have been selected the get a thin blue frame. Is the frame configurable in terms of color and thickness? It is not so visible, I'd like to change that.

> Are you referring to the item border when a selection is made?

The second row has two elements with a text of two lines. This causes the pictures to move up compared to the third that is positioned slightly to the bottom. Can those two elements be moved down to the level of the third one?

> I am looking at this form https://form.jotform.com/211695588745876, can you please share a screenshot of what field are you referring to?

The text under each element is very close to each picture. Can I increase the spacing between them?

> We can increase the bottom margin for each image like this:

> If that is acceptable, please insert this code into your Inject Custom CSS Area: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

.divimg {

  margin-bottom: 10px !important;

}

Can I add more spacing between the text on the top and the picture elements below?

> Yes, here is how it looks:

Here is the code:

.imageContainer.blocks {

1. margin-bottom: 15px;

}

Paste it in the Widget's CSS Area:

Awaiting your response.

Best.

Hi there, thanks for your reply:

1) I need 3 pictures per row, which means 2 rows in total, to contain 6 pictures. Just like they are arranged now, only with more horizontal space between them. They are positioned very close next to each other, so I would like to spread them out horizontally, something like this (edited picture):

2) Exactly, I'd like to configure the item boarder when a selection is made.

3) I mean the uneven vertical positioning of the elements in the second row due to different amounts of text lines:

4) and 5) Thank you the codes helped 👍

Hi there,

#1

> Since the Image picker width a bit small for us to increase the horizontal spacing between images, I have now increased it as well as added right margins to each image blocks:

If that is acceptable, kindly insert these codes into the Image picker CSS area:

iframe#customFieldFrame_75 {

  max-width: 800px !important;

}

.imageContainer.blocks {

  margin-right: 48px !important;

}

#2

> The active-selected item border appears to be functional as of the moment.

#3

I will get back to you on this one for the alignment.

Best.

Hi there,

1) great that helped a lot, I added some margin on left and right to get it centric, thanks.

2) Right, the  active-selected item border is functional, but I'd like to change its style such as color and especially thickness as consider it to be too thin and barely visible.

3) Thank you, I hope this is fixable.

Howdy fandila,

Please add this to the custom CSS in your Image Picker widget:

#container {

display: flex;

flex-wrap: wrap;

}

This will automatically align your images.

Please insert this code to adjust the border color:

div.selected {

border: 3px solid blue !important;

}

.divimg:hover {

border: 1px solid blue !important;

}

The first rule will affect the image that is clicked on, the second rule will affect images that are hovered over.

Please let us know if there's anything else we can help you with!

Great thank you!

Hi there,

I have another image selection widget whose purpose is only to display the images without having to select any of them.

Howdy fandila,

I see that you have another CSS question, however, I have moved this question to a new thread to prevent any confusion. Please find my response here: https://www.jotform.com/answers/3215426.

Thank you!