prismcolour prismcolour - 7 months ago 53
CSS Question

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">


.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:

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.


Answer Source

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 class="input-field col s12 l6">
                <input id="last_name" type="text" class="validate">
                <label for="last_name">Last Name</label>
            <div class="input-field col s12">
              <input id="email" type="email" class="validate">
              <label for="email">Email</label>
              <div class="input-field col s12">
                <textarea id="textarea1" class="materialize-textarea">
                <label for="textarea1">Comments</label>
            <a class="waves-effect waves-light btn">Submit</a>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download