Meta Box

Fields are hidden with visibility property rather than display

Support › MB Conditional Logic › Fields are hidden with visibility property rather than display

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 3, 2016 at 12:15 PM #4416
    VenkatVenkat
    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?

    November 3, 2016 at 7:03 PM #4421
    Tan NguyenTan 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

    November 3, 2016 at 7:17 PM #4422
    VenkatVenkat
    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;

    November 3, 2016 at 7:21 PM #4423
    VenkatVenkat
    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.

    November 5, 2016 at 2:58 AM #4439
    Tan NguyenTan 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?

    November 5, 2016 at 12:52 PM #4441
    VenkatVenkat
    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

    November 7, 2016 at 2:04 PM #4448
    Tan NguyenTan 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.

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