Home / Questions / 532260
Accepted
ZCH
Asked: 2022-07-06 12:28:12 +0800 CST 2022-07-06 12:28:12 +0800 CST

How to make two columns in an HTML form stay on the same row, with Materialize css?

  • 772

I'm making an HTML form with Materialize css, but I don't know how to make the checkboxand the remain on the same line. <input tipe="text">I add my HTML:

HTML
<div class="row section z-depth-2 ">
  <div class="col s3">
    <input type="checkbox" id='producto1'>
    <label for="producto1">Producto 1</label>
  </div>
  <div class="input-field col s9">
    <input type="number"  id="item" class="validate active">
    <label for="item" class="active">Cantidad</label>
  </div>
  <div class="col s3">
    <input type="checkbox" id='producto2'>
    <label for="producto2">Producto 2</label>
  </div>
  <div class="input-field col s9">
    <input type="number"  id="item2" class="validate active">
    <label for="item2" class="active">Cantidad</label>
  </div>
</div>

And this is the result, where you can see the checkbox above instead of being on the same line as the <input tipe="text">: enter image description here

html

1 Answers

  1. Best Answer

    I guess you want something like this:

    <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="row sevction z-depth-2 ">
  <div class="input-field col s3">
    <label for="producto1">
        <input type="checkbox" id='producto1'>
        <span>Producto 1</span>
    </label>
  </div>
  <div class="input-field  col s9">
    <input type="number" id="item" class="validate active">
    <label for="item" class="active">Cantidad</label>
  </div>
  <div class="input-field col s3">
    <label for="producto2">
        <input type="checkbox" id='producto2'>
        <span>Producto 2</span>
    </label>
  </div>
  <div class="input-field col s9">
    <input type="number" id="item2" class="validate active">
    <label for="item2" class="active">Cantidad</label>
  </div>
</div>

    I've done it by looking at this documentation for checkboxes, and this other documentation for inputs, from the official materialize site.

    • 2