Support › Meta Box Conditional Logic › Fields are hidden with visibility property rather than display
I'm using a radio options (image/video) to display corresponding 2 fields (image/oembed).
However, I see the fields took space, even though they are hidden. When checked its inline styles, it seems it is using
visibility: hidden; rather than
Is there a way to fix this?
visibility: hidden because we have to prevent jumping other fields, for instance, you have 3 fields:
Address Zipcode Country
or with column:
Address Zipcode Country
So if Zipcode is hidden, Country with jump to Zipcode place immediately, it's bad for UX.
Update to this issue: It seems radio fields has correct functionality. I'm facing issue with Image and OEmbed fields. I mean radio fields has
display: none;, but image and oembed has
Thanks for the reply Tan.I understand the issue. However, I'm having two radio buttons (image/video), I would like to display appropriate field, depending on selected option. Now that there is gap, it is also bad for UX.
May be you can add a field attribute to choose between visibility and display properties? or a class? Thank you very much in advance.
It's weird, sorry for not clear on the previous message. I use
visibility:hidden for column. For other fields, I use
.hide() jQuery method. Can you please post your code here so I can check it?
<?php $fields = array( array( 'id' => '_gx_flexslider_type', 'name' => __( 'Type', 'genex-framework' ), 'type' => 'radio', 'options' => array( 'image' => __( 'Image', 'genex-framework' ), 'video' => __( 'Video', 'genex-framework' ), ), 'std' => 'image', 'columns' => 12, ), array( 'id' => '_gx_flexslider_video', 'name' => __( 'Video', 'genex-framework' ), 'type' => 'oembed', 'columns' => 12, 'hidden' => array( '_gx_flexslider_type', '!=', 'video' ) ), array( 'id' => '_gx_flexslider_image', 'name' => __( 'Image', 'genex-framework' ), 'type' => 'image_advanced', 'max_file_uploads' => 1, 'columns' => 12, 'hidden' => array( '_gx_flexslider_type', '!=', 'image' ) ), );
See gap above image.
See gap below video.
It seems from your message, you are using
visibility: hidden; for 12 columns as well. Since its a row, it should use
Thanks for your help
I see you use full size for your field. If you set 12 columns, consider to remove column property of field it will show exactly on the new row.