Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Tabs don't work great when inside a seamless group

Abierto
  • ¿Algo no está bien?
#975 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
52/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
css, php
Área
frontend, web-dev

Línea de trabajo

Reproduce el problema en el administrador de WordPress con un grupo de campos ACF sin bordes que contenga pestañas posicionadas en la parte superior y, después, inspecciona los estilos de .acf-postbox.seamless y .acf-tab-wrap mostrados en el informe. Compara los diseños sin bordes y estándar, incluida la barra de desplazamiento sobrante. Se considera terminado cuando las pestañas mantienen una agrupación visible y la barra de desplazamiento no aparece en ninguno de los dos modos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Describe the bug
Tabs don't look like tabs when they're used in a seamless group.

To Reproduce
Steps to reproduce the behavior:

  1. Make a field group with some tabs
  2. Add it to a post type or options page.

Expected behavior
Tabs to still look like tabs.

Screenshots or Video
Seamless:
Image

Standard:
Image

Code
This is not very easy to solve with the markup how it is, but you get most of the way there stripping out the seamless-specific code related to tab groups and adding something like this:

.acf-postbox.seamless .acf-tab-wrap ~ .acf-field {
    border-inline: 1px solid #c3c4c7;
}
.acf-postbox.seamless .acf-tab-wrap ~ .acf-field-tab + .acf-field {
    border-top: 1px solid #c3c4c7;
}
.acf-postbox.seamless .acf-tab-wrap ~ .acf-field:has(+ .acf-field-tab), 
.acf-postbox.seamless .acf-tab-wrap ~ .acf-field:has(+ :not(.acf-field)), 
.acf-postbox.seamless .acf-tab-wrap ~ .acf-field:last-child {
    border-bottom: 1px solid #c3c4c7;
}

The tabs still have borders at the bottom, though I'm sure you could pull whatever fixes that out of the non-seamless styles?
Image

Sample Code to Generate an Options Page 
acf_add_options_sub_page(
	array(
		'page_title' => __('Sample ACF Options Page', 'sample-acf-code'),
		'menu_title' => __('Sample Options Page', 'sample-acf-code'),
		'menu_slug' => 'sample-acf-code-options-page',
		'capability' => 'manage_options',
		'redirect' => false
	)
);

acf_add_local_field_group(
	array(
		'key' => 'group_sample_items_settings',
		'title' => __('API Settings', 'sample-acf-code'),
		'fields' => array(
			array(
				'key' => 'field_api_credentials_tab',
				'label' => __('API Credentials', 'sample-acf-code'),
				'name' => '',
				'type' => 'tab',
				'placement' => 'top'
			),
			array(
				'key' => 'field_sample_email',
				'label' => __('Email', 'sample-acf-code'),
				'name' => 'sample_email',
				'type' => 'email',
				'instructions' => __('Your login email address', 'sample-acf-code'),
				'required' => 1
			),
			array(
				'key' => 'field_sample_password',
				'label' => __('Password', 'sample-acf-code'),
				'name' => 'sample_password',
				'type' => 'password',
				'instructions' => __('Your login password', 'sample-acf-code'),
				'required' => 1
			),
			array(
				'key' => 'field_sample_account_id',
				'label' => __('Account ID', 'sample-acf-code'),
				'name' => 'sample_account_id',
				'type' => 'text',
				'instructions' => __('Your Account ID', 'sample-acf-code'),
				'required' => 1
			),
			array(
				'key' => 'field_sample_api_key',
				'label' => __('API Key', 'sample-acf-code'),
				'name' => 'sample_api_key',
				'type' => 'password',
				'instructions' => __('API Key for authentication (different from App Secret)', 'sample-acf-code'),
				'required' => 1
			),
			array(
				'key' => 'field_import_settings_tab',
				'label' => __('Import Options', 'sample-acf-code'),
				'name' => '',
				'type' => 'tab',
				'placement' => 'top'
			),
			array(
				'key' => 'field_import_frequency',
				'label' => __('Import Frequency', 'sample-acf-code'),
				'name' => 'import_frequency',
				'type' => 'select',
				'choices' => array(
					'daily' => __('Daily', 'sample-acf-code'),
					'twicedaily' => __('Twice Daily', 'sample-acf-code'),
					'hourly' => __('Hourly', 'sample-acf-code')
				),
				'default_value' => '',
				'allow_null' => 1,
				'instructions' => __('Frequency that new items are imported', 'sample-acf-code')
			),
			array(
				'key' => 'field_max_items_per_import',
				'label' => __('Max Items Per Import', 'sample-acf-code'),
				'name' => 'max_items_per_import',
				'type' => 'number',
				'default_value' => '',
				'instructions' => __('Maximum number of items to import in a single batch. Leave empty to import all available new items. Useful for testing or troubleshooting.', 'sample-acf-code')
			),
			array(
				'key' => 'field_force_full_import',
				'label' => __('Force Full Import', 'sample-acf-code'),
				'name' => 'force_full_import',
				'type' => 'true_false',
				'default_value' => 1,
				'ui_on_text' => 'On',
				'ui_off_text' => 'Off',
				'instructions' => __('Enable this to force a full import instead of incremental. Turn off after running once.', 'sample-acf-code')
			),
			array(
				'key' => 'field_notification_email',
				'label' => __('Notification Email', 'sample-acf-code'),
				'name' => 'notification_email',
				'type' => 'email',
				'instructions' => __('Email address to notify when unmatched loan officers are found during import.', 'sample-acf-code'),
				'value' => get_option('admin_email')
			),
			array(
				'key' => 'field_manual_import_section',
				'label' => __('Manual Import', 'sample-acf-code'),
				'name' => 'manual_import_info',
				'type' => 'message',
				'message' => $this->get_import_controls_html(),
				'new_lines' => 'br'
			),
			array(
				'key' => 'field_connection_status_tab',
				'label' => __('Connection Status', 'sample-acf-code'),
				'name' => '',
				'type' => 'tab',
				'placement' => 'top'
			),
			array(
				'key' => 'field_connection_status',
				'label' => __('API Connection Status', 'sample-acf-code'),
				'name' => 'connection_status',
				'type' => 'message',
				'message' => $this->get_connection_status_html(),
				'new_lines' => 'br'
			),
		),
		'location' => array(
			array(
				array(
					'param' => 'options_page',
					'operator' => '==',
					'value' => 'sample-acf-code-options-page'
				)
			)
		),
		'menu_order' => 99,
		'position' => 'normal',
		'style' => 'seamless'
	)
);

Version Information:

  • WordPress Version: 6.8.2
  • PHP Version: 8.2.29
  • ACF Version: Pro 6.5.0.1
  • Browser: Chrome 138

Additional context
There is also a stray scroll bar in both seamless and not-seamless mode.

Image

This is easily solved by adding overflow: clip here:

.acf-tab-wrap {
    overflow: auto;
    overflow: clip;
}

(It's probably worth keeping overflow: auto for older browsers?)

Lenguaje dominante
PHP
Estrellas
947
Forks
198
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de AdvancedCustomFields/acf

Todos los issues de AdvancedCustomFields/acf

Issues similares

Más issues de PHP

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.