Idea

1
Replies
16
Views
Close popover
Amitabha Ghosh (AmitabhaG)
Areteans

Areteans
IN
AmitabhaG Member since 2019 4 posts
Areteans
Posted: January 18, 2021
Last activity: January 25, 2021

Vertical Layout group

Hi,

I don't if it is wise to share my thought here, but still, I am taking the chance.

In one of my projects, there was a requirement for a vertical layout group. I tried to customize the default horizontal layout group format with CSS, but I was stuck as the content area and header is wrapped inside a layout div for each layout in the DOM. Later, I tried with the Legacy left Tab. 

Can we work on any of the two options in the future? It will help most of the UI developers to modify according to the business requirements.

1. Creating a seperate OOTB UI element for the Vertical layout group.

2. Refactoring the HTML of existing default Layout group like Bootstrap

Below is an example of Bootstrap Tabs

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    
  </ul>

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
   </div>

If this is the layout format then we can modify it with a custom css class and small javascript..

Pega Platform 8.4.1 User Experience User Experience Designer