<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.

On the left-hand side, pardon.

Please insert min. 15 characters.

Publish

---

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

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

Please insert min. 15 characters.

Publish

---

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>

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>

Please insert min. 15 characters.

Publish

---

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.

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.

Please insert min. 15 characters.

Publish

---

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

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:<code><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></code> With Best Regards, Kuba

Please insert min. 15 characters.

Publish

---