Topic: input group + form outline

Yutaka pro asked 1 year ago


Actual behavior

I want to put a form outline inside an input group, when i do this the size of the input is reduced, also when the input-group is large the text inside the input is not centered here is the code,

<div class="input-group input-group-lg mb-3">
                <span class="input-group-text" id="basic-addon1">@@</span>
                <div class="form-outline">
                    <input type="text" id="form12" class="form-control" />
                    <label class="form-label" for="form12">Example label</label>
                </div>
            </div>

Expected behavior i want to be able to use an input group with a form outline that is large and looks well

Resources (screenshots, code snippets etc.) i cannot paste image, sorry


Yutaka pro answered 1 year ago


i solved the problem using flex-grow-1 on the form outline from

      <div class="form-outline">

to

      <div class="form-outline flex-grow-1">

complete example

<div class="input-group input-group-lg mb-3">
            <span class="input-group-text" id="basic-addon1">@@</span>
            <div class="form-outline flex-grow-1">
                <input type="text" id="form12" class="form-control" />
                <label class="form-label" for="form12">Example label</label>
            </div>
        </div>


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No