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 🙂
