Print Page - Show form as MenuItem

Title: Show form as MenuItem
Post by: rkpunjal on October 28, 2015, 08:24:56 AM

I am struggling to show a login form as a Menu-Item.

This is the form I wanted to show as menu-item

http://www.jeasyui.com/demo/main/index.php?plugin=TextBox&theme=default&dir=ltr&pitem=

The issue issue is that the width of the text-boxes somehow automatically becomes zero or something, effectively destroying the look of the form.

If anybody has the solution to this, please help me.

Title: Re: Show form as MenuItem
Post by: stworthy on October 28, 2015, 11:37:50 PM

When display the menu item, call 'resize' method to resize the drop-down panel.

Code:

<a href="#" class="easyui-menubutton" data-options="menu:'#mm'">About</a>
<div id="mm" class="menu-content" style="width:400px;" data-options="
		onShow: function(){
			$(this).find('.easyui-panel').panel('resize');
		}
		">
    <div class="easyui-panel" title="Register" style="width:100%;padding:30px 60px">
        <div style="margin-bottom:20px">
            <div>Email:</div>
            <input class="easyui-textbox" data-options="prompt:'Enter a email address...',validType:'email'" style="width:100%;height:32px">
        </div>
        <div style="margin-bottom:20px">
            <div>First Name:</div>
            <input class="easyui-textbox" style="width:100%;height:32px">
        </div>
        <div style="margin-bottom:20px">
            <div>Last Name:</div>
            <input class="easyui-textbox" style="width:100%;height:32px">
        </div>
        <div style="margin-bottom:20px">
            <div>Company:</div>
            <input class="easyui-textbox" style="width:100%;height:32px">
        </div>
        
        <div>
            <a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">Register</a>
        </div>
    </div>
</div>

Title: Re: Show form as MenuItem
Post by: rkpunjal on November 02, 2015, 02:10:11 PM

Thank you very much.
That works !!!

and I was also able to retain the form even when I moved away the mouse by adding "hideOnUnhover: false" to the corresponding menu-content.
:) :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: rkpunjal on October 28, 2015, 08:24:56 AM