cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
praneshJ
Helper III
Helper III

How to change Alignment of the fields on Entity forms (Create/Edit Forms)

Hello Experts,

 

I have one Crete Entity form displayed on the web page, as shown belowcreate form_blur.jpg

the Text input fields are not aligned in the straight line if you can see in the screen shot,

I believe that, It is happening because of the bigger field names in my entity. but I need to bring those in straight line to maintain consistency.

I have used 2-Column section in the layout while creating this form as shown below

praneshJ_0-1600947792824.png

 

Please suggest any resolution to bring the text input fields in the straight line.

 

any Quick help is really appreciable.

 

Regards,

Pranesh 

 

1 ACCEPTED SOLUTION

Accepted Solutions
justinburch
Microsoft
Microsoft

If you find you need custom CSS, this is typically what I use on projects. I usually have a custom CSS file added as a child Web File to the Home Page; just make sure it's named something.css and partial URL is something.css - e.g. custom.css - and it's Display Order is after theme.css and boostrap.min.css.

Display Order should have the following: bootstrap.min.css -> theme.css -> any custom CSS.css

 

td.clearfix.cell {
    vertical-align: bottom;
}
div.validators {
    display: none;
}

 

Before:

justinburch_1-1600971925034.png

After:

justinburch_0-1600971899210.png

 

View solution in original post

2 REPLIES 2
UlrikkeAkerbæk
Advocate I
Advocate I

Hello @praneshJ.

I think you are right, and this additional space is caused by label being too big.

 

I would think that the solution is to make the field name shorter. Usability is clearly important to you, and short labels make better user experience.

 

Update the label name in the form or configure Entity Form Metadata on the attribute to give it a shorter label.

 

If the long name is a hard requirement maybe try breaking the structure and letting the input field run two columns wide. You do this simplest from the Form editor in the Classic Experience in CDS/Dynamics:

1. Open the form in classic interface

2. Locate and double click on the field

3. Choose "Formatting" and "To columns"

 

Screenshot_1.jpg

 

If that is not an option the last thing you can try is cutting the label with custom CSS on the entity form - but then you would be better of giving the label a shorter name.

 

If you need any more information about any of these option please let me know. 

 

Hope it helps. Good luck.  

justinburch
Microsoft
Microsoft

If you find you need custom CSS, this is typically what I use on projects. I usually have a custom CSS file added as a child Web File to the Home Page; just make sure it's named something.css and partial URL is something.css - e.g. custom.css - and it's Display Order is after theme.css and boostrap.min.css.

Display Order should have the following: bootstrap.min.css -> theme.css -> any custom CSS.css

 

td.clearfix.cell {
    vertical-align: bottom;
}
div.validators {
    display: none;
}

 

Before:

justinburch_1-1600971925034.png

After:

justinburch_0-1600971899210.png

 

View solution in original post

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Power Apps June 2021

June Power Apps Community Call

Don't miss the call this month on June 16th - 8a PDT

Users online (60,716)