Display Images (Repeating Field) in Edit Form Horizontally

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a repeating image field in my Edit Post Form. I would like to display the images horizontally instead of vertically, but when I add the following CSS it changes the display of all repeating fields:

.wpt-repctl.wpt-repctl-flex {
display: inline-flex;
width: 25%;
margin-right: 1%;
top: 0px;
}

I would like to only use this style for repeating images.

Solution: Add a wrapping div with a CSS class like "rcc-img-edit" around the repeating image cred-field shortcode. Then target that ancestor in your CSS selector:

.rcc-img-edit .wpt-repctl.wpt-repctl-flex {
display: inline-flex;
width: 25%;
margin-right: 1%;
top: 0px;
}

This support ticket is created 4 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 2 replies, has 2 voices.

Last updated by Jaime 4 years, 2 months ago.

Assisted by: Christian Cox.

Author

Posts

November 18, 2020 at 1:45 pm #1848657

Jaime

Tell us what you are trying to do?
I'm trying to display images on an Edit Form, horizontally.
I tried to use CSS with this class (for example)

.wpt-repctl.wpt-repctl-flex {
display: inline-flex;
width: 25%;
margin-right: 1%;
top: 0px;
}

but it seems more than one field uses the same class (all repeating fields, actually) , and I only need to display horizontally images.
Is there any specific class for images or any other workaround I can use?

Is there any documentation that you are following?
Not really. I didn't found any specific help.

What is the link to your site?
I'm working on a test site, but you'll need to login. If you need this, just tell me and I'll provide access.

Thanks a lot!
🙂

(I'll paste here my code where the images should display)

 <div class="row">
  <div class="col-sm-12 col-xs-12 col_rcc_form-edicion">
           <div class="panel panel_rcc-editar">
               <div class="form-group">
<span class="rcc_edit_form-titulos"><label><i class="fas fa-map-marker-alt rcc_edit_form-iconos"></i>&nbsp;&nbsp;Galería de imágenes</label></span>		
              <div class="rcc-img-edit">
               
                  [cred_field field='imagenes-destacadas-rcc' force_type='field' class='form-control' output='bootstrap']

              </div>
           </div>
        </div>                          
     </div>
    </div>

November 18, 2020 at 8:34 pm #1849163

Christian Cox

Hello, can you add the rcc-img-edit ancestor class to your selector? Since this image field is contained in a div with the rcc-img-edit class, it might help you restrict the styles to this repeating image field:

.rcc-img-edit .wpt-repctl.wpt-repctl-flex {
...
}

If I've misunderstood what you want to accomplish, I need to see the live site in a browser to analyze the styles for this Form and give you a better recommendation.

November 19, 2020 at 8:52 am #1849501

Jaime

My issue is resolved now. Thank you!