Display Images (Repeating Field) in Edit Form Horizontally

Ce fil est résolu. Voici une description du problème et la solution proposée.

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 Il y a 3 années et 5 mois. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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)

Marqué : Content-submission forms, Toolset Forms

This topic contains 2 réponses, has 2 voix.

Last updated by Jaime Il y a 3 années et 5 mois.

Assisted by: Christian Cox.

Auteur

Publications

novembre 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>

novembre 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.

novembre 19, 2020 at 8:52 am #1849501

Jaime

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.