Topic: Autocomplete Input Form – Align the text in the middle

Zhao pro asked 6 years ago


Hi guys! I want to align the label where is says \"Where are you looking to move?\" in the middle of the input(default is on right-hand side). How can I do that?

  <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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags