Hi Sultan Alnaabi, If your requirement is getting fulfilled using existing layout/block, then please go for custom using css/java script.

Regards

Shashi Kant Shukla

To create a full-width layout with a small left part for the menu and a larger right part for the content in OutSystems.

1. Create a new Block or Screen:

   • If you are creating a reusable layout, create a Block. Otherwise, you can do this directly in a Screen.

2. Use a Container for the Layout:

   • Add a container that will act as the parent for both the menu and the content sections.

3. Add Columns for the Menu and Content:

   • Inside the parent container, add two columns. You can use CSS classes to control the width of these columns.

Step 1: Create the Layout Structure

1. Add a Container:

   • Drag a Container widget onto your screen or block.
   • This will be the parent container for both the menu and content sections.

2. Add Columns Inside the Container:

   • Inside the parent container, add two more Containers. These will serve as the columns for the menu and content.

Step 2: Style the Columns

1. Set the Width of the Columns:
   • For the left column (menu), set a fixed width or a percentage width that suits your design.
   • For the right column (content), set it to take up the remaining space.

Example CSS

.container-full-width {

    display: flex;

    width: 100%;

    height: 100vh; /* Full height of the viewport */

}

.menu-column {

    width: 20%; /* Adjust this value as needed */

    background-color: #f4f4f4; /* Optional: background color for the menu */

}

.content-column {

    width: 80%; /* Remaining width */

    padding: 20px; /* Optional: padding for content */

}

Step 3: Apply Classes to Containers

1. Parent Container:

   • Set the parent container's class to container-full-width.

2. Left Column (Menu):

   • Set the left container's class to menu-column.

3. Right Column (Content):

   • Set the right container's class to content-column.

Step 4: Add Content

1. Add Menu Content:

   • Inside the menu-column container, add the elements that you want to include in your menu.

2. Add Main Content:

   • Inside the content-column container, add the elements that you want to display as the main content.

Hi Sultan Alnaabi ,

This was a demo link for  your reference: Click here

Step 1: Copy the side menu layout and paste it into the layout. Then rename it.

Step 2: Open the "copysidemenu laytop" and delete the unnecessary container.

like as

Step 3: Remove padding for the MainContentWrapper container.

"Step 4: Change the main screen LayoutTopMenu to the copysidemenu layout. 

 Refer the OML.

Hello @Sultan Alnaabi 

I understand your requirements, so I will share with you some examples with oml and screenshots that may help you.

First, 

I have to create a new layout as a block in the OutSystems interface, block name will be LayoutSidemenuwithContent, which you have to check in my OML share with you. i have to use Adaptive\ColumnsSmallLeft.

Second, 

I have to use LayoutSideMenu for best user interface that is already in your layouts Please check and use that