Bootstrap 4 Make input grow wider than container column when in focus

0
votes

I have a Bootstrap 4 form for collecting contact information. 

<form class="form-compact" action="">
            <div class="row paddingBottom20">
                <div class="container col-4">
                    <div class="row">
                        <h6 class="text-center col-12 mb-0">Contact Information</h6>
                        <sub class="text-right text-muted col-12"><a href="#" tabindex="-1"><i class="far fa-edit"></i></a></sub>
                    </div>
                    <div class="dropdown-divider mb-3"></div>
                    <div class="form-group row">
                        <label for="firstName" class="col-4 col-form-label-sm text-right">First Name:</label> 
                        <div class="col-8">
                            <div class="input-group"> 
                                <input id="firstName" name="text" type="text" class="form-control form-control-sm" readonly>
                            </div>
                        </div>
                    </div> 
                    <div class="form-group row align-items-center">
                        <label for="lastName" class="col-4 col-form-label-sm text-right">Last Name:</label> 
                        <div class="col-8">
                          <div class="input-group"> 
                            <input id="lastName" name="text" type="text" class="form-control form-control-sm" readonly>
                          </div>
                        </div>
                    </div>
                    <div class="form-group row align-items-center">
                        <label for="position" class="col-4 col-form-label-sm text-right">Position:</label> 
                        <div class="col-8">
                          <div class="input-group"> 
                            <select id="position" class="form-control" disabled>
                                <option></option>
                                <option>Shift Supervisor</option>
                                <option>Airport Manager</option>
                                <option>District Manager</option>
                                <option>Regional Manager</option>
                                <option>Terrirory Performance Manager</option>
                                <option>Ops. Manage</option>
                                <option>Other</option>
                            </select>
                          </div>
                        </div>
                    </div>
                    <div class="form-group row align-items-center">
                        <label for="emailAddress" class="col-4 col-form-label-sm text-right">Email Address:</label> 
                        <div class="col-8">
                          <div class="input-group"> 
                            <input id="emailAddress" name="text" type="email" class="form-control form-control-sm">
                          </div>
                        </div>
                    </div>
                    <div class="form-group row align-items-center">
                        <label for="office" class="col-4 col-form-label-sm text-right">Office:</label> 
                        <div class="col-8">
                          <div class="input-group">
                            <input id="office" name="text" type="number" class="form-control form-control-sm" readonly>
                          </div>
                        </div>
                    </div>
                    <div class="form-group row align-items-center">
                        <label for="cell" class="col-4 col-form-label-sm text-right">Cell:</label> 
                        <div class="col-8">
                          <div class="input-group">
                            <input id="cell" name="text" type="number" class="form-control form-control-sm" readonly>
                          </div>
                        </div>
                    </div>
                </div>
                <div class="container col-4" disabled>
                    <div class="row">
                        <h6 class="text-center col-12 mb-0">Notification Emails Received</h6>
                        <sub class="text-right text-muted col-12"><a href="#" tabindex="-1"><i class="far fa-edit"></i></a></sub>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="col-12 text-center mb-2">
                        <small class="text-muted small d-none">Select all that apply</small>                                
                    </div>
                    <div class="row">
                        <div class="col-6 text-left">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                                <label class="form-check-label" for="defaultCheck1">
                                    24hr Notifications
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
                                <label class="form-check-label" for="defaultCheck2">
                                    48hr Notifications
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="Checkbox3">
                                <label class="form-check-label" for="defaultCheck1">
                                    VIP Watch List
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="Checkbox4">
                                <label class="form-check-label" for="defaultCheck2">
                                    BoD Member
                                </label>
                            </div>
                        </div>
                        <div class="col-6 text-left">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="Checkbox1">
                                <label class="form-check-label text-center" for="defaultCheck1">
                                    FBO Deliveries
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="Checkbox2">
                                <label class="form-check-label" for="defaultCheck2">
                                    FBO Returns
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="Checkbox5">
                                <label class="form-check-label" for="defaultCheck1">
                                    Sensitive Accts
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="Checkbox6">
                                <label class="form-check-label" for="defaultCheck2">
                                    Escalations
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container col-4">
                    <div class="row">
                        <h6 class="text-center col-12 mb-0">Location Connections</h6>
                        <sub class="text-right text-muted col-12"><a href="#" tabindex="-1">Edit <i class="far fa-edit"></i></a></sub>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="row">
                        <div class="col-12 text-center mb-2">
                            <small class="text-muted small">On the distribution list of the following locations<br /></small>                                
                        </div>
                        <span class="col-12 text-left">
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">ABC</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">DEF</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">GHI</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">JKL</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">MNO</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">PQR</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">STU</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">VWX</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">YZA</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">ABC</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">DEF</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">GHI</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">JKL</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">MNO</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">PQR</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">STU</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">VWX</a>
                        <a href=# class="badge badge-pill badge-success" tabindex="-1">YZA</a>
                    </span>
                    </div>
                </div>
            </div>
        </form>

The form is divided into 3 columns, each with the class col-4. The items in the first column include an email address input. What I am looking for is a way to make the email address input expand to the right wider than the parent div when it gains focus.

Thank you

2
twitter-bootstrapbootstrap-4
Do you want it to be wider than the column? I would suggest using CSS to scale it to larger when on focus. - pjones235
Yes I want it to be wider than the column. I have tried using CSS to solve the issue but cannot get it to work. - Shawn Haney

2 Answers

0
votes

This is a bit of a hack, but you can actually do that in plain CSS. Please notice that this will break width transitions because of the position attribute change. 

.extendable:focus {
  position: absolute;
  width: 110%;
  top: -1rem;
}

Here is a working example from your code sample.

0
votes

You can add a handler to the event 'focus' and 'focusout' of the input, on each event you have to do a few things.

For example this is the handler for the 'focus' event, I added the id 'emailAddress' to the input:

$('#emailAddress').on('focus', function(){
  widthColumn = $('#contact').width();
  $(this).width((widthColumn*2) - $('#emailLabel').width());
});

I get the width of the column that has Contact Information, I had added the id 'contact' to that column and then with the '.width()' method I put the width that I calculate.

This is the handler for the 'focusout' event:

$('#emailAddress').focusout(function(){
  $(this).width($('#firstName').width());
})

Here I only put the width of other input that we didn`t change.

We also have to add some css rules:

#emailAddress{
  position: absolute;
  width: 100%;
}

Here you can see the complete example.