How to customize the columns in a 2 column section

Like (0) Share

Report

Posted on 11 Mar 2021 16:44:12 by paulsnolan

179

I have a question about a two columns section component in a portal page. Is it possible to adjust the width of the columns? I would like to have one column 2 thirds the width of the container and the second column 1 third the width. The first column will contain an entity list and the second column will contain some text related to the entity list. Also, I would like the container, which has the 2 columns, to be the full width of the section which holds the container. I'm trying to achieve the layout as in the attached image file. I’ve got the image at the top of the screenshot working fine by creating a new CSS section class and using it in the web template for the page.

2columnlayout.png

I have the same question (0)

All responses (4)

Answers (1)

ragavanrajan 7,036 Most Valuable Professional on 11 Mar 2021 at 17:15:26

Like (1)

Report
Re: How to customize the columns in a 2 column section

Hi @paulsnolan ,

By changing a few inbuilt classes you can easily achieve this. Please try the below code to get what you want as per your screenshot.

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;"> <div class="col-md-8 columnBlockLayout" style="display: flex; flex-direction: column;"></div> <div class="col-md-4 columnBlockLayout" style="display: flex; flex-direction: column;"></div> </div>

Output:

Hope it helps.

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
paulsnolan 179 on 12 Mar 2021 at 08:22:54

Like (0)

Report

Re: How to customize the columns in a 2 column section

Thanks

How would I place my entity list in the first column?

Was this reply helpful? Yes No
Verified answer

ragavanrajan 7,036 Most Valuable Professional on 12 Mar 2021 at 10:24:13

Like (0)

Report
Re: How to customize the columns in a 2 column section

Hi @paulsnolan ,

If you are using the portal studio. Just select the first column > Select components from the left menu and insert entity list.

or you can simply include the liquid tag inside the first column like below.

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;"> <div class="col-md-8 columnBlockLayout" style="display: flex; flex-direction: column; background: red;">{% include 'entity_list' key: 'EmpList' %}</div> <div class="col-md-4 columnBlockLayout" style="display: flex; flex-direction: column; background: green;"></div> </div>

Output:

Hope it helps.

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
paulsnolan 179 on 15 Mar 2021 at 14:19:52

Like (1)

Report

Re: How to customize the columns in a 2 column section

Thanks ragavanrajan

Was this reply helpful? Yes No

Join the conversation

Community site session details

How to customize the columns in a 2 column section

Helpful resources

News and Announcements

Quick Links

Responsible AI policies

Chiara Carbone – Community Spotlight

Congratulations to the October Top 10 Community Leaders!

Leaderboard > Power Pages

Featured topics

Product updates

Community site session details

How to customize the columns in a 2 column section

Helpful resources

News and Announcements

Quick Links

Responsible AI policies

Chiara Carbone – Community Spotlight

Congratulations to the October Top 10 Community Leaders!

Subscribe to this forum!

Select categories

Leaderboard > Power Pages

Featured topics

Product updates