Support

Account

Home Forums Add-ons Flexible Content Field Set subfield wrapper width based on radio value

Solved

Set subfield wrapper width based on radio value

  • I’ve configured a layout with a “columns” radio field. I’ve been trying to find a way to dynamically update the subsequent fields with wrapper widths based on the selected columns value.

    For instance, if the user selects 2 columns, I would want the two next fields to display with 50% wrapper widths. If they user selects 3 columns, 33% wrapper widths, etc.

    Please excuse me if this is a dumb question. I’m new to ACF but did as much searching as possible and couldn’t find any appropriate results. Thank you!

  • Hi @harnessmedia

    Could you please let me know where you want it to happens? Backend or front-end?

    For the front-end, you can easily check the radio field value and apply the class accordingly. Here’s a simple example how you can do it:

    <?php
    
    $column = get_field('column_field');
    $css_width = 'width: 100%;'
    
    if( $column == '2' ){
        $css_width = 'width: 50%;'
    } elseif ( $column == '3' ){
        $css_width = 'width: 33%;'
    }
    
    ?>
    
    <div style="<?php echo $css_width ?>">this is the content</div>

    For the backend, you need to use JavaScript to check the selected value and add the width style. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/.

    I hope this helps 🙂

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.