I have the following form but I am having some trouble to make all the fields of the same length. As a matter of fact, is the code too long? I am a begginer so I don't know if I am repeating a lot of code.
Here is the html piece:
<div class="panel panel-default">
<div class = "panel-heading">
Informações do Imóvei
</div>
<div class="panel-body">
<div class="form-inline">
<label class="control-label">{{anuncioForm.tipo_imovel.label}}</label>
<p>Selecione o tipo do seu imóvel</p>
<select class="form-control control-label"
id="id_{{ anuncioForm.tipo_imovel.name }}"
name="anuncioForm.tipo_imovel.name">
<option value="" selected="selected">---------</option>
<option value="Casa">Casa</option>
<option value="Apartamento">Apartamento</option>
<option value="Comercial">Comercial</option>
</select>
</div>
<br>
<div class="form-group">
<label for="exampleTextarea">Descrição do imóvel</label>
<p>Descreva com o máximo de detalhes o seu imóvel</p>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<br>
<p><b>Características do imóvel</b></p>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.quartos.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.quartos.name }}"
name="id_{{ anuncioForm.quartos.name }}"
type="text"/>
</div>
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.suites.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.suites.name }}"
name="id_{{ anuncioForm.suites.name }}"
type="text"/>
</div>
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.banheiros.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.banheiros.name }}"
name="id_{{ anuncioForm.banheiros.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_construida.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_construida.name }}"
name="id_{{ anuncioForm.area_construida.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_total.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_total.name }}"
name="id_{{ anuncioForm.area_total.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control"
id="id_{{ anuncioForm.data_construcao.name }}"
name="id_{{ anuncioForm.data_construcao.name }}"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>
<br>
<p><b>Preço de Venda</b></p>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_venda.name }}"
name="id_{{ anuncioForm.preco_venda.name }}"
type="text"/>
</div>
</div>
<br>
<p><b>Preço do Aluguel</b></p>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_aluguel.name }}"
name="id_{{ anuncioForm.preco_aluguel.name }}"
type="text"/>
</div>
</div>
<br>
</div>
So, what do you suggest me?
You can take advantage of bootstrap grids col-xx-xx or adjust your input width externally.
Better read this: https://v4-alpha.getbootstrap.com/components/input-group/ and https://stackoverflow.com/a/25017998/6107715
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/*.input-group{min-width: 200px; max-height: 500px;}*/
</style>
</head>
<div class="panel panel-default">
<div class="panel-body">
<br>
<p><b>Características do imóvel</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.quartos.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.quartos.name }}"
name="id_{{ anuncioForm.quartos.name }}"
type="text"/>
</div>
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.suites.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.suites.name }}"
name="id_{{ anuncioForm.suites.name }}"
type="text"/>
</div>
<div class="col-xs-3 col-sm-3 input-group ">
<span class="input-group-addon"><label>{{ anuncioForm.banheiros.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.banheiros.name }}"
name="id_{{ anuncioForm.banheiros.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_construida.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_construida.name }}"
name="id_{{ anuncioForm.area_construida.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_total.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_total.name }}"
name="id_{{ anuncioForm.area_total.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control"
id="id_{{ anuncioForm.data_construcao.name }}"
name="id_{{ anuncioForm.data_construcao.name }}"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>
<form class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<label class="input-group-addon" for="exampleInput">Name</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Jane Doe">
</div>
</form>
<br>
<p><b>Preço de Venda</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_venda.name }}"
name="id_{{ anuncioForm.preco_venda.name }}"
type="text"/>
</div>
</div>
<br>
<p><b>Preço do Aluguel</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_aluguel.name }}"
name="id_{{ anuncioForm.preco_aluguel.name }}"
type="text"/>
</div>
</div>
<br>
</div>
I think your issue is that you are putting on every input. it should be :
<form class="form-inline">
<div class="form-group">
<label for="exampleInput">Name</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Jane Doe">
</div>
</form>
Then, apply your width settings to the class
.form-group
this will adjust the width of the label and input to match as they will auto adjust.
Hope this helps.
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>
I am making a member registration form and I want to make or set inputs of a row at the same line vertically with the inputs of the next row. I made a display:flex div and put inside it the inputs that I want them inline, but I couldn't set them at the same line vertically with the inputs of the next row.
I am trying to get it like this
https://i.ibb.co/SscFZvw/reg.png
<link rel="stylesheet" href="https://dl.dropbox.com/s/67bh94g7thmfl8h/bootstrap.css" />
<link href="https://dl.dropbox.com/s/dfc2odz62i3h6zx/style.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropbox.com/s/8b5z3fkk887injx/megamenu.css" rel="stylesheet" type="text/css" media="all" />
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-1" style="margin: 0 auto;width:100%">
<div class="panel panel-default">
<div class="panel-heading">Member Registration</div>
<br>
<form class="form-horizontal" method="POST" action="/member_reg" enctype="multipart/form-data">
<div style="display:flex;">
<div class="form-group{{ $errors->has('membership_date') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Membership Date</label>
<div class="col-md-6">
<input type="text" class="form-control" name="membership_date" value="{{ old('membership_date') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('membership_no.') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Membership No.</label>
<div class="col-md-6">
<input type="text" class="form-control" name="membership_no." value="{{ old('membership_no.') }}" required="required">
</div>
</div>
</div>
<div style="display:flex;">
<div class="form-group{{ $errors->has('member_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Member Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="member_name" value="{{ old('member_name') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('father_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Father Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="father_name" value="{{ old('father_name') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('mother_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Mother Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="mother_name" value="{{ old('mother_name') }}" required="required">
</div>
</div>
</div>
<div style="display:flex;">
<div class="form-group{{ $errors->has('birth_date') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Birth Date</label>
<div class="col-md-6">
<input type="text" class="form-control" name="birth_date" value="{{ old('birth_date') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('birth_place') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Birth Place</label>
<div class="col-md-6">
<input type="text" class="form-control" name="birth_place" value="{{ old('birth_place') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('gender') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Gender</label>
<div class="col-md-6">
<input type="text" class="form-control" name="gender" value="{{ old('gender') }}" required="required">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
This is a great use case for CSS grid, if you don't need to support IE11 (you can still use grid with IE10+ but it's just more work). See below, if you remove your flex containers and then just turn your form into a 3 column grid container it will work as intended (see the style tag at the end of body). Note that I added an empty placeholder div to create that whitespace on the first row.
.form-horizontal {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px
}
<head>
<html>
<link rel="stylesheet" href="https://dl.dropbox.com/s/67bh94g7thmfl8h/bootstrap.css" />
<link href="https://dl.dropbox.com/s/dfc2odz62i3h6zx/style.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropbox.com/s/8b5z3fkk887injx/megamenu.css" rel="stylesheet" type="text/css" media="all" />
</head>
</html>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-1" style="margin: 0 auto;width:100%">
<div class="panel panel-default">
<div class="panel-heading">Member Registration</div>
<br>
<form class="form-horizontal" method="POST" action="/member_reg" enctype="multipart/form-data">
<!-- <div style="display:flex;"> -->
<div class="form-group{{ $errors->has('membership_date') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Membership Date</label>
<div class="col-md-6">
<input type="text" class="form-control" name="membership_date" value="{{ old('membership_date') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('membership_no.') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Membership No.</label>
<div class="col-md-6">
<input type="text" class="form-control" name="membership_no." value="{{ old('membership_no.') }}" required="required">
</div>
</div>
<!-- ADD EMPTY DIV PLACEHOLDER -->
<div class="placeholder_item"></div>
<!-- </div> -->
<!-- <div style="display:flex;"> -->
<div class="form-group{{ $errors->has('member_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Member Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="member_name" value="{{ old('member_name') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('father_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Father Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="father_name" value="{{ old('father_name') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('mother_name') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Mother Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="mother_name" value="{{ old('mother_name') }}" required="required">
</div>
</div>
<!-- </div> -->
<!-- <div style="display:flex;"> -->
<div class="form-group{{ $errors->has('birth_date') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Birth Date</label>
<div class="col-md-6">
<input type="text" class="form-control" name="birth_date" value="{{ old('birth_date') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('birth_place') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Birth Place</label>
<div class="col-md-6">
<input type="text" class="form-control" name="birth_place" value="{{ old('birth_place') }}" required="required">
</div>
</div>
<div class="form-group{{ $errors->has('gender') ? ' has-error' : '' }}">
<label class="col-md-6 control-label">Gender</label>
<div class="col-md-6">
<input type="text" class="form-control" name="gender" value="{{ old('gender') }}" required="required">
</div>
</div>
<!-- </div> -->
</form>
</div>
</div>
</div>
</div>
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>
Your labels are too lengthy, I've just changed the structure with center align, is this what you need ?
.form-group {
width:50%;
float:left;
padding:0 15px;
}
.form-group input {
float:left;
}
.form-group label {
float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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-xs-12">
<form class="form-inline" style="">
<div class="form-group" >
<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-xs-12">
<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>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">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-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >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-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >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-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >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>
I have removed all your inline styles. There is no need for every field styling. You can do it with bootstrap classes.
<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-body">
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-6 control-label" for="currentmonth">Total Work days in Current Month:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Annual Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Sick / Emergency Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016):</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Month your name was added in Field Glass :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label"></label>
<div class="col-sm-6 text-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>
</section>
</div>
</div>
</div>
</div>
Add class form-inline to the form element
example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
reference: http://www.w3schools.com/bootstrap/bootstrap_forms.asp
Remove the form-inline class from the form tag.
I would like to make all the label having the same size as the img below:
This is the HTML snippet:
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ form.area_construida.label }}</label></span>
<input class="form-control"
id="id_{{ form.area_construida.name }}"
name="{{ form.area_construida.name }}"
value="{{ form.area_construida.value }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ form.area_total.label }}</label></span>
<input class="form-control"
id="id_{{ form.area_total.name }}"
name="{{ form.area_total.name }}"
value="{{ form.area_total.value }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control" data-validation="date" data-validation-format="yyyy-mm-dd"
id="id_{{ form.data_construcao.name }}"
name="{{ form.data_construcao.name }}"
value="{{ form.data_construcao.value }}"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>
I tried some stuff but no success. Thanks.
label { width: 70px;} u can set width to label like this.
fiddle : https://jsfiddle.net/rtdtsy17/1/
Is something like this sufficient?
span.input-group-addon{width:50%}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>Area construida</label></span>
<input class="form-control"
id="id_{{ form.area_construida.name }}"
name="{{ form.area_construida.name }}"
value="222"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>Area total</label></span>
<input class="form-control"
id="id_{{ form.area_total.name }}"
name="{{ form.area_total.name }}"
value="111"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control" data-validation="date" data-validation-format="yyyy-mm-dd"
id="id_{{ form.data_construcao.name }}"
name="{{ form.data_construcao.name }}"
value="11/12/2011"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>
I am new to HTML. I am wondering if you could have two forms setting next to each other in parallel in HTML. I have generated this sample GUI with Tkinter and I want to generate a HTML file for the GUi with Bootstrap style.
Something like this would do it: (The borders are just so you can see the effect.)
div
{
border: 1px solid red;
}
#left
{
float: left;
width: 64%;
}
#right
{
float: right;
width: 35%;
}
<div id="left">Left Stuff</div>
<div id="right">Right Stuff</div>
Yea...
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
<form action="" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<button type="button" class="btn btn-default">SUBMIT</button>
</div>
</form>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<form action="" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<button type="button" class="btn btn-default">SUBMIT</button>
</div>
</form>
</div>
</div>
Hope this helps
I do not know your html file, but I think bootstrap can provide a built-in solution. Just refer to the official documentation and start with a basic template like this:
<div class="container">
<div class="row">
<div class="col-sm-8"> <--the big form-->
<form id="big">
<div class="form-group">
...
</div>
</form>
</div>
<div class="col-sm-4"> <--the small one-->
<form id="small">
<div class="form-group">
...
</div>
</form>
</div>
</div>
</div>
You can use many other classes and of course customize your own in your stylesheet
Well, if you're using Bootstrap, it's very easy. Try the following :
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-2">
<label for="label-name" class="control-label">Text Here</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="some-text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-2">
<label for="label-name" class="control-label">Text Here</label>
</div>
<div class="col-md-6">
<input type="checkbox">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6">
<button type="button" class="btn btn-default">Run</button>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</body>
</html>
Ok, sounds like 1 form, you just want it styled a certain way:
<div class="row">
<div class="form-group">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>Settings</p>
<label for="label-name" class="control-label">Label1</label>
<input type="text" class="form-control" id="some-text">
<label for="label-name" class="control-label">Label2</label>
<input type="text" class="form-control" id="some-text">
<label for="label-name" class="control-label">Label3</label>
<input type="text" class="form-control" id="some-text">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>Options</p>
<label for="label-name" class="control-label">Label4</label>
<input type="checkbox"></br>
<label for="label-name" class="control-label">Label5</label>
<input type="checkbox"></br>
<label for="label-name" class="control-label">Label6</label>
<input type="checkbox">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-default">Run</button>
</div>
</div>