Introduction
Creating layouts in the Power Apps portal app designer is a straightforward process for one, two, or three column sections. But what about when you need more? Exploring beyond the default, we delve into custom HTML and CSS solutions to develop four, five, or even six columns. Let’s discover how to effectively utilize Power Apps layouts for a more diverse page structure.
Understanding the Bootstrap Challenge
Power Apps portals utilize the Bootstrap framework (v3.3.6) by default, dividing pages into a 12-section grid. Constructing pages with one, two, three, or six equally spaced columns is simple given the nature of this division. However, five equally spaced columns present a challenge as 12 isn’t divisible evenly by 5. Here’s how we tackle this issue.
Creating a Four Column Section
Let’s start with a foundational layout. To establish a four column section, the technique involves defining four sections each occupying 3 units of the grid:
Column 1
Column 2
Column 3
Column 4
Constructing a Six Column Section
For a six column section, the strategy remains similar. Here, we designate six sections, each consuming 2 units of the grid:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Designing a Five Column Section
Now, the complex one – creating a five column section. For this, we leverage custom CSS. A snippet, inspired from a popular solution, is given below:
.fiveColLayoutXs,
.fiveColLayoutSm,
.fiveColLayoutMd,
.fiveColLayoutLg {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
...
...
After embedding the above CSS, you can then use the following markup to realize the five-column design on your portal page:
Column 1
...
...
Conclusion
Power Apps portal designer is versatile, but for non-standard column requirements, a touch of custom HTML and CSS is needed. In this guide, we navigated the process of defining four, five, and six column layouts, making your pages more dynamic and functional. Remember, with a deep understanding of the underlying framework, anything is possible.
If you’ve found this article insightful and wish to explore further, or require any technical assistance, feel free to contact us. Our team is always here to help and guide you to the best solutions tailored for your needs.
