Search code examples
cssmaterialize

Materializecss fileinput button right

I would like to use file input in the materializecss. The template from website adds button at the left position and then text box at the right postion https://www.tutorialspoint.com/materialize/materialize_file.htm.

I would like to swap positions of these items - text box and then the button. Is it possible to change it?

Solution

  • All you need to do was to inspect and change the things as per your requirement.

    HTML

    <div class = "row">
  <div class = "file-field input-field">
    <div class = "btn">
      <span>Browse</span>
      <input type = "file" multiple />
    </div>

    <div class = "file-path-wrapper">
      <input class = "file-path validate" type = "text"
             placeholder = "Upload multiple files" />
    </div>
  </div>    
</div>

    CSS

    .file-field{
  display: flex !important;
  flex-direction: row-reverse !important;
}

.file-path-wrapper{
  width: 100%;
}

    Codepen - Demo