Page 1 of 1

Scaling Issue

Posted: 31 Oct 2018
by YumaIT
I have created a form that scales on a large screen with a resolution of 1920 x 1080:
1920x1080 Scaling.JPG
1920x1080 Scaling.JPG (75.42 KiB) Viewed 2233 times
But it does not scale properly on a laptop screen with a resolution of 2256x1504:
2256x1504 Scaling.JPG
2256x1504 Scaling.JPG (121.29 KiB) Viewed 2233 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
Forms Designer Preview.JPG (31.57 KiB) Viewed 2233 times
Any insight on how to correct this?

Re: Scaling Issue

Posted: 01 Nov 2018
by 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;    
    }
}

Re: Scaling Issue

Posted: 03 Nov 2018
by 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!