0

I am trying to achieve something like this enter image description here

My code is as follows

          <form class="needs-validation" action="submit_gene_entry.php" method="post">
            <div class="row ">
              <div class="col-xs-2 mb-3">
                <label for="geneLetters_postvar">Gene name</label>
              </div>
              <div class="col-xs-1 mb-3">
                <p class="input-group" >
                  <input name=geneLetters_postvar type=text  pattern="[a-z]{1,3}" class="form-control" placeholder="gene letters" required autofocus title="letters of the gene name">
                </p>
              </div>
              <div class="col-xs-1 mb-3 text-center">
                <label for="geneNumbers_postvar">-</label>
              </div>
              <div class="col-xs-2 mb-3">
                <p class="input-group" >
                  <input name=geneNumbers_postvar type=text pattern="[0-9]{1,6}" class="form-control" placeholder="gene numbers" title="numbers only" required>
                      </p>
                  </div>
            </div>
          </form>
      </div>

And you can see it in action at https://jsfiddle.net/mauricev/rj4so0c9/1/.

As you can see the text is off-center vertically. Why is that? And the form fields are too wide. I can't seem to make them narrower and have them space out properly.

mauricev
  • 73
  • 1
  • 6
  • Why are you using an older version? Can you use a the newer 4.4? Vertical aligment question is a duplicate of https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment/44801382#44801382 – Carol Skelly Dec 12 '19 at 15:55

1 Answers1

0

I edited the text alignment for you: 

<form class="needs-validation" action="submit_gene_entry.php" method="post">
    <div class="row ">
      <div class="col-xs-2 mb-3 v-center">
        <label for="geneLetters_postvar" style="padding-top: 5px; padding-right: 5px;">Gene name</label>
      </div>
      <div class="col-xs-1 mb-3">
        <p class="input-group" >
          <input name=geneLetters_postvar type=text  pattern="[a-z]{1,3}" class="form-control" placeholder="gene letters" required autofocus title="letters of the gene name">
        </p>
      </div>
      <div class="col-xs-1 mb-3 text-center">
        <label for="geneNumbers_postvar" style="padding-top: 5px; padding-right: 5px; padding-left: 5px;">-</label>
      </div>
      <div class="col-xs-2 mb-3">
        <p class="input-group" >
          <input name=geneNumbers_postvar type=text style="width:50%" pattern="[0-9]{1,6}" class="form-control" placeholder="gene numbers" title="numbers only" required>
              </p>
          </div>
    </div>
  </form>

Please check: https://jsfiddle.net/g7hL3a2d/3/

Will this work for you?

Also, for the text inputs you can use something like:

maxlength="4" size="4"

Replace 4 with the maximum amount of letters/numbers you need in the text field and it will resize automatically.

Filip
  • 155
  • 10