Toast - Formatting notify message to display multiline text

Hi Alex,
Thanks for your suggestion.
Now I am using the dxPopup control for showing my custom message. But here I am facing some design issues.
Let me explain in detail.
*************************
View:
******
 <div id="popupContainer" data-bind="dxPopup:{visible:popupVisible, shownAction: ShowContent, showTitle: false,fullScreen:false, closeOnOutsideClick: true,position: {at: 'bottom' }, width: function() {return $(window).width() *0.9 }}">
            <div data-options="dxTemplate:{name: 'content'}">
                  Password and Email cannot be empty !
            </div>
         </div>
CSS:
****
.dx-popup-content
{
    height:auto !important;
     background-color: rgb(255, 138, 138);
}
Js:
***
 ShowContent: function (e) {
                       e.element.find('.dx-overlay-content').css('height','auto');
                        e.element.find('.dx-overlay-content').css('top', 'px');
                        e.element.find('.dx-overlay-content').css('bottom', '10px');
        }
In the js I am trying to change the height , top, bottom properties so that I looks like the dxToast message at the bottom of the view. But these properties are not affecting.
I have attached my dxPopup zip with actual requirement (actual.jpg) and existing requirement (require.jpg) as attachments. Please check.
Can you please help me to fix this design issue?

Hello Amit,
I've set the height of the popup window explicitly to 60px and specified the position in a different way:

HTML
<div id="popupContainer" data-bind="dxPopup: { visible: popupVisible, shownAction: ShowContent, showTitle: false, fullScreen: false, closeOnOutsideClick: true, position: { my: 'bottom', at: 'bottom' }, width: function () { return $(window).width() * 0.9 }, height: '60px' }">  
            <div data-options="dxTemplate:{name: 'content'}">  
                  Password and Email cannot be empty !  
            </div>  
         </div>  

In this case the window looks similar as per your screenshots. Does this solution suit your requirements?

Hi Alex,
Thanks for the code. But I am using the belwo Css for making the dxpopup message content height auto grow based on the content.
   ShowContent: function (e) {
                       e.element.find('.dx-overlay-content').css('height','auto');
                        e.element.find('.dx-overlay-content').css('top', 'px');
                        e.element.find('.dx-overlay-content').css('bottom', '10px');
        }
But any how, YOUR CODE HELPED me to achieve what I required. I have changed it according to my requirement.
Here is my code.
*****************
 <div id="popupContainer" data-bind="dxPopup: { visible: popupVisible, shownAction: ShowContent, showTitle: false, fullScreen: false, closeOnOutsideClick: true, position: { my: 'bottom', at: 'bottom' }, width: function () { return $(window).width() * 0.9 }, height: function () { return $('text').height()} }">
            <div id="text" "data-options="dxTemplate:{name: 'content'}" style="height:auto">
                  Password and Email cannot be empty Password and Email cannot be empty
            </div>
         </div>
Explianation:
*************
The height of div "popupContainer" will resize based on the div "test"'s content.
Thanks again Alex. You can close this thread for now.
I will ping you back for further assistance if needed.
Regards,
Amit Mondal.