Fields are hidden with visibility property rather than display

This topic has 6 replies, 2 voices, and was last updated 8 years, 1 month ago by Tan Nguyen.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
November 3, 2016 at 12:15 PM #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?

Add New Note to this Reply

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

Add New Note to this Reply
November 3, 2016 at 7:17 PM #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;

Add New Note to this Reply

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

Add New Note to this Reply

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

Add New Note to this Reply

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

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

Add New Note to this Reply
November 7, 2016 at 2:04 PM #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.

Add New Note to this Reply
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.