cssreactjstypescriptmaterial-uidemo

React Form Hook: make selectors equal width again

Here's a link to codesandbox of this form I'm trying to make Using React form hooks and material ui. Code is inside CreateEmployee.tsx file under components\execute folder. UI Screenshot is below.

I'm trying to make:

  1. The selector (background color: aqua) for gender and Designation be equal width.
  2. The Submit button a bit larger, with more prominent font.

But I'm unable to do so with my limited css knowledge. Can someone please help?

Form Screenshot

Solution

  • Here is how you can make select elements to be same width:

    select[name="Gender"],
select[name="Designation"] {
  min-width: 150px;
}

    Here is how to make 50% split in rows with select elements:

    .form-label-group label {
  background-color: yellow;
  width: 50%;
}

    Submit button:

    input[type=submit] {
  width: 100px;
  font-size: 1.25em;
}

    In regards to submit button, it's better to add className="anythingyouwant" to button element and change (in css) input[type=submit] to .anythingyouwant