cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
paragchapre
Helper I
Helper I

Create Four/ Five column sections

Hello,

 

I am trying to create the Four/Five columns section in the Power app portal but I don't find any way.

paragchapre_0-1613659615731.png

 

Does anybody know how can I do that?

1 ACCEPTED SOLUTION

Accepted Solutions

Hi @paragchapre , 

 

If it is for re use as @OOlashyn  mentioned please either create your new web template and inject it in web pages where it is needed or modify the existing template. If it is for one page, you can also simply change the div structure in portal studio like below 

 

 

<p>This website uses sample data for illustration purposes. You can build pages using multiple templates available.</p>
<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;">
  <div class="container" style="display: flex; flex-wrap: wrap;">
    <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
    <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
    <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
    <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
  </div>
</div>

 

And the output look like below: 

 

 

layoutpng.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
OOlashyn
Super User
Super User

Hi @paragchapre ,

 

There is no drag and drop component in Portal Studio for more than 3 columns as of now. To have 4/5 column section you would need to customize the code of the web template.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

Do you know how can I customize the web template?

You need to go to Portal Management app > Web Templates, find the necessary template and modify it. You can learn more about web templates in this official docs.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

Hi @paragchapre , 

 

If it is for re use as @OOlashyn  mentioned please either create your new web template and inject it in web pages where it is needed or modify the existing template. If it is for one page, you can also simply change the div structure in portal studio like below 

 

 

<p>This website uses sample data for illustration purposes. You can build pages using multiple templates available.</p>
<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;">
  <div class="container" style="display: flex; flex-wrap: wrap;">
    <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
    <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
    <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
    <div class="col-md-3 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
  </div>
</div>

 

And the output look like below: 

 

 

layoutpng.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

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Top Solution Authors
Users online (89,099)