Magento 2 Messages – How to Move Success and Error Messages Position

Finally I figure out this issue and fixed it.

I had created a custom theme on magento version 2.0 and overridden few default templates/js files of core Luma theme.

After few days, that instance was corrupted and hence I've installed latest Magento version i.e. 2.1.1 and used my custom theme there. Everything working fine except this issue. So I looked into it and found that Magento Team has done some changes in core templates/js etc. Then I found the culprit is messages.js at app\design\frontend\Vendor\theme_name\Magento_Theme\web\js\view. I've replaced that file, deployed content and Magento showing success/failure messages now.

Hope someone may help this.

Thanks.

[Update]

After all, I found a solution for this problem. It's made me sweat too much.

Message was inited at messages.phtml on Magento_Theme package(module-theme\view\frontend\templates\messages.phtml).

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div data-bind="scope: 'messages'">
    <div data-bind="foreach: { data: messages().messages, as: 'message' },attr:{class:((messages().messages && messages().messages.length > 0)?'messages block __caution mB30':'')}" class="">
    <p class="caution_text" data-bind="html: message.text, visible:message.text!='One or more input exceptions have occurred.'"></p>
</div>

So I think we have to remove message after it display. So I override magento theme and add this script end of messages.phtm file. It works like a charm.

<script>
    require(['jquery', 'jquery/jquery-storageapi'], function($) {
        var storage = $.initNamespaceStorage('mage-cache-storage').localStorage;
        storage.remove('messages');
    });
</script>

Hope this help!