I have such a bootstrap form,
The text form area starts with padding:
I have to manually remove the spaces:
the codes:
<form class="form-horizontal" action="/article/create/{{ b.id }}" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="title" placeholder="
Write Title Later" >
</div>
</div>
<div class="form-group">
<label for="content" class="col-sm-1 control-label" >Content</label>
<div class="col-sm-11">
<textarea class="form-control" id="content" rows="10" value="
Write Content Firstly">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button type="submit" class="btn btn-primary">Publish</button>
</div>
</div>
</form>
What's the problem with my code?
You need to remove all space between 'textarea' and '/textarea'. Here is the updated code ^^
<form class="form-horizontal" action="/article/create/{{ b.id }}" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="title" class="col-sm-1 control-label">Title</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="title" placeholder="Write Title Later" />
</div>
</div>
<div class="form-group">
<label for="content" class="col-sm-1 control-label" >Content</label>
<div class="col-sm-11">
<textarea class="form-control" id="content" rows="10" value="
Write Content Firstly"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button type="submit" class="btn btn-primary">Publish</button>
</div>
</div>
</form>
Related
I don't really understand the elements changes after add FORM.
Any suggestion?
BEFORE
AFTER add
{!! Form::model($user, ['method' => 'POST','route' => ['profile.update', $user->id], 'enctype' => 'multipart/form-data']) !!}
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">×</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 href="/home2"> <input type="button" href="/home2" class="btn btn-default" value="Cancel">
</div>
</div>
</form>
{!! Form::close() !!}
</div>
</div>
</div>
<hr>
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 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>
<input type="button" href="/home2" class="btn btn-default" value="Cancel">
</div>
</div>
</div>
</div>
</div>
<hr>
</form>
</div>
image of web page
hello I'm making school project for assignment.
but I don't know how to change the size of background grey box to make adjust with inside E-mail, password... etc box.
here's my code which I'm struggling.
{{!-- 회원 가입 페이지 view --}}
<br/><br/>
<form action="" style-"width: 700px; margin: auto"
<div class="jumbotron">
<div class="col-md-5 col-md-offset-5">
<h1>Sign up</h1>
{{# if hasErrors}}
<div class="alert alert-danger">
{{# each messages}}
<p>{{ this }}</p>
{{/each}}
</div>
{{/if}}
<form action="/user/signup" method="post" style="width: 500px; margin:auto">
<br/>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="text" id="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" name="address" class="form-control">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" class="form-control">
</div>
<input type="hidden" name="_csrf" value="{{ csrfToken }}">
<button type="submit" class="btn btn-primary pull-right">Sign up</button>
</form>
</div>
</div>
I think it is because you have put everything inside
<div class="jumbotron">
Try moving <div class="jumbotron"> inside <div class="col-md-5 col-md-offset-5">
You might have to change the col-md-5 to col-md-6
I have a form with the following setup:
<div class="row">
<div class="col-3">
#include('acp.sidebar')
</div>
<div class="col-9">
#if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form class="form-horizontal" role="form" method="POST" action="{{ url('acp/provider/add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="hidden" name="id">
<fieldset>
<legend>Grunddaten</legend>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="description">Beschreibung</label>
<textarea class="form-control" id="description" name="description" required></textarea>
</div>
<div class="form-group">
<label for="url">Domain</label>
<input type="text" class="form-control" id="url" name="url" required>
</div>
<div class="form-group">
<label for="ref">Ref-Code</label>
<input type="text" class="form-control" id="ref" name="ref" required>
</div>
<div class="form-group">
<label for="image">Logo</label>
<input type="file" name="image" id="image" class="form-control" accept="image/*">
</div>
<div class="form-group">
<label for="checkboxes">Payment-Anbieter</label>
<div>
#foreach($paymentProviders as $key => $provider)
<label class="checkbox-inline" for="checkboxes-{{$key}}">
<input name="paymentProviders[]" id="checkboxes-{{$key}}" value="{{$provider->id}}" type="checkbox">
<img src="{{url('/images/paymentProvider/small/'.$provider->image)}}">
{{$provider->name}}
</label>
#endforeach
</div>
</div>
</fieldset>
<fieldset>
<legend>Crawler</legend>
<div class="form-group">
<label for="attributes">Suchattribute</label>
<input type="text" class="form-control" id="attributes" name="attributes" required>
</div>
<div class="form-group">
<label for="crawlerType">Typ</label>
<select id="crawlerType" name="crawlerType" class="form-control">
#foreach($crawlerTypes as $crawlerType)
<option value="{{$crawlerType}}">{{$crawlerType}}</option>
#endforeach
</select>
</div>
</fieldset>
<div class="form-group">
<div class="pull-right">
<button type="submit" class="btn btn-primary">
Absenden
</button>
</div>
</div>
</form>
</div>
</div>
As you can see there is a input named "attributes" down below. When I add this, I can't submit my form. It's like clicking on a button with no "submit" attribute.
After removing or renaming this input, it works. It's not a big thing to rename my input - I'm just interested if this is a bug, or a for me unkown feature.
I'm using Bootstrap v4.0.0-alpha.6 and Laravel 5.4.22.
I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="currentmonth">Total Work days in Current Month:</label>
<input class="col-md-4" type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="annualeave">Annual Leave :</label>
<input class="col-md-4" type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
This answer is different from the above answer given by Rafa Romero.
I have added different style for these.
Here is the 2 ways you can use this .
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<br><h1 class="text-center">OR</h1><br>
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" >
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
You are using bootstrap class so do one thing use columns and give .col-sm-8 and .com-sm-4 respectively and check.
<div class="form-group">
<label for="annualeave" class="col-sm-8">Annual Leave :</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</div>
You can try with absolute position for the texfields and aligning both at the same distance from the right or left side
input{
position: absolute;
left: 275px
}
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="currentmonth">Total Work days in Current Month:</label>
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
<div class="row">
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
I have a simple form containing an input and a submit button. I use bootstrap for responsiveness. When the screen size is md I expect the input field to be aligned with the input as the label is set to col-md-2, the input to col-md-10 and the submit to col-md-10 with an offset of col-md-offset-2. The alignment does not happen the way I expected it to, any ideas why this is happening?
Update
<form method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-md-2 control-label">Label</label>
<div class="col-md-10">
<input type="text" class="form-control" id="inputEmail3" name="name">
</div>
</div>
<div class="form-group" style="height: 50px;">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-success">Done</button>
</div>
</div>
</div>
</form>
See demo here
The issue is you have two form-groups encasing your submit button which shoves it off from the left just a hair.
http://jsfiddle.net/m2rcxdx2/4/
<form method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-md-2 control-label">Label</label>
<div class="col-md-10">
<input type="text" class="form-control" id="inputEmail3" name="name">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-success">Done</button>
</div>
</div>
</form>
Is this what you're looking for?
<form method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" name="name" />
</div>
</div>
<div class="form-group" style="height: 50px;">
<div class="col-md-offset-10 col-md-2">
<input type="submit" class="btn btn-success" value="Submit"></input>
</div>
</div>
</form>
http://jsfiddle.net/f4u6g0zh/