Popup message is on the top of the button of browser

The screenshot shows the Seven admin theme. Moving this issue over to that component.

This issue is not the seven theme. this is because the label is not required when adding action. this is present in action module.

Tested with the patch on 8.0.0-alpha14 using Simplytest.me on Firefox browser (v38.0.1) and the popup "Please fill out this field" appears below the erring field.

Please refer below

I dont think it should be in RTBC. Now Popup is coming over the toolbar section, Ideally page should be scroll to that point/field when any field got missed by an author.

Agreed with @Manjit.Singh that it should scroll to the correct point. At the moment the popup is in the correct place but the page doesn´t scroll to the field.

The scroll works in mobile.

I'm not sure if we should be marking fields required when they aren't to fix a UI bug. Is this a browser bug? Does it happen in Chrome?

@lewis adding a screencast :) Please check this.

I have test this patch and does not scroll up like @Manjit.Singh mention on comment #8. For this reason, I would change it back to "Needs Work". I personally, did not see any different with or without the patch. I test it out on a Google Chrome Version 43.0.2357.81 (64-bit) (Macbook Pro), and Fire Fox Developer Edition 40.0a2 (2015-05-29).

I'm changing the version to the latest version, which is beta 11.

@darol100 Thanks for the feedback. Actually that was just a suggestion from myside that When there was any validation error in a form then page should be scroll to that point/field.
With this, I think we can enhance the D8 functionality.

Also Screencast is just showing the popup issue.

After applied the patch I don't see any difference between before and after.
I think the redirection is working but in the desktop resolutions, the toolbar's height is hidding the field and make a weird effect because the message is showed but the field remains under the toolbar.
Desktop resolution
Mobile resolution
I have no clue which would be the solution.

Tested with Firefox 64, Chromium 71, IE 11 and Chrome 71 / FF 65 on Android. Seems to work as designed. Please reopen this issue if it still occurs.

Error still exists exactly like in the Screencast from Comment Comment #13. Tested with Chrome and Firefox.

In my opinion the issue can only be solved with Javascript.

Approach would be:

1. find the first :invalid field in the DOM
2. check if the 'admin menu' is displayed as sidebar
3. If not: scroll to the label of the invalid field minus the 'admin menu' height

The following code can be executed in the browser console and should solve the problem in most cases. Unfortunately, I don't know where I can insert the code in the Seven theme.

jQuery(document.body).on('click', '[type="submit"]', function(){
    const $submitButton = jQuery(this);
    const $form = $submitButton.closest('form');

    // check if the toolbar is horizontal and check if an invalid field exists
    if(jQuery(document.body).hasClass('toolbar-horizontal') && $form.find(':invalid').length) {
        const $adminToolbar = jQuery('#toolbar-administration');
        const toolbarHeight = $adminToolbar.find('#toolbar-bar').height();
        const toolbarTrayHeight = $adminToolbar.find('.toolbar-tray.is-active').height();
        const adminToolbarHeight = toolbarHeight + toolbarTrayHeight;
        const $firstInvalidField = $form.find(':invalid').not('fieldset').first();
        const $firstInvalidFieldLabel = $firstInvalidField.prev('label');
        const firstInvalidFieldOffset = parseInt($firstInvalidField.offset().top);
        const firstInvalidFieldLabelHeight = $firstInvalidFieldLabel.height();

        // scroll to the first invalid field 
        window.scrollTo(0, firstInvalidFieldOffset - adminToolbarHeight - firstInvalidFieldLabelHeight);		
    }
});

The issue is browser specific. For example, Safari browser doesn't show popup at all.
Also, this isn't a theme or module specific issue, virtually any form on any theme has this issue.

When I add the js code from #23 in my custom theme as a new library, this solve the problem, thanks @reenreenreen

@roald.umandal, Thank you for reporting this problem. We rely on issue reports like this to improve Drupal core.

Both #18 and #20 could not reproduce the problem. I tested this on 9.3.x, standard install, with Firefox 78.14.0esr and Chromium 90.0.4430.212-1 and was not able to reproduce this error. I tested with adding a node and adding an action.

Therefore, closing as cannot reproduce. If you are experiencing this problem reopen the issue, by setting the status to 'Active', and provide complete steps to reproduce the issue (starting from "Install Drupal core").

Thanks!