Ad

Html Elements Shrinking After Add FORM Tag

- 1 answer

I don't really understand the elements changes after add FORM. Any suggestion?

BEFORE

BEFORE

AFTER add

{!! Form::model($user, ['method' => 'POST','route' => ['profile.update', $user->id], 'enctype' => 'multipart/form-data']) !!}

AFTER

Full codes here:(

@include('Navigation.navbarhome')


<div class="container">
{!! Form::model($user, ['method' => 'POST','route' => ['profile.update', $user->id], 'enctype' => 'multipart/form-data']) !!}
@if ($message = Session::get('success'))
                <div class="alert alert-success">
                {{ session()->get('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
                </div>
                @endif
          @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif  
    <h1>Edit Profile</h1>
    <hr>




    <div class="row">
      <!-- left column -->
      <div class="col-md-3">
        <div class="text-center">

          <img src="/uploads/avatars/{{ Auth::user()->profImage }}" class="avatar img-circle" alt="avatar">
          <h6>Upload your photo...</h6>

          <input type="file" name="profImage">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
        </div>
      </div>

      <!-- edit form column -->
      <div class="col-md-7 personal-info">

        <h3>Personal info</h3>

        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label class="col-lg-3 control-label">First name:</label>
            <div class="col-lg-8">
              <input class="form-control" name="fname" type="text" value="{{$user->fname}}">
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Last name:</label>
            <div class="col-lg-8">
              <input class="form-control" name="lname" type="text" value="{{$user->lname}}">
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Staff ID:</label>
            <div class="col-lg-8">
              <input class="form-control" name="StaffID" type="text" value="{{$user->StaffID}}" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Email:</label>
            <div class="col-lg-8">
              <input class="form-control" name="email" type="text" value="{{$user->email}}">
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-3 control-label">Department:</label>
            <div class="col-lg-8">
              <input class="form-control" name="dept" type="text" value="{{$user->department1->name}}" readonly>
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-3 control-label">Position:</label>
            <div class="col-lg-8">
              <input class="form-control" name="role" type="text" value="{{$user->position->name}}" readonly>
            </div>
          </div>


          <div class="form-group">
            <label class="col-md-3 control-label"></label>
            <div class="col-md-8">
              <input type="submit" class="btn btn-primary" value="Save Changes">
              <span></span>
             <a  target="_blank" rel="nofollow noreferrer" href="/home2"> <input type="button" target="_blank" rel="nofollow noreferrer" href="/home2" class="btn btn-default" value="Cancel">
            </div>
          </div>
        </form>
        {!! Form::close() !!}
      </div>
  </div>
</div>

<hr>
Ad

Answer

This is occurring because there's already an existing <form> element within your code, and nesting these elements is causing issues within the styling.

You should be able to address it by simply changing your inner <form> element into a <div> since it isn't doing much except for handling styling (via the form-horizontal class).

Just change the following line from:

<form class="form-horizontal" role="form">

to:

<div class="form-horizontal" role="form">

Example (with changes applied)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <!-- This element is added by Laravel -->
  <form>
    <h1>Edit Profile</h1>
    <hr>

    <div class="row">
      <!-- left column -->
      <div class="col-md-3">
        <div class="text-center">

          <img src="" class="avatar img-circle" alt="avatar">
          <h6>Upload your photo...</h6>

          <input type="file" name="profImage">
          <input type="hidden" name="_token" value="{{ csrf_token() }}">
        </div>
      </div>

      <!-- edit form column -->
      <div class="col-md-7 personal-info">

        <h3>Personal info</h3>

        <!-- Change this to a <form> to reproduce your original issue -->
        <div class="form-horizontal" role="form">
          <div class="form-group">
            <label class="col-lg-3 control-label">First name:</label>
            <div class="col-lg-8">
              <input class="form-control" name="fname" type="text" value="{{$user->fname}}">
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Last name:</label>
            <div class="col-lg-8">
              <input class="form-control" name="lname" type="text" value="{{$user->lname}}">
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Staff ID:</label>
            <div class="col-lg-8">
              <input class="form-control" name="StaffID" type="text" value="{{$user->StaffID}}" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Email:</label>
            <div class="col-lg-8">
              <input class="form-control" name="email" type="text" value="{{$user->email}}">
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-3 control-label">Department:</label>
            <div class="col-lg-8">
              <input class="form-control" name="dept" type="text" value="{{$user->department1->name}}" readonly>
            </div>
          </div>

          <div class="form-group">
            <label class="col-lg-3 control-label">Position:</label>
            <div class="col-lg-8">
              <input class="form-control" name="role" type="text" value="{{$user->position->name}}" readonly>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label"></label>
            <div class="col-md-8">
              <input type="submit" class="btn btn-primary" value="Save Changes">
              <span></span>
              <a target="_blank" rel="nofollow noreferrer" href="/home2"> <input type="button" target="_blank" rel="nofollow noreferrer" href="/home2" class="btn btn-default" value="Cancel"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

<hr>
</form>
</div>

Ad
source: stackoverflow.com
Ad