Unanswered

Responsive layout for PCF component

(0) Share

Report

Posted on by CU10090150-0

I have PCF component. The Component layout works fine when i preview it but in Play mode the scroll gets activated.

It is a table and I set the width to 100%, I also set the column width to fixed 5%,45% ratio. But whatever we do the scroll is enabled in the fullscreen playmode. Is there a way we can get the table to display within the layout without enabling the scroll.?

'<table id="ABC" border="1"><tr><th data-f-bold="true" class = "Line1">Line Number</th>
<th data-f-bold="true" class= "File1">File 1</th><th data-f-bold="true" class="Line1">Line Number</th>
<th data-f-bold="true" class="File1">File 2</th></tr><tbody>';

I have set the App Settings as follows:

The css file was defined as below.

Categories:

Building Power Apps

I have the same question (0)

All responses (2)

Answers (1)

Verified answer

Garima_PowerPlatform 170 on at

Like (3)

Report

Responsive layout for PCF component

Hi,

Table’s width is explicitly set to fit within the parent container.

#ABC {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}

Define the column widths explicitly and proportionally using percentages
.Line1 {
width: 5%;
word-wrap: break-word; /* Prevents content overflow */
}
.File1 {
width: 45%;
word-wrap: break-word; /* Prevents content overflow */
}

Check the parent container’s width and height in Play mode to ensure it adjusts dynamically to the screen size:
.parent-container {
width: 100%;
height: auto;
overflow: hidden; /* Prevents scrollbars */
display: flex; /* Optional: Ensures flexible layout */
}

Was this reply helpful? Yes No
CU10090150-0 52 on at

Like (0)

Report

Responsive layout for PCF component

Explicitly defining the table's width definitely solved the problem. Thanks Much for the help @Garima_PowerPlatform

Was this reply helpful? Yes No