Scaling Issue

[YumaIT]

I have created a form that scales on a large screen with a resolution of 1920 x 1080:

1920x1080 Scaling.JPG (75.42 KiB) Viewed 2232 times

But it does not scale properly on a laptop screen with a resolution of 2256x1504:

2256x1504 Scaling.JPG (121.29 KiB) Viewed 2232 times

The line the Close button is on has the following items:

Text field (50 Star, column 1)
Cancel button (1 Star, column 2)
4 more columns (to get it to show within the box at the 1920x1080 scale)

Here is a picture of the Forms Designer placement:

Forms Designer Preview.JPG (31.57 KiB) Viewed 2232 times

Any insight on how to correct this?

[Nikita Kurguzov]

Dear YumaIT,
Unfortunately, the scaling will always be complicated with the classic SharePoint UI which Helpdesk currently uses, due to its reliance on HTML tables. We're in the process of creating a Modern UI version for SP Online, which should make this easier, but until then, it's possible to use media queries to change the layout for different screens.

For example, I can see that you experience the issue with the Cancel button. I am not sure if you've modified its TABLE CELL property, but by default it has CSS class pl-header-button-cell and I'll be using it in my example. If you've modified it, you might need to add the CSS class back for this to work.

What you need to do, is find the resolution at which the button is going behind the UI, and modify its width so it moves to the left. This can be done with the following CSS code (resolution value is just an example), place it inside CSS editor in Forms Designer:

Code: Select all

@media only screen and (min-width: 2100px) {
    .pl-header-button-cell{
        width: 260px !important;    
    }
}

[YumaIT]

Thank you Nikita. I could not get it to work but I was able to make it work with "float" code:

float:right;
margin:0 80px 0 0;

The button scales with both resolutions now. Thanks again!