Topic: How to place the label alongside the input text field in forms?

Garrido pro asked 5 years ago

How can I make a form with the traditional layout where the text label is alongside the rectangular input text field on the same horizontal line, similar to this: ? How can I render the input text field with a rectangular border on all four sides and the label beside it?

I don't want the default layout where the text label and the input text field (represented by a single continuous line) are stacked vertically.

I am using MDB Angular Pro v5.1.1

Thanks in advance.


Damian Gemza staff answered 5 years ago

Hello Garrido, It's not so easy to create your's desired effect, but you could use those styles. Key class here is input-alternate, that turns input to alternative version (similar to input from bootstrap). Of course you could use some class not inline styles. Feel free to adapt my solution to your's needs.
<div class="md-form">

<label style="position: relative; top: 10px; left: 0; padding-left: 10px;">Imie</label>

<input style="margin-left: 10px; position: absolute"id="tekst"type="text"class="input-alternate">

Best Regards, Damian

Please insert min. 20 characters.


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



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No