CODEWITHSUNDEEP
htmlcsshtml-input
Michael Heumann
Michael Heumann

Reputation: 120

Small help text relative to input field

I need to put a small help text directly under a text input field, and if this field is indented (e.g. by a radio button as in my example), the help text should be indented too.

An example of what I'm trying is here:

#enteramt {
  width: 150px;
  display: inline;
}

#passwordHelpBlock {
  font-size: x-small;
  display: block;
}
<p class="lead">
  <input id="val_200" name="amount_sel" type="radio" value="200">
  <label for="val_200"> EUR 200,00</label>
  <br/>
  <input id="val_other" name="amount_sel" type="radio" value="other">
  <label for="val_other"> EUR
    <input class="inputdefault" id="enteramt" name="amount" type="text" value="" placeholder="z.B. 2,00">
  </label>
  <small id="passwordHelpBlock" class="form-text text-muted">Min. EUR 2,00</small>
</p>

Also see in Fiddle: https://jsfiddle.net/mheumann/wkLdjdcL/

I want it to look like this:

Preview of what it should look like

I know I could use margin-left to move it over, but the same box may also appear without the radio button, so the margin would vary.

Is there any way to bind the "small" tag to the "input" tag so it will always appear aligned directly underneath?

EDIT: Removed references to Bootstrap, since the code snippet doesn't contain any.

Upvotes: 4

Views: 20567

Answers (3)

Chiller
Chiller

Reputation: 9738

You can wrap the input and the help text inside a <span> and make it an inline-block

see code snippet:

#enteramt {
  width: 150px;
  display: inline;
}

#passwordHelpBlock {
  font-size: x-small;
  display: block;
}

.input-help {
  vertical-align: top;
  display: inline-block;
}
<p class="lead">
  <input id="val_200" name="amount_sel" type="radio" value="200">
  <label for="val_200"> EUR 200,00</label>
  <br/>
  <input id="val_other" name="amount_sel" type="radio" value="other">
  <label for="val_other"> EUR
    <span class="input-help">
      <input class="inputdefault" id="enteramt" name="amount" type="text" value="" placeholder="z.B. 2,00">
      <small id="passwordHelpBlock" class="form-text text-muted">Min. EUR 2,00</small>
    </span>
  </label>
</p>

Upvotes: 6

Vivek Athalye
Vivek Athalye

Reputation: 2979

How about using Adjacent sibling selectors? Here the padding will be applied only on .text-muted which is preceded by an input of type radio and a label. (just to match your current html) If there is no radio button / label, then padding will not apply.

#enteramt {
  width: 150px;
  display: inline;
}

#passwordHelpBlock {
  font-size: x-small;
  display: block;
}

input[type=radio] + label + .text-muted {
  padding-left: 60px;
}
<p class="lead">
  <input id="val_200" name="amount_sel" type="radio" value="200">
  <label for="val_200"> EUR 200,00</label>
  <br/>
  <input id="val_other" name="amount_sel" type="radio" value="other">
  <label for="val_other"> EUR
    <input class="inputdefault" id="enteramt" name="amount" type="text" value="" placeholder="z.B. 2,00">
  </label>
  <small id="passwordHelpBlock" class="form-text text-muted">Min. EUR 2,00</small>
</p>

Upvotes: 0

Bhavin Shah
Bhavin Shah

Reputation: 2482

#enteramt {
  width: 150px;
  display: inline;
}

#passwordHelpBlock {
  font-size: x-small;
  display: block;
}

.p-l-none{
  padding-left:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-lg-12">
    <input id="val_200" name="amount_sel" type="radio" value="200">
  <label for="val_200"> EUR 200,00</label>
  
  </div>
</div>


<div class="row">
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
   <input id="val_other" name="amount_sel" type="radio" value="other">
   EUR   
    
  </div>
  <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 p-l-none">
  <input class="inputdefault" id="enteramt" name="amount" type="text" value="" placeholder="z.B. 2,00" class="form-control">
    <small id="passwordHelpBlock" class="form-text text-muted">Min. EUR 2,00</small>
  </div>
</div>

Here is JSFiddle

Is this the same that you are looking for? Hope this helps.

Upvotes: 0

Related Questions