Autocomplete Input Form – Align the text in the middle

  <div class="md-form form-lg"> <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete"> <button class="mdb-autocomplete-clear"> <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </button> <label for="form-autocomplete" class="active">Where are you looking to move?</label> </div>

Zhao pro commented 6 years ago

On the left-hand side, pardon.

---

Jakub Strebeyko staff commented 6 years ago

Hi there Zhao, It will require a minor CSS fix. First of, add a .text-center to label, than add {right: 0} CSS rule to the .md-form .label element styling. The text should be centered! Best, Kuba

---

Zhao pro commented 6 years ago

I added text-center and {right:0} but the label it still is on the left-side .md-form .label { right: 0; } <label for="form-autocomplete" class="active white-text text-center">Where are you looking to move?</label>

---

Zhao pro commented 6 years ago

Find the image here: https://res.cloudinary.com/zarium/image/upload/v1534155070/question.png Where is says "Where are you looking to move?" I want to be in the center of the input.

---

Jakub Strebeyko staff commented 6 years ago

Hi there Zhang, Here is your snippet with these two changes. The input gets rendered the way you want it, in the middle, on my end at least. Let me know if using the snippet helped your case:<div class="md-form form-lg"> <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete"> <button class="mdb-autocomplete-clear"> <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </button> <label for="form-autocomplete" class="active text-center" style="right:0">Where are you looking to move?</label> </div> With Best Regards, Kuba

---