Support Forum
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 display: none;
Is there a way to fix this?
Dear Venkat,
Field should 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.
Best regards,
Tan
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 visibility: hidden;
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 .show()
and .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 .show()
and .hide()
Thanks for your help
Dear Venkat,
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.