Display image to the right of the block

Hello @d7fox7vr ,

I’ve tested this and it is possible to do with additional CSS. Every HTML element can be positioned under the select element:

And then you can add following CSS in the Appearance -> Customizer:

#forminator-module-XXXX .forminator-row:nth-child(2) {float:left;width:50%;}

Replace the XXXX with ID of your form.
It should give effect like that:

kind regards,
Kasia

Tell me, when you hover over Select, the image can change (not yet selected)? How to make the picture change immediately on hover? Is it possible?

• This reply was modified 5 years, 3 months ago by Ed777.

Hello @wpmudev-support2
Does not work. Here is the form page. I don’t understand how to configure?

vela-art.com/test-vysechnaya/

This code does not work.
#forminator-module-XXXX .forminator-row:nth-child(2) {float:left;width:50%;}

• This reply was modified 5 years, 3 months ago by Ed777.
• This reply was modified 5 years, 3 months ago by Ed777.

Now my form looks like this https://prntscr.com/pz5e93
How to make my pictures (html) be on the right. This code that is written does not work with my form. I can not configure due to the limitations of four columns. Help me please.

Hello @d7fox7vr

I hope you’re doing well!

Tell me, when you hover over Select, the image can change (not yet selected)? How to make the picture change immediately on hover? Is it possible?

Out of the box, it is not possible through the plugin’s settings. It can be achieved with some custom CSS.

As we do not have your site URL, the CSS here is shared based on my setup.

Please edit the form, and add first the images (HTML fields) and after the Select field for these images. See the screenshot:
https://take.ms/UXKO3

Edit each HTML field, go to Styling and add a custom CSS class, to the Additional CSS Classes field. Add same custom CSS to all HTML fields that contain an image. Please see the screesnhot:
https://monosnap.com/file/7hWeKb6E2sYYgV3HY0mpaO1ZEDHWkt

Add a unique custom CSS to the Select field as well, the same way as shown above.

Please try this CSS code, add it to Appearance > Customizer > Additional CSS

/* CSS code for the HTML field */
  .image-dropdown1 {
    width: 25%;
    max-width: 150px;
    display: inline-block;
 }

/* CSS code for the Select field */
.dropdown1 {
     display: inline-block;
    position: relative;
    float: right;
    left:25%;
    top: -170px;
    max-width:500px;
}

Replace the image-dropdown1 CSS class with a CSS class used for the HTML fields. And replace the dropdown1 class with the one that will be used for the Select field.

Feel free to adjust values form the, left , top and max-width to achieve the desired look.

Hope this will help!

Cheers,
Nastia

this code does not work for me. The first and main tasks, so that the html picture is always on the right. I know how to configure it when I select one list, but I don’t know how to configure these pictures to be on the right. The plugin has a limit of 4 columns for display. I have more pictures. How to setup?

How to display the image to the right of the drop-down list. I output the image with the condition in html. I don’t understand how to withdraw it only to the right. There is a restriction in the columns of the blocks, only four. And if there are 10 conditions for a drop-down list, what should I do? There are 10 conditions and for each condition a separate image, how to display it to the right of the drop-down list?

Here is the link vela-art.com/test-vysechnaya/
Here is a screen https://prntscr.com/q19rtr

• This reply was modified 5 years, 3 months ago by Ed777.

Hello @d7fox7vr ,

Please export your form so we can adjust our code for it.

kind regards,
Kasia

@wpmudev-support2 I exported the form. Where should I send her? I do not want to send to open access? Can I send by mail?

• This reply was modified 5 years, 3 months ago by Ed777.

Hello @d7fox7vr,

I trust you’re doing well!

Please feel free to email us the exported form to [email protected]. Add to a subject “Attn: Nastia”, so it will be assigned to me. Include in the email body a link back to this thread and a download link to the form.

Kind regards,
Nastia

Hi @wpmudev-support2
Sent. Waiting for an answer. Thanks!