Fix ACF Gallery and back-end

• neosavedme

• November 24, 2020 at 6:41 am

Good morning all ,

I came here to share my attempt to fix a big mobile acf issue

I’m doing a basic and simple project, a real estate website
nothing fancy just an image gallery, posts with descriptions, lists and search filters. I know elementor builder will take care of all of this. Thank goodness there are options for responsive modes, so good. I can drink my coffee, water my flowers and feed the cats.

after the break, it’s time to install acf pro in the back-end acf takes care of menus and options and lots of nice fields,
the sun is coming back, perfect! it’s time to save and see the result. like everyone else, I’m happy on the desktop, everything is fine .. or almost (we’ll see why)

then came the inevitable moment to test acf on mobile, of course the “mobile first” rule is important. even in the back-end. This is when things went horribly wrong …

i took a look at the docs and forum to see if i can do anything to fix this .. nothing.

so I grabbed my adobe xd I reproduced the ACF display on mobile pixel by pixel to illustrate the problem and the solutions

to be sure that this is not a problem coming from me, I did two clean installs with the latest wp and acf pro. the problems are still there (in fact they have been there for as long as I can remember back to 2019 ..)

to reproduce these bugs, just create different fields and try to use them in mobile mode there are probably many others that I have not yet tested

let’s try to correct and dive into details

-First detail, gallery field, a visual disaster, on mobile it only works once then it freezes, cannot open a photo, scroll or open the sidebar again. I tried to correct the display, but the bug that frezze is beyond me.

-Second detail, the display of dropwdown (taxonomy and select), the (+) add, the differences in colors, heights, font and padding, invisible scrollbar, I tried to correct all this to make them consistent and less disturbing in mobile, and I also prevent the auto focus keyboard on search.

function my_acf_input_admin_footer() {
	
?>
<script type="text/javascript">
(function($) {
	
// stop annoying keyboard popping up!  keep search input, but avoid autofocus on dropdown open
$('select').on('select2:open', function (e) {
    $('.select2-search input').prop('focus',false);
});
		
})(jQuery);	
	
</script>
<?php		
}

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

-third detail, the checkboxes in taxonomy, some simple adjustments, but the most important thing missing is a search to find the terms to check, because there will be hundreds soon … note that the (+ ) add is adjusted globally to stay at the same level of the label

here is the css code that I used :

add_action('acf/input/admin_head', 'my_acf_admin_head');
function my_acf_admin_head() {
?>
<style type="text/css">

	
/* Fix Buttons reapeter */
.acf-actions {
text-align: left;
}
.acf-gallery {
height: 450px!important;
}	
	
/* Fix taxonomy select2 */	
.select2-container.-acf .select2-selection {
min-height: 30px;
background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
background-size: 16px 16px;
}
.select2-selection__arrow {
display: none;	
}
.select2-selection__placeholder {
color: inherit!important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: left !important;
padding-right:3px;
}	
	
/* Mobile mode fields */	
@media screen and (max-width: 782px){

/* Adjust mobile fields */
#full {
min-width:100%;
 }
	
#half {
min-width:50%;
 }
	
/* Fix gallery-toolbar buttons*/	
.acf-hl>li {
display: grid;
min-width: 100%;
z-index: 9!important; 
}
	
/* Fix gallery-side*/	
.acf-gallery .acf-gallery-side {
position: fixed;
z-index: 1000;
}
	
/* Attempt to Fix gallery height*/	
.acf-gallery .acf-gallery-attachments {
height: 350px;
}
	
/* Fix acf-actions */	
.acf-actions {
padding: 5px!important;
margin: 0px!important;
top:-35px!important;
}
	
/* Fix taxonomy select2 */	
.select2-container.-acf .select2-selection {
min-height: 40px;
padding: 4px 8px;
font-size: 14px;
background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
    background-size: 16px 16px;
}
	
/* Fix taxonomy select2 disable arrow */
.select2-selection__arrow {
display: none;	
}
	
/* Fix taxonomy select2 color */
.select2-selection__placeholder {
color: inherit!important;
}
	
/* Fix taxonomy select2 padding */	
.select2-container .select2-selection--single .select2-selection__rendered {
padding-left:0px !important;
padding-right:0px!important;
}
	
/* Fix numeric fields */	
.acf-input-append,.acf-input-prepend {
line-height: 2;
min-height: 40px;	
}
	
/* Fix radio list */
ul.acf-radio-list li, ul.acf-checkbox-list li {
line-height: 35px;
}		
	
/* Fix Mobile make a clair visible scrollbar */
.acf-taxonomy-field .select2-results .acf-gallery-main, ::-webkit-scrollbar{
	width:20px;
	background-color: #F7F3F3;
}
	
.acf-taxonomy-field .select2-results .acf-gallery-main, ::-webkit-scrollbar-thumb{
	border-radius: 20px;
	background-color: #007CBA;
	border: 7px solid #f7f3f3;
	height: 90px;
}
	
.acf-taxonomy-field .select2-results .acf-gallery-main, ::-webkit-scrollbar-track{
	background-color: #f7f3f3;
	border-radius: 0;
}	
	
	
	
	
	
}	
</style>

<?php
}

that’s all I could do to make my interface less disruptive and mobile friendly and more welcoming to customers,

I will wait for the reaction and ideas of the community, maybe someone has something even better??

another detail … let’s try to stay positive and hope that the acf team surprises us with a mobile responsive fileds and friendly back-end update. I’m sure the chief designer at the acf team has something to tell us? I’m sure he doesn’t want to torture us creating css codes for simple fileds forever?

don’t forget I’m just a simple user, I just know a bit of css …

• John Huebner

• January 4, 2021 at 9:30 am

If you want the developer’s attention on this then you need to submit it here https://www.advancedcustomfields.com/contact/

• Galapagos23

• March 28, 2024 at 11:38 am

Wow!!! this is what I’ve been searching for the last year!!! where is the code for the gallery field fix please?!!! @neosavedme

I am really baffled that there is no demand for fixing the gallery on mobile. I use frontend forms to let users edit their posts, but when it comes to gallery, I can not use that field.
They can’t reorder nor delete images, it is a real shame.