cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
paulsnolan
Helper IV
Helper IV

How to customize the columns in a 2 column section

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.

1 ACCEPTED SOLUTION

Accepted Solutions

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: 

 

ragavanrajan_0-1615544630264.png

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.

View solution in original post

4 REPLIES 4
ragavanrajan
Super User
Super User

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: 

 

ragavanrajan_0-1615482895980.png

 

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.

 

 

 

 

Thanks 

 

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

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: 

 

ragavanrajan_0-1615544630264.png

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.

View solution in original post

Thanks ragavanrajan

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (1,250)