• Resolved ccsmithwp

    (@ccsmithwp)


    Is it possible to make the admin pages (All {custom type}) pages horizontally scrollable? Like the Users table.

    I don’t see anything in any of the settings. Perhaps there is a filter? Perhaps a new setting could be added…

    • This topic was modified 1 year, 9 months ago by ccsmithwp.
Viewing 1 replies (of 1 total)
  • Plugin Support pdclark

    (@pdclark)

    This will be specific to your columns and desired widths, but below is an example which sets a minimum width for each column, then a specific width per-column.

    There is a link in the comments for a YouTube search on how to use the browser Web Inspector to find additional classes for other columns. The admin_footer action is set to output this stylesheet on both post listings and user listings.

    The below example is generic WordPress admin styling. It is not specific to Pods.

    <?php
    // This action adds things to the admin footer.
    // wp_enqueue_style() is an alternative method.
    add_action(
    	'admin_footer',
    	function() {
    		if (
    			'edit' !== get_current_screen()->base
    			&& 'users' !== get_current_screen()->base
    		) {
    			// Do nothing if this is not a post listing or user listing.
    			return;
    		}
    		// Output a stylesheet (CSS).
    		// Search YouTube for "how to test css with web inspector":
    		// https://www.youtube.com/results?search_query=how+to+test+css+with+web+inspector
    		?>
    <style>
    	/* Only do this for the non-mobile view. */
    @media only screen and (min-width: 700px) {
    	/* Don't scroll the window horizontally */
    	#wpwrap {
    		overflow-x: hidden;
    	}
    	/* Make the outer post listing table scroll horizontally. */
    	#wpwrap .wp-list-table {
    		overflow-x: scroll;
    		max-width: 95vw;
    		display:block;
    	}
    	/* Treat the table header, body, and footer like a block layout instead of a table. */
    	.wp-list-table thead, #the-list, .wp-list-table tfoot {
    		width: auto;
    	}
    	/* Minimum width for each column and header. */
    	#wpwrap .wp-list-table th,
    	#wpwrap .wp-list-table td {
    		min-width: 20vw;
    	}
    	/* Minimum width for a specific column and header. */
    	/* "vw" is a unit meaning percentage of viewport (window) width. */
    	/* See the YouTube search linked above for more information on identifying specific column classes. */
    	#wpwrap .wp-list-table .column-title {
    		min-width: 40vw;
    	}
    }
    </style>
    		<?php
    	},
    	100
    );
Viewing 1 replies (of 1 total)

The topic ‘Admin UI – scrollable?’ is closed to new replies.