Repeat Buttons in a 6 col layout

By: Detlef Beyer | Asked: 07/26/2023
ForumsCategory: How-toRepeat Buttons in a 6 col layout
Detlef BeyerDetlef Beyer asked 1 year ago

I created a repeat area with a 6 column layout. The cols are set like this: 3,2,1,2,2,2 The 3rd col contains a single checkbox. My problem is that the two repeat buttons (+/-) appear after the 3rd column and they push the rest of the row down. My preferred option would be to get one set (2) of repeat buttons at the end of the repeater not two buttons for every row. If this is not possible I would like to see the two buttons below the fields of the row.

 

<div id="frm_field_26_container" class="frm_form_field frm_section_heading form-field  frm_hide_section"> <h3 class="frm_pos_none frm_section_spacing">Repeater</h3> <input type="hidden" name="item_meta[26][form]" value="3" class="frm_dnc"> <a href="#" class="frm_add_form_row frm_icon_font frm_plus_icon frm_hidden" data-parent="26" aria-label="Add"></a><div id="frm_section_26-0" class="frm_repeat_sec frm_repeat_26 frm_first_repeat frm_grid_container"> <input type="hidden" name="item_meta[26][row_ids][]" value="0"><input type="hidden" name="item_meta[26][0][0]" value=""><div id="frm_field_29-26-0_container" class="frm_form_field  frm3 frm_first frm_html_container frm_field_29_container form-field">Sonstiges</div> <div id="frm_field_30-26-0_container" class="frm_form_field form-field  frm_none_container frm2 frm_field_30_container">     <label for="field_f8uw7-0" id="field_f8uw7-0_label" class="frm_primary_label">Forderungen X         <span class="frm_required" aria-hidden="true"></span>     </label>     <input type="number" id="field_f8uw7-0" name="item_meta[26][0][30]" value="" data-invmsg="Zahl ist ungültig" aria-invalid="false" data-sectionid="26" min="0" max="9999999" step="any"> </div> <div class="frm_form_field frm_hidden_container frm_repeat_buttons "><a href="#" class="frm_add_form_row frm_icon_font frm_plus_icon" data-parent="26" aria-label="Add"></a> <a href="#" class="frm_remove_form_row frm_icon_font frm_minus_icon" data-key="0" data-parent="26" aria-label="Entferne"></a> </div></div> </div> 

 

The repeat buttons were placed after the 2nd column. Is this a limitation of the repeater? Only two cols?

Attachments
2 Answers
Victor Font answered 1 year ago

Are you familiar with CSS grid? The physical placement of the HTML element doesn't necessarily mean anything because grid positions are controlled by CSS. Examine the CSS in your browser site tools and you should be able to figure out the adjustments.

Detlef BeyerDetlef Beyer replied 1 year ago

Thank for your help - I do know how to use CSS for the placement of the elements. But I wonder why the plugin breaks the structure so that I need to fix it myself? I think the formidable form builder is not the best tool for my demand.

Victor Font replied 1 year ago

Let me explain something. Formidable has not generated bad source code. I created a repeater field with 6 columns in my development environment. The buttons in my example and in your source code above are at the bottom of the HTML. They are the last two link elements. They are not between fields. If you read the code for the plus icon at the top, it is hidden, It is not active. You are mistaken as to the placement of the buttons.

Detlef BeyerDetlef Beyer answered 1 year ago
Again - thanks for your help. The code is nothing I would consider as clean. I just did a refund of my order and create the solution without a plugin. So this problem is solved ;)

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right