When creating a form in the Power Apps Portal, I have come across the need to reduce the width of the fields, where having a 100% width was not necessary. A recent example of this was for a Date Only field, where most of the field space was empty.
In the below example we will go through the steps to reduce the width of the field (by 50%) while still ensuring the responsiveness of the form remains intact.
Modify the CSS:
We will need to add in the class to the CSS file being referenced by the form. To reduce the size by 50% the below was used:
.w-50 {
width: 50%!important
}
The CSS file can be found under Content > Web Files in the Portal Management app.
Modify the Custom JavaScript:
Once this has been added to the CSS, we will need to apply the div class to that specific field using JavaScript. To access the custom JavaScript for the form, you can navigate to Content > Basic Forms then select the form you would like to make the changes to
Once the form is selected, navigate to the Additional Settings tab
scroll to the bottom where you will find a panel called Custom JavaScript
This is where we will be entering the JavaScript, and any other JavaScript that we would like to enforce on the form.
Since we always want this field to be displayed as 50% width, we want the JavaScript to be executed on the initial load of the form so we add the following:
example.forms.OnLoad(() => {
});
Now to set the field, we will be applying the Div Class where #orby_dob is the name of the field:
$( “#orby_dob”).closest(“td”).children().wrapAll(”
);
And we’re done!
Before:
After:
