Title: How to place inline window into Tab Panel
Post by: Aod47 on July 10, 2019, 07:40:36 PM
Could you please advice how to place inline window into tab panel with nest tab like attached picture? I tried this code but not work. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Texbox Multiline Height 100%</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:350px">
<div title="Main Tab 1" style="padding:10px;">
<div class="easyui-tabs" data-options="fit:true,plain:true">
<div title="Sub Tab 1" style="padding:10px;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open Inline Window</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close Inline Window</a>
</div>
<div title="Sub Tab 2" style="padding:10px;">Content 2</div>
<div title="Sub Tab 3" style="padding:10px;">Content 3</div>
</div>
<div id="w" class="easyui-window" data-options="title:'Inline Window',inline:true" style="width:690px;height:300px;padding:10px">
This window should stay inside Main Tab 1 but cover Sub Tab 1,2,3
</div>
</div>
<div title="Main Tab 2" style="padding:10px;">
</div>
</div>
</body>
</html>
Title: Re: How to place inline window into Tab Panel
Post by: Aod47 on July 10, 2019, 08:19:11 PM
OK, I got It. Set div style position to relative. <div title="Main Tab 1" style="position:relative,padding:10px;">
Title: Re: How to place inline window into Tab Panel
Post by: Aod47 on July 10, 2019, 08:55:48 PM
set div position relative with padding 10px made a new problem.
window not center in a parent.
Could you help? Please.
Title: Re: How to place inline window into Tab Panel
Post by: jahangir on July 10, 2019, 09:57:49 PM
Please try this way. <div title="Main Tab 1" style="position:relative; overflow:hidden; top: 0px; left: 0px; margin:auto;">
Title: Re: How to place inline window into Tab Panel
Post by: Aod47 on July 10, 2019, 10:31:31 PM
Thank you, Sir. But that way not work. I set top & left of window instead and it look cool. <div id="w" class="easyui-window" data-options="title:'Inline Window',inline:true,fit:true,modal:true" style="padding:10px; top:10px; left:10px;">
Full code <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Texbox Multiline Height 100%</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-tabs" data-options="fit:true,pill:true" >
<div title="Main Tab 1" style="position: relative; padding:10px;">
<div class="easyui-tabs" data-options="fit:true,plain:true,tabPosition:'left'">
<div title="Sub Tab 1" style="padding:10px;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open Inline Window</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close Inline Window</a>
</div>
<div title="Sub Tab 2" style="padding:10px;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open Inline Window</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close Inline Window</a>
</div>
<div title="Sub Tab 3" style="padding:10px;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open Inline Window</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close Inline Window</a>
</div>
</div>
<div id="w" class="easyui-window" data-options="title:'Inline Window',inline:true,fit:true,modal:true" style="padding:10px; top:10px; left:10px;">
This inline window use together by Sub Tab 1, 2, 3
</div>
</div>
<div title="Main Tab 2" style="padding:10px;">
</div>
</div>
</body>
</html>
|