[Resolved] Looking for better style to the Toolset custom fields from dashboard

[Author]

Posts

[kelvinL-2]

Dear Sir/Madam,

Refer to the screenshots, no matter I view the custom fields in vertical or horizontal, it doesn't have good look at it. Does Toolset have a stylesheet template for the dashboard view to the custom field?

I want to have a horizontal scroll bar if I view it horizontally.

I want to show the title if I view it vertically.

Could you advise?

Best regards,

Kelvin

[Christian Cox]

Does Toolset have a stylesheet template for the dashboard view to the custom field?
Hi, normally to override styles in wp-admin you create your own custom stylesheet, add it to a custom theme or child theme, and enqueue it on admin pages using the admin_enqueue_scripts hook and the wp_register_style / wp_enqueue_style functions like this:

function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_stylesheet_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

That code would register a stylesheet called admin-styles.css from the root directory of the child theme, and load that stylesheet on every page in wp-admin. I'm not sure what you mean by a stylesheet template, though. Normally you would just add any code necessary to override the default styles applied by Toolset's admin stylesheets. There's no need to copy + paste from a template, unless I'm misunderstanding what you want to accomplish.
https://developer.wordpress.org/reference/functions/wp_register_style/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/

I want to have a horizontal scroll bar if I view it horizontally.
I see what you mean about the scroll bar, it is difficult to work with an RFG that has more than a few input fields in the horizontal format. Usually we suggest switching to the alternate display mode III when there are more than just a few inputs in an RFG. You might have some luck applying overflow:scroll to the parent container but this type of customization is unfortunately outside the scope of support we offer here.

I want to show the title if I view it vertically.
I do not really understand what this means, can you explain a bit more? The internal title is currently shown only in the III display mode. Click the Pencil icon and add a title to any row, and the title will be displayed in the RFG row header. Screenshots attached.
Are you saying you also want to display this title in the other display mode (not III)? Unfortunately that is not easily achieved with a simple CSS adjustment. The title information is not included in the markup or DOM for each RFG row in the other display mode, so I don't know a simple way to display the title unless you are in III display mode. There are no public APIs available for adjusting the markup template, unfortunately.

[kelvinL-2]

Dear Christian Cox,

Thanks for your reply. I finally fix the table size by adding the admin style

.c-rgx__body {
    overflow: scroll;
}

.c-rgx__td, .c-rgx__th {
    padding: 5px 5px !important;
}

.c-rgx__table--master th:nth-child(3),
.c-rgx__table--master td:nth-child(3),
.c-rgx__table--master th:nth-child(5),
.c-rgx__table--master td:nth-child(5),
.c-rgx__table--master th:nth-last-child(2),
.c-rgx__table--master td:nth-last-child(2) {
    min-width: 120px !important;
}

I do suggest Toolset to consider adding below styles to default setting.
[php]
.c-rgx__body {
overflow: scroll;
}
</cdoe>

[Christian Cox]

Thank you for sharing the code that works for your case. I think a change to enable horizontal scrolling makes sense, but I think it will require more complex code to handle nested RFGs more effectively - each nested RFG also has a .c-rgx__body container element. I will ask the developers if the lack of horizontal scrolling here is a bug or if the change should be submitted as a feature request. I'll let you know what I find out.

[Christian Cox]

It seems that this issue was already noticed by our developers, and we have an internal ticket in place to add horizontal scrolling. We expect to resolve the issue permanently in a future release of the plugin, but I do not have a timeline available yet for its delivery. I can keep you posted through the ticket here as I receive more information.