Power Platform Community Forum Thread Details

Potential discrepancy between visual width and actual width of field in model driven app form affecting pcf rendering.

Hello, I am facing an issue with correctly rendering a custom component on a model driven app field.

The component consists of a text field that only accepts numbers, with a list of items representing the numbers already submitted.

Here is an example screenshot of the component while testing it in the local host:

The four lines at the top are for debugging purposes and represent from top to bottom: The current calculated max number of items per row (based on an item's width and the container's width), the width of each item, the width of the entire container and the width of a filled row of items given the previously mentioned numbers.

The component is made to dynamically change the number of items per row and all other necessary data to fit whatever width the container has. For example:

My problem occurs when pushing and testing it on the model driven app, here is a screenshot:

As is visible, the items on the far right are cut off, with their full width represented in the black outline. There also is another item on each row that is completely invisible as the entire rectangle is cut off, also represented with the black outline.

As you can see, in this case the container's width is close to 775. Now if I test it locally with a container of width 775, I get this:

Which is the expected result, with the items that would've initially been hidden are now shown. This is the same set of numbers, so you can see the 14 and 55 on the far right of the first and second rows that were invisible in the above picture.

Note that in both cases, the Items count per row, items width, container width and total items width are all the same, which leads me to believe there is a discrepancy between the visual width and calculated width provided to the component on a model driven app field.

Any help is appreciated.

Categories:

Power Apps component framework

Quick Links

Leaderboard > Power Apps - Power Apps Pro Dev & ISV