Tips for creating an easyui layout using multiple nested layouts

I have integrated easyui nested layout into my application. I followed the code snippet provided in the easyui demo.

<div class="easyui-layout" style="width:700px;height:350px;">
        <div data-options="region:'north'" style="height:50px"></div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
        <div data-options="region:'center',iconCls:'icon-ok'" title="Center">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                <div data-options="region:'center',border:false"></div>
            </div>
        </div>
 </div>

For a live demonstration, you can visit the link below:

I am looking to implement multiple inner layouts following this structure.

<div class="easyui-layout" style="width:700px;height:350px;">
         <div data-options="region:'north'" style="height:50px"></div>
         <div data-options="region:'south',split:true" style="height:50px;"></div>
         <div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
         <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
         <div data-options="region:'center',iconCls:'icon-ok'" title="Center">
             <div class="easyui-layout" data-options="fit:true" id="innerlayout1">
                 <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                 <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                 <div data-options="region:'center',border:false"></div>
             </div>
             <div class="easyui-layout" data-options="fit:true" id="innerlayout2" style="display:none;">
                          <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                          <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                          <div data-options="region:'center',border:false"></div>
             </div>
             <div class="easyui-layout" data-options="fit:true" id="innerlayout3" style="display:none;">
                          <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                          <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                          <div data-options="region:'center',border:false"></div>
             </div>
         </div>
 </div>

The first inner layout is visible by default and this causes the east region to be expanded. However, when another inner layout becomes visible, the rest are hidden and the east region collapses. The issue I am facing is a white space appearing between the center and east regions when the east region is collapsed. I would like the center region to expand and fill this gap.

Apologies for any language errors. Can someone please assist me with resolving this problem?

jqueryhtmlcssjquery-easyui

Answer №1

If I grasp your intention correctly, your task involves splitting the center into west, center, east and then subdividing each of those into north, west, and center:

<div class="easyui-layout" data-options="fit:true";">
        <div data-options="region:'north',split:true" style="height:50px"></div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
        <div data-options="region:'center', split:true">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'east',split:true" style="width:250px">
                     <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:true" Title="Center East" style="height:150px"></div>
                        <div data-options="region:'west',split:true"  style="width:125px;"></div>
                        <div data-options="region:'center',split:true"></div>
                    </div>
                </div>
                <div data-options="region:'west',split:true" style="width:250px">
                    <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:true" Title="Center West" style="height:150px"></div>
                        <div data-options="region:'west',split:true"  style="width:125px;"></div>
                        <div data-options="region:'center',split:true"></div>
                    </div>
                </div>
                <div data-options="region:'center',split:true" >
                   <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:true" Title="Center Center" style="height:150px"></div>
                        <div data-options="region:'west',split:true"  style="width:125px;"></div>
                        <div data-options="region:'center',split:true"></div>
                    </div>
                </div>
            </div>
        </div>
     </div>

Outcome:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When an error message is displayed in the textField, the Material UI button shifts downward

I have incorporated the material UI error message display into my text field. When I click on the button without entering any text in the field, an error message pops up which pushes down the button. I am looking for a way to prevent this behavior but have ...

cssreactjsmaterial-ui

Can you explain the function of this particular jQuery statement?

