Search code examples
cssformsmobileresponsive-designmaterialize

How do I resize the input-field width for a responsive form in MaterializeCSS?

The input-field width is too short when resized for mobile. (viewing on iOS)

I looked at the CSS file for individual Materialize components and tried to adjust the % for @media in a custom css file and it didn't seem to change anything. This is what I did to customize the container class for mobile. I also tried to hard code the input-field in pixels by chaining multiple classes in a custom css file, but then there was the problem of centering the form.

Targeting the s12 in this div:

<div class="input-field col s12 m6 l6">

custom.scss 

.input-field.col.s12 { width: 200px; }

From Materialize form components: 

@media only screen and (max-width: 600px) {
.input-field .prefix ~ input {
width: 80%;
width: calc(100% - 3rem); } }

I set width to 100% from previous code block.

@media only screen and (max-width: 600px) {
.input-field .prefix ~ input {
width: 100%; } }

I attached a picture of what it looks like right now.

Thanks for any suggestions on how to fix this.

Added the codepen here: https://codepen.io/prismcolour/pen/zdWEKo

The form looks slightly better resized in codepen than on mobile. But still problematic because I would like the input-field width longer. Please see both codepen and picture as reference.

Mobile Version

Solution

  • The problem is you are giving too many row div. Which adds gutter of 15px on left and right.

    Just use one container div and a row div. That will solve your problem.

    Codepen Solution

        <div class="container">
      <div class="row">
          <form class="col s12">
              <div class="input-field col s12  l6">
                <input id="first_name" type="text" class="validate">
                <label for="first_name">First Name</label>
              </div>
              <div class="input-field col s12 l6">
                <input id="last_name" type="text" class="validate">
                <label for="last_name">Last Name</label>
              </div>
            <div class="input-field col s12">
              <input id="email" type="email" class="validate">
              <label for="email">Email</label>
            </div>
              <div class="input-field col s12">
                <textarea id="textarea1" class="materialize-textarea">
                </textarea>
                <label for="textarea1">Comments</label>
              </div>
            <a class="waves-effect waves-light btn">Submit</a>
          </form>
        </div>
       </div>