Custom Fields
Re-Envisioned
Support Meta Box Conditional Logic Fields are hidden with visibility property rather than display

  • Creator
    Topic
  • #4416
    Venkat
    Participant

    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?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #4421
    Tan Nguyen
    Participant

    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

    #4422
    Venkat
    Participant

    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;

    #4423
    Venkat
    Participant

    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.

    #4439
    Tan Nguyen
    Participant

    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?

    #4441
    Venkat
    Participant
    <?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.
    Image
    See gap below videoVideo.

    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

    #4448
    Tan Nguyen
    Participant

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Fields are hidden with visibility property rather than display’ is closed to new replies.