I want to add some space between the edges of a table and modal. The table is inside a modal popup but I don't know how to build the space. The table looks very bad, which clearly shows poor web design skills.
Adding the class
.table-responsive
..doesn't help.
This is how it looks like and here is the code of the modal and table.
<div id="modalUserViewEdits" class="modal-block modal-block-lg mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">User</h2>
</header>
<div class="alert alert-message hide">
<!--User message alert popup-->
</div>
<div class="form-data">
<form id="form_UserEdits" class="form-horizontal form-userEditsDetails">
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-3">
Username
<span class="required">*</span>
</label>
<div class="col-sm-9">
<input class="form-control" id="userId_modalUserViewEdits" type="hidden" name="id" value="0" />
<input class="form-control" id="userAction_modalUserViewEdits" type="hidden" name="action" value="active"/>
<input class="form-control" id="userOperation_modalUserViewEdits" type="hidden" name="operation" />
<input class="form-control" id="userName_modalUserViewEdits" type="text" placeholder="Username" name="userName" disabled />
</div>
</div>
</div>
</form>
<div id="divDynamicTable" class="form-data table-responsive">
<table class="table table-bordered table-striped mb-none" id="table_viewUserChanges" data-swf-path="lookandfeel/assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf">
<thead>
<tr>
<th>Field</th>
<th>Old Value</th>
<th>New Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<button type="button" id="btnApproveUserEdit" class="btn btn-success" data-name='approve'>Approve</button>
<button type="button" id="btnDeclineUserEdit" class="btn btn-danger" data-name='decline'>Decline</button>
<button type="button" class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</div>
</section>
Please help
Wrap the table in div with class container-fluid
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="modalUserViewEdits" class="modal-block modal-block-lg mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">User</h2>
</header>
<div class="alert alert-message hide">
<!--User message alert popup-->
</div>
<div class="form-data">
<form id="form_UserEdits" class="form-horizontal form-userEditsDetails">
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-3">
Username
<span class="required">*</span>
</label>
<div class="col-sm-9">
<input class="form-control" id="userId_modalUserViewEdits" type="hidden" name="id" value="0" />
<input class="form-control" id="userAction_modalUserViewEdits" type="hidden" name="action" value="active"/>
<input class="form-control" id="userOperation_modalUserViewEdits" type="hidden" name="operation" />
<input class="form-control" id="userName_modalUserViewEdits" type="text" placeholder="Username" name="userName" disabled />
</div>
</div>
</div>
</form>
<div id="divDynamicTable" class="form-data table-responsive">
<div class=container-fluid>
<table class="table table-bordered table-striped mb-none" id="table_viewUserChanges" data-swf-path="lookandfeel/assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf">
<thead>
<tr>
<th>Field</th>
<th>Old Value</th>
<th>New Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<button type="button" id="btnApproveUserEdit" class="btn btn-success" data-name='approve'>Approve</button>
<button type="button" id="btnDeclineUserEdit" class="btn btn-danger" data-name='decline'>Decline</button>
<button type="button" class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</div>
</section>
wrap it in container-fluid before the table-responsive so it works perfectly in responsive way also. may it works for you
<div class="container-fluid">
<div id="divDynamicTable" class="form-data table-responsive">
<table class="table table-bordered table-striped mb-none" id="table_viewUserChanges" data-swf-path="lookandfeel/assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf">
<thead>
<tr>
<th>Field</th>
<th>Old Value</th>
<th>New Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Related
I've a form that contains a textarea and a table with a list of many members (from a collection named Members). Each table's contain two checboxes: one to mark the presence of the member and the second one to mark his payment. After clicking on the submit button I'd like to have in my firebase database something like this:
Meeting collection:
associationId,
textareaValue,
createdAd
Presence collection:
memberId,
meetingId,
present: true or false,
createAt
Payment collection:
memberId,
meetingId,
payment: true or false,
createAt
<form #submit.prevent="handleSubmitNewMeeting">
<!-- step one -->
<div class="card" v-if="showFormPart1">
<div class="card-header">
<h4>Entrer le sujet principal de la réunion</h4>
</div>
<div class="card-body">
<div class="form-group">
<textarea class="form-control" v-model="subjects" required rows="3"></textarea>
</div>
<p></p>
<div class="row">
<div class="col-sm-6">
<button #click="showForm=false" class="btn btn-danger" style="width: 100%">
Annuler
</button>
</div>
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=true;
showFormPart1=false;">
Suivant
</button>
</div>
</div>
</div>
</div>
<p></p>
<!-- step two -->
<div class="card" v-if="showFormPart2">
<div v-if="members">
<div class="card-header">
<h4>Cocher les présences et payements</h4>
</div>
<div class="card-block p-0">
<table class="table table-bordered">
<thead class="">
<tr align="center">
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">Téléphone</th>
<th scope="col">Présence</th>
<th scope="col">Payment</th>
</tr>
</thead>
<tbody>
<tr v-for="member in members" :key="member.id" align="center">
<td>{{ member.memberFirstname }}</td>
<td>{{ member.memberLastname }}</td>
<td>{{ member.memberPhoneNumber }}</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="present">
<span class="slider round"></span>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="payment">
<span class="slider round"></span>
</label>
</td>
</tr>
</tbody>
</table>
<p></p>
<div class="row">
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=false;
showFormPart1=true;">
Précédent
</button>
</div>
<div class="col-sm-6">
<button class="btn btn-secondary"> Valider </button>
</div>
</div>
</div>
</div>
</div>
<p></p>
</form>
How to do these with firebase using Vue Js please ? thanks !
I need your help guys, I've created a form for creating Pay Bulletin and a form for editing. What i need is this:
Once i select emplyee_id the other textfield related popup with old data from DB if they are already entered; if not, i give them values and submit.
I am wondering how this can be done in Laravel??
Here is the code create.blade.php:
<form method="post" action="{{url('employeBultinDetails')}}">
{{csrf_field()}}
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="paie_id">Mois du paie:</label>
<select id="paie_id" name="paie_id" class="form-control">
#foreach($paies as $p)
<option value="{{$p->id}}">{{$p->mois}} - {{$p->annee}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="employe_id"> Employee:</label>
<select id="employe_id" name="employe_id" class="form-control">
<option value="">Selectionner l'employé...</option>
#foreach($employes as $emp)
<option value="{{$emp->id}}">{{$emp->nni}} : {{$emp->nomComplet}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<table>
<tr>
<th >Rubrique:</th>
<th >Montant:</th>
</tr>
#foreach($rubriques as $rub)
<tr>
<td>{{$rub->libelle}}</td>
<td>
<input type="text" class="form-control" name="montant[{{$rub->id}}]">
</td>
</tr>
#endforeach
</table>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-success" style="margin-left:38px">Enregistrer</button>
</div>
</div>
</form>
#endsection
Try this code:
<form method="post" action="{{url('employeBultinDetails')}}">
{{csrf_field()}}
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="paie_id">Mois du paie:</label>
<select id="paie_id" name="paie_id" class="form-control">
#foreach($paies as $p)
<option value="{{$p->id}}">{{$p->mois}} - {{$p->annee}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="employe_id"> Employee:</label>
<select id="employe_id" name="employe_id" class="form-control">
<option value="">Selectionner l'employé...</option>
#foreach($employes as $emp)
<option value="{{$emp->id}}">{{$emp->nni}} : {{$emp->nomComplet}}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<table>
<tr>
<th >Rubrique:</th>
<th >Montant:</th>
</tr>
#foreach($rubriques as $field => $rub)
<tr>
<td>{{$rub->libelle}}</td>
<td>
<input type="text" class="form-control" name="montant[{{$rub->id}}]" value="montant[{{old($field)}}]">
</td>
</tr>
#endforeach
</table>
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<button type="submit" class="btn btn-success" style="margin-left:38px">Enregistrer</button>
</div>
</div>
</form>
#endsection
I am working on 2 bootstrap modals - Update modal & delete modal.
Update modal is working perfectly fine on click of update button.
But when I click on delete button(same as for update), delete modal doesnt pop-up, instead I get a black screen.
I am struggling on this issue quite long and not able to get the solution for this.
I have tried doing "inspect element" & compare both the modals, but it seems fine to me.
Also, I have found similar queries on SOF but it did not work.
I have add/remove different css & js files in the script tag but still it didn't work for me.
Below is the code :-
CSS & js links inside head tag :-
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Update & Delete Buttons to call Modals :-
<td align="center">
<!-- Update Button -->
<button class="btn btn-primary btn-xs" onclick="editEmp(${emp.empid})" data-toggle="modal" data-target="#editemp" data-title="Edit"><em class="glyphicon glyphicon-pencil"></em></button>
<!-- Delete Button -->
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteemp" data-title="Delete"><em class="glyphicon glyphicon-trash"></em></button>
</td>
Update Modal :-
<div class="modal fade" id="editemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="left: -600px" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<form:form id = "regForm" action="registerEmp" modelAttribute="empreg">
<!-- some form elements -->
</form:form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Delete Modal
<div class="modal fade" id="deleteemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="left: -640px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
Any help is really appreciated.
#CoderDS
Link For Reference
You have missed a closing div. This should get your work done.
Updated HTML
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
<h3 class="panel-title">Employee Details</h3>
</div>
<div class="col col-xs-6 text-right">
<button type="button" class="btn btn-sm btn-primary btn-create" onclick="createNew()">Create New</button>
</div>
</div>
</div>
<div class="panel-body table-responsive">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th class="hidden-xs">Employee Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Country</th>
<th>Contact</th>
<th>Email</th>
<th>Gender</th>
<th>Date of Birth</th>
<th>Education</th>
<th>UserName</th>
<th>Password</th>
</tr>
</thead>
<tbody id="myTable">
<!-- foreach -->
<c:forEach items="${data}" var="emp">
<tr>
<td align="center">
<button class="btn btn-primary btn-xs" onclick="editEmp(${emp.empid})" data-toggle="modal" data-target="#editemp" data-title="Edit"><em class="glyphicon glyphicon-pencil"></em></button>
<button class="btn btn-danger btn-xs" onclick="deleteemp(${emp.empid})" data-toggle="modal" data-target="#delemp" data-title="Delete"><em class="glyphicon glyphicon-trash"></em></button>
</td>
<td class="hidden-xs">${emp.empid}</td>
<td>${emp.firstname}</td>
<td>${emp.lastname}</td>
<td>${emp.address}</td>
<td>${emp.country}</td>
<td>${emp.contact}</td>
<td>${emp.email}</td>
<td>${emp.gender}</td>
<td>${emp.dob}</td>
<td>${emp.education}</td>
<td>${emp.username}</td>
<td>${emp.password}</td>
</tr>
</c:forEach>
<!-- foreach -->
</tbody>
</table>
</div>
<div class="panel-footer">
<div class="row">
<div class="col col-xs-4">Page 1 of 5
</div>
<div class="col col-xs-8">
<ul class="pagination hidden-xs pull-right" id="myPager">
</ul>
<ul class="pagination visible-xs pull-right">
<li>«</li>
<li>»</li>
</ul>
</div>
<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div></div>
</div>
</div>
</div></div></div>
<div class="modal fade" id="editemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Employee
Details</h4>
</div>
<form:form id = "regForm" action="registerEmp" modelAttribute="empreg">
<div class="modal-body">
<form:hidden path="empid" id="empid"/>
<div class="form-group">
<label class="control-label" for="firstname">Name</label>
<!-- <label>First Name</label> -->
<form:input path="firstname" id="firstname" class="form-control " type="text"></form:input>
</div>
<div class="form-group">
<label class=" control-label" for="lastname">Last Name</label>
<form:input path="lastname" id="lastname" class="form-control " type="text"></form:input>
</div>
<div class="form-group">
<label class=" control-label" for="address">Address</label>
<!-- <label>Address</label> -->
<form:textarea path="address" id="address" class="form-control " placeholder="Enter Address" type="text"></form:textarea>
</div>
<div class="form-group">
<label>Country</label>
<form:select path="country" id="country" class="form-control" placeholder="Select your country">
<form:option value="select">Select Your Country</form:option>
<form:option value="India">India</form:option>
<form:option value="USA">USA</form:option>
<form:option value="Australia">Australia</form:option>
<form:option value="England">England</form:option>
<form:option value="Germany">Germany</form:option>
<form:option value="China">China</form:option>
<form:option value="Pakistan">Pakistan</form:option>
</form:select>
</div>
<div class="form-group">
<label class="control-label" for="gender">Gender</label>
<div class="">
<label class="radio-inline" for="gender-0"> <form:radiobutton
path="gender" name="gender" id="gender-0" value="Male" />
Male
</label> <label class="radio-inline" for="gender-1"> <form:radiobutton
path="gender" name="gender" id="gender-1" value="Female" />
Female
</label>
</div>
</div>
<div class="form-group">
<label>Date of Birth</label>
<form:input path="dob" id="dob" class="form-control " placeholder="Enter Date of Birth" type="date"></form:input>
</div>
<div class="form-group">
<label>Contact</label>
<form:input path="contact" id="contact" class="form-control " placeholder="Enter Mobile/phone number" type="text"></form:input>
</div>
<div class="form-group">
<label>Email Address</label>
<form:input path="Email" id="email" class="form-control " placeholder="xyz#abc.com" type="text"></form:input>
<div class="form-group">
</div>
<div class="form-group">
<label>Education</label>
<form:input path="education" id="education" class="form-control " placeholder="Enter highest education" type="text"></form:input>
</div>
</div>
<div class="form-group">
<label>Username</label>
<form:input path="username" id="username" class="form-control " placeholder="Enter username" type="text"></form:input>
</div><br><br>
<div class="form-group">
<label>Password</label>
<form:password path="password" id="password" class="form-control " placeholder="Enter password" ></form:password>
</div>
<div class="modal-footer ">
<button type="submit" class="btn btn-warning btn-lg"
style="width: 100%;">
<span class="glyphicon glyphicon-ok-sign"></span> Update
</button>
</div>
</form:form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<div class="modal fade" id="delemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
i've this page http://steam-to-rent.ch/mietdampfanlagen2.html with Bootstrap collapse and modal. The problem is that when you click on "Anfrage" (The yellow button) the modal appears and works correctly, but when you try to close it i can't interact with the page anymore. How can i solve it? this is the code:
<div class="col-lg-12 table1">
<div id="printableArea">
<img class="logo_print logo1" src="img/logo.png" alt="" height="90" width="130" />
<p class="stampa stampa_ipad">Gewerbe Bölli<br>Böllistrasse 18<br>CH - 5072 Oeschgen<br>Tel 062 866 16 88<br>Fax 062 866 16 99<br>info#z-ag.ch</p>
<button class="btn" data-parent="tableParent" data-toggle="collapse" data-target="#table1" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #fadf3e; color:#000;">Mietdampfanlage 21 kg/h 10 bar</button>
<div id="table1" class="collapse">
<table class="table table-striped table-bordered table-hover" width="744">
<thead>
<tr>
<th style="text-align: center;">Kriterium</th>
<th style="text-align: center;">Einheit</th>
<th style="text-align: center;">Grösse</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dampfleistung</td>
<td>kg/h</td>
<td>21</td>
</tr>
<tr>
<td>Abmessungen (L x B x H)</td>
<td>mm</td>
<td>1020 x 600 x 1370</td>
</tr>
<tr>
<td>Gewicht</td>
<td>kg</td>
<td>140</td>
</tr>
<tr class="">
<td>Medium</td>
<td>–</td>
<td>Sattdampf</td>
</tr>
<tr class="">
<td>Ansprechdruck SV</td>
<td>bar</td>
<td>6,0</td>
</tr>
<tr class="">
<td>Einstellbereich Kessel</td>
<td>bar</td>
<td>1,0 – 5,0</td>
</tr>
<tr class="">
<td>max. Betriebsdruck</td>
<td>bar</td>
<td>5,0</td>
</tr>
<td>Fabr. Nr. </td>
<td>–</td>
<td>21.301.112 / 05-09</td>
</tr>
<td>Gesamtanschluss</td>
<td>kW</td>
<td>elektrisch, 15 kW</td>
</tr>
<td>Stromanschluss</td>
<td>A / V</td>
<td>CEE 32A, 5-polig / 400 V</td>
</tr>
<td>Wasserenthärtung</td>
<td>–</td>
<td>separat mietbar</td>
</tr>
<td>Frostschutzsicherung</td>
<td>–</td>
<td>keine</td>
</tr>
<td>Mobilität</td>
<td>–</td>
<td>fahrbar</td>
</tr>
<td>Flexible Anschlussleitungen</td>
<td>–</td>
<td>nach Bedarf</td>
</tr>
<td>Wasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / AG</td>
</tr>
<td>Abwasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / IG</td>
</tr>
<td>Dampfanschluss</td>
<td>Zoll</td>
<td>3/4" / IG</td>
</tr>
</tbody>
<input class="printer" type="button" onclick="printDiv('printableArea')" value="Drucken" />
</table>
<button id="modal_1" type="button" class="btn btn-primary special" style="background: #fadf3e; border: 2px solid #000; color: #000; margin-bottom: 20px; margin-top: -10px; width: 100%;" data-toggle="modal" data-target=".bs-example-modal-sm" data-keyboard="true" data-backdrop="static" >Anfrage</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="row">
<div class="col-sm-12 form">
<div class="modal-header">
<h4 style="color: #000;">Mietdampfanlage 21 kg/h 10 bar</h4>
</div>
<form class="form-modal" role="form" method="post" action="index.php">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="firma" placeholder="Firma" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="text" class="form-control" id="name" name="telefon" placeholder="Telefon" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="text" class="form-control" id="name" name="zeit" placeholder="Zeitraum" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea>
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You made small mistakes.
You gave both modal same class (bs-example-modal-sm) name and calling them by the button by same name. That is why you facing the problem
You rather use ID instead of class to call it. For example - id="modal-1" and "modal-2".
And change replace the name on button
<button id="modal_2" type="button" class="btn btn-primary special" style="background: #fadf3e; border: 2px solid #000; color: #000; margin-bottom: 20px; margin-top: -10px; width: 100%;" data-toggle="modal" data-target="#modal-1">Anfrage</button>
See the change is 'data-target'. I replaced the ID on class name you used.
Above is right and in addition to this also you can able to provide close sign in the header on click of that modal get closed.
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true"
id="close" align="right">x</button>
<h4 class="modal-title" id="myModalLabel">Mietdampfanlage 21 kg/h 10 bar</h4>
</div>
A have a form in a table, and all my field sizes are fitting well. But I have one datefield that has an .input-group-addon, an that is making the size control not work very well. Is there a way to fix it?
I tried some ways to make a smaller input, but the addon stopped being attached:
http://jsfiddle.net/93MpC/1/
The code from Fiddle:
<div class="table-responsive">
<table class="table table-bordered">
<tr class="form-group">
<td><label class="field-label required-field">Name:</label></td>
<td><div class="input-group">
<input type="text" name="name" required id="id_name" class="form-control">
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group">
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group"><div class="row">
<div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
</div></td>
</tr>
<tr class="form-group">
<td><label class="field-label">Birthdate:</label></td>
<td><div class="input-group">
<div class="row">
<div class="col-lg-3">
<div class="col-lg-2"><input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"></div>
<div class="col-lg-1"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
</div>
</div>
</div></td>
</tr>
</table>
</div>
Thanks in advance!
The proper HTML for this requires another level of nesting. More information can be found in the input groups documentation.
The <td> with your sized input and addon should look like this:
<td class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</td>
The .col-* classes add padding left and right, so if that's a problem you can remove it with a little bit of CSS.
Taken from your code, I added a class half to the parent div. Here's the css:
.half {
width: 50%;
}
And the HTML (almost the same):
<div class="input-group half"><!-- here is .half -->
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Edit Or if you want to use col here's a different option:
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-3">Birthdate:</div>
<div class="col-md-9">
<div class="input-group">
<input class="form-control datefield" id="id_dataNasc" name="dataNasc" type="text"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Example