Answered

How to customize the columns in a 2 column section

(0) Share

Report

Posted on 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.

Categories:

Power Apps portals

I have the same question (0)

All responses (4)

Answers (1)

Sort by

ragavanrajan 7,044 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!
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 at

Like
a
(0)

Report
Copy link

Link copied!

Thanks

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

Was this reply helpful? Yes No
Verified answer

ragavanrajan 7,044 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!
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 at

Like
a
(1)

Report
Copy link

Link copied!

Thanks ragavanrajan

Was this reply helpful? Yes No