Hi @tracyci,
I understand you have created some fields which are not displaying on individual lines as expected.
Custom styling of fields can be done by adding CSS to the WordPress admin. This is a custom thing to do depending on desired outcome.
At the same time, it sounds like there may be a plugin conflict or file not loading.
Can you provide some additional information about your exact configuration and expectations? For example:
- When you say the fields show up in Products, do you mean they are extending the WooCommerce Products Post Type, or a Custom Post Type called Products, or something else? If WooCommerce Product, is it the classic Product user interface or the new Product user interface?
- Did you create the 4 fields individually using Pods Admin?
- What types of fields are they?
- Are they individual fields, repeatable, field groups?
- Does their appearance change if all other plugins are disabled? If Pods plugin is updated or reinstalled? If Pods plugin caches and browser caches are cleared?
- Have you added any custom CSS stylesheets to the admin?
- Is the desired effect for the fields to be full width individually, each in rows, or 25% width, all in one row?
Thread Starter
trayci
(@trayci)
Thank you for your reply
They show up perfectly where I need them to in products but for example 3 of the fields are
Make……………………………………………………………………………………………………………………………..
Model………………………………………………………………………………………………………………………………
Manufacturer…………………………………………………………………………………………………………………
These all require one-word input text when adding a product but they appear in the long line each – I would like them side by side
Like this
Make……….. Model………… Manufacturer…………
Can they appear on the product page inline not stacked?
- Add a field group titled
Car Info.
- Move fields named
Make, Model, and Manufacturer to the new field group. Save the Pod.
- Activate the code below with a Code Snippets plugin, or install it as its own plugin by adding to
wp-content/plugins.
- Note the description, field names, group names, inline comments, and search link in comments regarding how to inspect and modify CSS further.
<?php
/**
* Plugin Name: Pods — Group Columns
* Description: Display fields named <code>Make</code>, <code>Model</code>, and <code>Manufacturer</code> within field group <code>Car Info</code> as columns.
* Version: 1
* Plugin URI: https://wordpress.org/support/topic/inline-filed/
*/
// Add Stylesheet to WordPress admin footer.
add_action(
'admin_footer',
function() {
/**
* CSS Stylesheet.
*
* @see https://www.youtube.com/results?search_query=Inspect+CSS+browser
*/
?>
<style>
/* Field Group: Display as block instead of table. */
#pods-meta-car-info table.pods-metabox > tbody {
display: block;
}
/* Columns width by field names. Flex or Grid could also be used. */
#pods-meta-car-info .pods-form-ui-row-name-make,
#pods-meta-car-info .pods-form-ui-row-name-model,
#pods-meta-car-info .pods-form-ui-row-name-manufacturer {
width: 33%;
float: left ;
display: block;
}
/* Reduce padding around input; increase width of label and field. */
#pods-meta-car-info th,
#pods-meta-car-info td {
width: 95%;
display: block;
padding: 5px 0 10px 0;
}
</style>
<?php
}
);