In the custom PCF component, the width and height of each container should be dynamically calculated using:
let containerWidth = Parent.Width * 0.8; // For example, using 80% of the screen width
let containerHeight = Parent.Height * 0.6; // For example, using 60% of the screen height
Consider using Flexbox to handle the dynamic resizing and layout arrangement of the containers.
.container {
display: flex;
flex-direction: column; /* Switch to column for portrait mode */
justify-content: space-around; /* Distribute space evenly between items */
}
In your code where you set the dateContainer or loop over the list of dates
let dateRange = dates.slice(0, 7); // Show only 7 days
For portrait mode, you might want to stack the dates vertically
.dates-header {
display: flex;
flex-direction: column; /* Stack dates vertically in portrait */
}
You can use the Container.Width and Container.Height properties dynamically to fit the content
containerWidth = Parent.Width / 2; // Adjust width to half the screen
containerHeight = Parent.Height / 3; // Adjust height to fit 3 items vertically
pls try.
thanks
