EasyUI Forum
November 30, 2025, 11:54:20 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > How to place inline window into Tab Panel
Pages: [1]
« previous next »
  Print  
Author Topic: How to place inline window into Tab Panel  (Read 11495 times)
Aod47
Jr. Member
**
Posts: 85


View Profile
« 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.

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="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>
Logged
Aod47
Jr. Member
**
Posts: 85


View Profile
« Reply #1 on: July 10, 2019, 08:19:11 PM »
OK, I got It. Set div style position to relative.

Code:
<div title="Main Tab 1" style="position:relative,padding:10px;">
Logged
Aod47
Jr. Member
**
Posts: 85


View Profile
« Reply #2 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.
Logged
jahangir
Jr. Member
**
Posts: 51



View Profile Email
« Reply #3 on: July 10, 2019, 09:57:49 PM »
Please try this way.

Code:
<div title="Main Tab 1" style="position:relative; overflow:hidden; top: 0px; left: 0px; margin:auto;">
Logged
Aod47
Jr. Member
**
Posts: 85


View Profile
« Reply #4 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.

Code:
<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

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>
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!