Put an element next to a <input type="file"> element

Question

I have this HTML:

<html>
<head>
    <link href="bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
        <form method="post" enctype="multipart/form-data">
        <table class="table">
            <tr>
                <td>Current Version</td>
                <td><strong><?= $version ?></strong></td>
            </tr>
            <tr>
                <td>Upload new version</td>
                <td><input class="btn-info btn" type="file" name="package"><input type="submit" class="btn-info btn" value="Upload"></td>
            </tr>
        </table>
        </form>
    </div>    
</body>
</html>

But the submit button is rendered under the fileupload element, but I want it on the right side of it. When I disable bootstrap, it works. How can I get any info next to the file browser?

thepio · Accepted Answer · 2016-07-01 12:05:24Z

3

Bootstrap makes the file upload button a block which makes it take the whole space and the buttons not to align next to each other.

You could globally set the input type file to display as inline-block for them to align next to each other.

input[type=file] {
  display: inline-block;
}

Or you could of course give that specific file upload button a class and declare css only for it.

Fiddle: https://jsfiddle.net/pozh7cj3/2/

answered Jul 1, 2016 at 12:05

thepio

6,2635 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ADreNaLiNe-DJ · Accepted Answer · 2016-07-01 12:11:50Z

Boostrap can help to get rid of table designed pages.

So, you can write your form like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <form class="form-horizontal" method="post" enctype="multipart/form-data">
    <div class="form-group">
      <label class="col-xs-4 control-label">Current Version</label>
      <div class="col-xs-8">
        <p class="form-control-static"><strong><?= $version ?></strong></p>
      </div>
    </div>
    <div class="form-group">
      <label for="package" class="col-xs-4 control-label">Upload new version</label>
      <div class="col-xs-6">
        <input class="form-control" type="file" name="package">
      </div>
      <div class="col-xs-2">
        <input type="submit" class="btn-info btn" value="Upload">
      </div>
    </div>
  </form>
</div>

(col-xs* classes are used to have the needed result with the small viewport of code-snippet)

Collectives™ on Stack Overflow

Put an element next to a <input type="file"> element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related