Standardizing forms look in TheAdmin theme

[MikeAlhayek]

Is your feature request related to a problem? Please describe.

Currently in TheAdmin theme in OC, we don't have a standard style across the panel. There is some fields that show up with 50% (like the select menu) and there are others that show up 100% width (like the title part). OC should provide a default standardized look across the board so all of the forms look a like.

Additionally, It would be nice if we place the label on the same row as the input when the screen is large. So this way we can utilize the screen width and lessor the vertical scrolling.

Describe the solution you'd like

Make all inputs should be 100% width. Also, when the screen is large, we can place the label in the same row. Here is a code example of how I believe a form in OC should look like

    <form> 
    <div class="row mb-3">
      <label for="exampleFormControlInput1" class="col-form-label col-lg-2 col-xl-3 text-lg-end">Email address</label>
      <div class="col-lg-10 col-xl-9">     
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
      </div>
    </div>
    <div class="row mb-3">
      <label for="exampleFormControlTextarea1" class="col-form-label col-lg-2 col-xl-3 text-lg-end">Example textarea</label>
      <div class="col-lg-10 col-xl-9">     
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        <div class="hint">
            This is a hint
        </div>
      </div>
    </div>
  </form>

Here id a fiddler to allow you to evaluate the form for different screen sizes https://jsfiddle.net/crestapps/rhs5cmqb/13/

here are some screenshots of inconsistent forms

[Skrypt]

I think it was intentional to display these elements with different widths. Making the "Page size" 100% width for example would be unnecessary. So they have different widths per case. Maybe though here the "Default Time Zone" should be only 50% width.

[MikeAlhayek]

@Skrypt these screenshots are just an example of inconsistency. Look at some of the content fields, many of them are not the same width either.

I am suggesting we change all the forms to look the same by making the label on the same line as the input when the screen size is large. This will utilize the with of the screen so we have less scrolling and at the same time, the input fields look consistent across the entire site. Did you look at the fiddler link with example of the suggestion? If you do, change the size of the screen on the fiddler output just so you can see the label position change.

Here are screenshots from the fiddler

Large screen

Medium size screen

Mobile screen

[sebastienros]

I would agree with the labels to be responsive, but I don't think we should change the sizes of the smaller fields that were defined small explicitly.

[ldimitrijevic]

Hello, I agree with @MikeAlhayek . The user experience is so much important ! The fact that all the fields seem to be "random" size to the end user is not good. Why is there an empty space to the right of some fields? Why there isn't on others? Regards

[MikeAlhayek]

If you are interested in this, you may want to thumbs up the comment on the following link

https://github.com/OrchardCMS/OrchardCore/pull/12627#issuecomment-1360177019

We are doing a quick poll using thumbs up/down to see if this is something we want to merge into OrchardCore or not. We'll review the result in a week or so.