Thanks for looking into this. I was able to get the columns to line up but I had to make edits to the _fields.scss file.
I removed margin-bottom: -1px; from the ul with the class .acf-hl.acf-tab-group
I also removed clear: both; from the second column with the class .acf-field.-c0
Removing the margin bottom from the ul also resolved another instance of the same issue.
Screenshot 1
Screenshot 2
Thanks for looking into this. I’m attaching some more screenshots from another instance of the same problem. I was able to get the 2 columns in the images to line up correctly after editing the following in the _fields.scss file.
I removed ‘margin-bottom: -1px;’ from the ul with the class .acf-hl.acf-tab-group
I removed ‘clear: both;’ from the column with the class .acf-field.-c0
In another instance, removing ‘margin-bottom: -1px;’ from the ul with the class .acf-hl.acf-tab-group seemed to be the only edit needed for the rest of the columns to line up correctly.
Thanks for looking into it. I’m attaching more screenshots for reference from another site. I was able to get the 2 columns in the image to line up by editing the following in the _fields.scss file.
I removed the margin-bottom: -1px; from the ul with the class .acf-hl.acf-tab-group
I removed clear:both from the second column with the class .acf-field.-c0
On another site where I was having the issue, just removing the ‘margin-bottom:-1px; from .acf-hl.acf-tab-group resolved the issue.
Hey John – thanks for looking into this. I think it’s just something with my computer. I just had a colleague check the back end of the site and it displays correctly on his computer.
¯\_(ツ)_/¯
Sorry for the hassle and thanks again for looking into it.
Thanks again – I deactivated all plugins except for ACF and the issue remained. I did notice that the user agent stylesheet contained the following for the ul:
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
When I added margin-block-end: 0; to the class .acf-fields > .acf-tab-wrap:first-child .acf-tab-group the first field was able to float all the way to the left.
The site is running WP 6.2.2 and the latest version of ACF Pro 6.1.7
I’m using Chrome but I checked it in Firefox and MS Edge and it’s doing the same thing. The window is smaller because I left the inspection window open in the sidebar.
Thanks for looking into this. I was able to get the columns to line up but I had to make edits to the _fields.scss file.
I removed margin-bottom: -1px; from the ul with the class .acf-hl.acf-tab-group
I also removed clear: both; from the second column with the class .acf-field.-c0
Removing the margin bottom from the ul also resolved another instance of the same issue.
Still an issue for me. Anyone else?
Thanks for the response – I’ll give it a go.
Thanks for the info. I found another solution.
Thanks. I actually have Repeater > Flexible Content > Repeater. After working with the information from the support article you posted I got it working. Here is what worked.
function my_acf_save_post( $post_id ) {
if( have_rows('content_panels') ):
$parent_i = 0;
while( have_rows('content_panels') ): the_row();
$parent_i++;
if( have_rows('panel_contents') ):
while( have_rows('panel_contents') ): the_row();
if( have_rows('content_columns') ):
$child_i = 0;
while ( have_rows('content_columns') ) : the_row();
$child_i++;
// get new value
$topMargin = get_sub_field('column_margin_top');
$bottomMargin = get_sub_field('column_margin_bottom');
if($topMargin || $bottomMargin):
$totalMargin = $topMargin + $bottomMargin;
update_sub_field('total_margin', $totalMargin, $post_id);
endif;
endwhile;
endif;
endwhile;
endif;
endwhile;
endif;
}
add_action('acf/save_post', 'my_acf_save_post', 20);
Is there a way to optimize what I have or is this correct? I just don’t want it to cause issues once I get into a production environment. Thanks again.
Would I need to do anything differently to get this to work with a repeater field inside flexible content?
I was able to get it to work fine outside of the repeater. Once I put it inside the repeater I used get_sub_field instead of get_field but that didn’t seem to do anything. Any ideas?
Thanks in advance!
edit.jpg.jpg
edits-0.jpg.jpg
edits-01.jpg.jpg