function setReplicate() { $('.replicate').live("click",function(){ var nm=$(this).attr('name'); var cntr=$(this).attr('cntr'); var vpmo=$(this).attr('vpmo'); var vl=$(this).parent().prev ...

jquerycoldfusion-8

Removing items from a list in a Vue.js application

I've encountered an issue with my code. I'm attempting to remove a "joke" from a list, but it consistently removes the joke that was inputted before the one I'm actually trying to delete. I'm struggling to identify what mistake I might ...

htmljsonvue.js

Is it possible to remove tsconfig.spec.json from an Angular project?

I recently started learning Angular and was introduced to the files tsconfig.app.json and tsconfig.spec.json when setting up an Angular app using Angular-CLI. I found a helpful point about these files on this website. Both tsconfig.*.json files serve as ...

htmlangulartypescriptunit-testingangular-cli

How can I dynamically resize an element based on the height of its content in Ionic?

Is there a way to make my element expand conditionally? I would like it to expand on click based on the height of its content. This is what the component's HTML looks like: <div class="container" [style.height]="enlarged === true ? ...

htmlcssangularionic-frameworkionic4

"Exploring the process of integrating a controller into an external HTML file using AngularJS

I'm relatively new to AngularJS. In my web app, I have a set of buttons: index.html <button class="aButton">a</button> <button class="bButton">b</button> <script> $(document).ready(function(){ $(".aButton"). ...

javascripthtmlangularjsiframe

Is there a way to make the navigation menu collapse only on mobile devices and not on desktop?

I have been attempting to create a collapsible nav menu that only collapses on mobile devices, and not on desktops. When I include the code data-toggle="collapse" data-target="#navbarResponsive", it successfully collapses on mobile, but then the nav items ...

htmlbootstrap-4navbar

Get rid of the .php extension in the URL completely

Lately, I've been experimenting a lot with the .php extension. I successfully used mod_rewrite (via .htaccess) to redirect from www.example.com/example.php to www.exmaple.com/example. Everything is running smoothly. However, I noticed that even though ...

javascriptphphtmlcss

The Verdana font in Microsoft Word appears with a distinct rendering when converted to an HTML-based

I'm currently working on generating a PDF from an HTML template. Our customer provided the template they previously used in Word, and they require the font to be Verdana. The challenge I'm facing is that Verdana looks smaller and has a different ...

htmlcssasp.net-corefontsselectpdf

Display an "add to cart" button and a discount image when hovering over

Currently, I am in the process of developing an Online Shopping website using PHP. To enhance the design of my website, I have implemented bootstrap. One specific query I have is how to display an 'add to cart' button and a discount image when a ...

javascriptphpcss

Live search feature for multiple input fields using jQuery for an array of elements

I am currently trying to implement a jQuery live search feature for multiple input fields. The live search works perfectly fine with just one input field (without an array), but when using multiple search fields with an array, nothing seems to happen. ...

jqueryarrayslivesearch

Maya model being loaded using Three.js

I've been following a tutorial on how to load Maya models using Three.js, which you can find here. Everything is going smoothly, but the tutorial only covers loading models with a single texture. Below is the source code snippet from the tutorial: ...

javascripthtmlthree.jswebglmaya

"Utilizing Bootstrap to create a visually appealing image and text combination in the

I need to arrange the image, first span, and second span in a vertical stack for xs devices. The alignment should be centered for xs devices. If you want to see my code: CLICK HERE <div class="row"> <div> <div class="col-md-9 c ...

htmlcsstwitter-bootstrap-3

Implement a jQuery slideshow with a full background image, aiming to set up a clickable link on the final image of the

Could someone please help me with a query I have regarding a background image slide show using jQuery code? I have set up a slide show with multiple images and would like to make the last image clickable. Is it possible to achieve this specific functionali ...

javascriptjqueryhtmlcssimage

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

htmlcsscss-grid

Having trouble getting the dropdown to display JSON data properly

I am attempting to retrieve JSON data from a PHP file and utilize it to populate a dropdown menu. The JSON is being retrieved successfully from the PHP file and it appears as follows: [{"state":"AL"},{"state":"AK"},{"state":"AZ"},{"state":"AR"}] While i ...

javascriptphpjqueryjson

Exploring the JSON structure

Struggling to come up with a solution as I am limited by certain restrictions. I need to create a mobile navigation system using a JSON object provided by the proprietary server. The only allowed framework is jQuery 1.12.4, no other frameworks or updated v ...

javascriptjqueryjson

Trigger the activation of an input field upon clicking an image labeled "edit"

I am currently developing a website where administrators have access to a dashboard page that displays a list of users. I am looking to implement a feature that allows admins to change the roles of other users directly from the same table row. Below is th ...

javascriptphphtmlaide

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

jqueryhtmlcsstwitter-bootstrapanimation

adjust the width of an element based on the size of characters within it

I need to ensure that the width of a div is equivalent to 10 characters If one character is equal to 2px, then I want the width to be 20px, even if the text is only 4 characters long. <div class="row"> <div class="key">City</div> ...

htmlcss