Address Field not showing options when typing - any modules that has address field (only shows when the page is refreshed) sugarcrm v13.0.2

has anyone encounter this issue in v13.0.2 when i go to another page then going back in creation example "Accounts module" it has address field it will not display some options of the location when typing

however in the same page when i refresh and then retyping again it will now show the options

Parents

0 Matthew Rees-George 14 days ago
Hi Jurie,

Sugar changed the z-order of the create drawer. Google's dropdown is displayed but it is behind the drawer.

When you refresh it doesn't create a drawer instead it routes directly to the ../create page, so it works correctly.

We fixed it by adding this to the custom.less file:

.pac-container {
z-index:99999 !important;
}

There is probably a way to fix it using javascript as well.

Regards,
Matthew
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel

0 Matthew Rees-George 18 hours ago in reply to Matthew Rees-George

For reference, this is how you modify the z-index using javascript. This is after you call google.maps.places.Autocomplete():

// We need to bring the .pac-container forward in the z-order so it isn't hidden by the create drawer
// This came from the chatgpt prompt "with jquery how do I add a style to google auto complete pac-container class"
const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if ($(mutation.addedNodes).hasClass('pac-container')) {
            $('.pac-container').css({
                'z-index': 999999
            });
            observer.disconnect(); // Stop observing after styling
        }
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

As the comment says, chatgpt gave me the idea on how to catch the .pac-container being created so that the css can be modified. There doesn't seem to be any events or callbacks from the google autocomplete object to do this.

Reply

0 Matthew Rees-George 18 hours ago in reply to Matthew Rees-George

For reference, this is how you modify the z-index using javascript. This is after you call google.maps.places.Autocomplete():

// We need to bring the .pac-container forward in the z-order so it isn't hidden by the create drawer
// This came from the chatgpt prompt "with jquery how do I add a style to google auto complete pac-container class"
const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if ($(mutation.addedNodes).hasClass('pac-container')) {
            $('.pac-container').css({
                'z-index': 999999
            });
            observer.disconnect(); // Stop observing after styling
        }
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

Children

No Data