CODEWITHSUNDEEP
formsbootstrap-5
Fred K
Fred K

Reputation: 75

Floating label not working when form-control options are generated by API source

Is there a trick to make the form floating work (centered input label move upward upon focus) when the options of the form-control input are populated by an API source. Right now, the label is upward by default. This is due to the options being bound to an API.

EDIT: Here is the code (I'm using a no code PHP framework). Form-floating works well when I don't bind the input to an API source.

<div class="col-sm-8" id="city">
    <div class="form-floating row">
         <input type="text" class="form-control" id="inp_city" name="city" aria-describedby="inp_city_help" placeholder="Enter nearest capital city" is="dmx-autocomplete" dmx-bind:data="getCities.data.getCities" optiontext="cityIANA" optionvalue="cityIANA">
         <label for="inp_city" class="col col-form-label">Enter nearest capital city</label>
    </div>
</div>

Intended result is to have the label in its intended place (centered, see below) when there is no focus on the field and have it float upward when the input field is focused. How to handle that? Any clue welcome!

enter image description here

Upvotes: 2

Views: 2798

Answers (1)

Arleigh Hix
Arleigh Hix

Reputation: 10897

I'm not sure what any API has to do with your problem but, if you are simply trying to center the label text you just need to add .text-center to the label:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-8" id="city">
      <div class="form-floating row">
        <input type="text" class="form-control" id="inp_city" name="city" aria-describedby="inp_city_help" placeholder="Enter nearest capital city" is="dmx-autocomplete" dmx-bind:data="getCities.data.getCities" optiontext="cityIANA" optionvalue="cityIANA">
        <label for="inp_city" class="col col-form-label text-center">Enter nearest capital city</label>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions