This is what my table looks right now
Table:
I'm trying to place the small x button aligned next to the input textbox. Here's my code so far.
<table class="table table-hover">
<thead class="thead-inverse">
<th>Clave</th>
<th>Razón social</th>
<th>Contacto 1</th>
<th>Contacto 2</th>
<th>Contacto 3</th>
<th></th>
</thead>
<tbody>
<td class="col-md-1">
<input type="text" name="" class="form-control"/>
</td>
<td class="col-md-3">
<input type="text" name="" class="form-control"/>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
</tbody>
</table>
here is what you're looking for
td .btn {
position: absolute;
margin-top: 7px;
float: right;
margin-left: 5px;
}
td input {
float: left;
}
.spacer {
padding-left: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover">
<thead class="thead-inverse">
<th>Clave</th>
<th>Razón social</th>
<th>Contacto 1</th>
<th>Contacto 2</th>
<th>Contacto 3</th>
<th></th>
</thead>
<tbody>
<td class="col-md-1">
<input type="text" name="" class="form-control"/>
</td>
<td class="col-md-3">
<input type="text" name="" class="form-control"/>
</td>
<td>
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td class="spacer">
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td class="spacer">
<input type="text" name="" class="form-control" disabled/>
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
<td class="spacer">
<a title="Quitar" class="btn btn-danger btn-xs"><span class="fa fa-times"></span></a>
</td>
</tbody>
</table>
Have you tried:
<td nowrap></td>
There is a CSS version of this:
th {
white-space: nowrap;
}
Related
I use Java EE with JSTL and Materialize css for my project.
When i try to submit a Materialize css form in a jsp file i get an error.
> com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException:
> Column 'name' cannot be null
Here is the form:
<div class="row">
<form class="col s12" action="update_comment" method="post">
<input type="hidden" name="comment_id" value="${comment.comment_id}" >
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input disabled value="${comment.name}" id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Имя комментатора</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea">${comment.text}</textarea>
<label for="icon_prefix2">Отредактируйте комментарий</label>
</div>
</div>
<div>
<button class="btn waves-effect waves-light" type="submit" name="submit-button" id="submit-button">Подтвердить
<i class="material-icons right">send</i>
</button>
<a id="buttonCancel" class="waves-effect waves-light red btn">
<i class="material-icons right">close</i>Отмена</a>
</div>
</form>
</div>
But when i use normal html code like this it works:
<div>
<form action="update_comment" method="post" id="commentForm">
<table class="form">
<input type="hidden" name="comment_id" value="${comment.comment_id}">
<tr>
<td align="right">Category name:</td>
<td align="left"><input type="text" id="name" name="name" size="20" value="${comment.name}" /></td>
</tr>
<tr>
<td align="right">text:</td>
<td align="left"><input type="text" id="text" name="text" size="20" value="${comment.text}" /></td>
</tr>
<tr><td> </td></tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Save</button>
<button id="buttonCancel" >Cancel</button>
</td>
</tr>
</table>
</form>
</div>
What is my mistake? Thanks
I have a table in a div. the table is more height than the div. I have a vertical scroll to navigate into the div to show the table lines.
The first line has a bootstrap select and it contains a scroll. It makes like this:
<div class="content-tab" id="guest">
<table id="guestTable" class="tableClass">
<thead>
<tr>
<th class="text-center" style="width:10% !important;max-width:150px !important;">*</th>
<th class="text-center" style="width:6%;">Tous</th>
<th class="text-center" style="width:6%;">Lun</th>
<th class="text-center" style="width:6%;">Mar</th>
<th class="text-center" style="width:6%;">Mer</th>
<th class="text-center" style="width:6%;">Jeu</th>
<th class="text-center" style="width:6%;">Ven</th>
<th class="text-center" style="width:6%;">Sam</th>
<th class="text-center" style="width:6%;">Dim</th>
<th class="text-center">*</th>
<th class="text-center">*</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody id="GuestBody">
<tr id="newPlanning">
<td style="width:10% !important;max-width:150px !important;"><select id="Articles" class="selectpicker"
data-live-search="true" old-value="" style="display: none;">
<option value=""></option>
<option value="59863">*</option>
<option value="59969">*</option>
<option value="59999">*</option>
<option value="60078">*</option>
.
.
.
</select>
<div class="btn-group bootstrap-select open"><button type="button"
class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown"
data-id="Articles" title="Articles" aria-expanded="true"><span
class="filter-option pull-left">Articles</span> <span
class="caret"></span></button>
<div class="dropdown-menu open" style="max-height: 540px; overflow: hidden; min-height: 123px;">
<div class="bs-searchbox"><input type="text" class="input-block-level form-control"
autocomplete="off"></div>
<ul class="dropdown-menu inner selectpicker" role="menu"
style="max-height: 488px; overflow-y: auto; min-height: 71px;">
<li data-original-index="0" class="selected"><a tabindex="0" class=""><span class="text"></span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a></li>
<li data-original-index="1" class=""><a tabindex="0" class=""><span class="text">*</span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a></li>
<li data-original-index="2" class=""><a tabindex="0" class=""><span class="text">*</span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a></li>
<li data-original-index="3" class=""><a tabindex="0" class=""><span class="text">*</span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a></li>
<li data-original-index="4" class=""><a tabindex="0" class=""><span class="text">*</span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a></li>
<li data-original-index="5"><a tabindex="0" class=""><span class="text">*</span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a></li>
.
.
.
</ul>
</div>
</div>
</td>
<td class=""><input class="form-control input-sm" data-day-week="0123456" type="text" id="0123456" maxlength="1" onclick="this.select();" onkeypress="return RecurrencePopin.verifyNumbers(event, this);" autocomplete="off"></td>
<td class=""><input class="form-control input-sm" data-day-week="0" type="text" id="0" maxlength="1" onclick="this.select();" onkeypress="return RecurrencePopin.verifyNumbers(event, this);" autocomplete="off"></td>
<td class=""><input class="form-control input-sm" data-day-week="1" type="text" id="1"maxlength="1" onclick=" this.select();"onkeypress="return RecurrencePopin.verifyNumbers(event, this);" autocomplete="off"></td>
<td class=""><input class="form-control input-sm" data-day-week="2" type="text" id="2"maxlength="1" onclick=" this.select();"onkeypress="return RecurrencePopin.verifyNumbers(event, this);" autocomplete="off"></td>
<td class=""><input class="form-control input-sm" data-day-week="3" type="text" id="3"maxlength="1" onclick=" this.select();"onkeypress="return RecurrencePopin.verifyNumbers(event, this);" autocomplete="off"></td>
<td class=""><input class="form-control input-sm" data-day-week="4" type="text" id="4"maxlength="1" onclick=" this.select();"onkeypress="return RecurrencePopin.verifyNumbers(event, this);" autocomplete="off"></td>
<td class=""><input class="form-control input-sm" data-day-week="5" type="text" id="5"maxlength="1" onclick=" this.select();"onkeypress="return RecurrencePopin.verifyNumbers(event, this);" autocomplete="off"></td>
<td class=""><input class="form-control input-sm" data-day-week="6" type="text" id="6"maxlength="1" onclick=" this.select();"onkeypress="return RecurrencePopin.verifyNumbers(event, this);" autocomplete="off"></td>
<td><label><input type="text" class="form-control actual_rangeC" id="startDate" value="03/07/2019"></label></td>
<td><label><input type="text" class="form-control actual_rangeC" id="endDate" value="03/07/2019"></label></td>
<td class="actionCol text-center pull-right" style="padding-right:0px;"><div id="btnAddPlanning" title="Ajouter une programmation" class="btnAdd icon-plus hidden"></div> </td>
</tr>
.
.
.
</tbody>
</table>
</div>
I expect that I see the entire list of the select over the div. Now it's in the div, I see some option not all.
Initially my page appears like this, with one input text box and a "+" button and a "-" button.
Image -
Now, if i click on the "+" button , the size between the first text-box and button increases. Please have a look -
Image -
Please guide on why such a gap appears. This gap doesn't appear when i click on subsequent "+" buttons.
code -
app.component.html
<div *ngIf="addContainer">
<p style="margin-left: 200px; font-size:18px">Please enter the node -</p>
<table align="center">
<tbody>
<tr>
<td>
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" class="btn btn-danger"> - </button>
</td>
</tr>
<tr *ngFor="let container of containers" >
<div #myElement>
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</div>
</tr>
<tr>
<td style="text-align:center">
<button type="button" (click)="showGraphs()" class="btn btn-dark">Search</button>
</td>
</tr>
</tbody>
</table>
</div>
Its because of extra div inside the tr. replace the div by ng-container.
<tr *ngFor="let container of containers" >
<ng-container #myElement>
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</ng-container>
</tr>
OR
you can put the reference myElement at tr level
<tr *ngFor="let container of containers" #myElement >
<ng-container >
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="myElement.remove()" class="btn btn-danger"> - </button>
</td>
</tr>
I did this -
app.component.ts
deleteOneMore(){
this.containers.splice(this.index, 1);
}
app.component.html
<tr *ngFor="let container of containers; let i = index;" >
<ng-container >
<td >
<input *ngIf="addMore" type="text" placeholder="Enter a Node" value="Aadhar">
</td>
<td >
<button type="button" style="margin-left: 10px" (click)="addOneMore()" class="btn btn-success"> + </button>
</td>
<td>
<button type="button" style="margin-left: 10px" (click)="deleteOneMore()" class="btn btn-danger"> - </button>
</td>
</ng-container>
</tr>
So here is my answer i think it will help you with your problem, you have used a class in every button called "btn" and it contain by default padding of padding: .375rem .75rem; so you guess my answer, you have to remove it and you will be fine.
when padding were not removed from btn class
when padding removed from btn classjust checked after commenting this btn padding in picture
I have a problem about aligning some items.
In the following Fiddle I have 2 options Option1 and Option2. I would like to align the toggle switches with the ones in the first two rows.
Basically I want the toggle switches to be in the second column of the table and the text that are below them in the first column.
Any ideas how can I solve it ?
Thank you
You're using bootstrap, so I would ditch the tables. But if you must use the tables, simply make the table rows and columns uniform.
Here's an updated fiddle with the correct nesting
<div class="container">
<table class="table table-bordered">
<thead style="" class="">
<tr class="d-flex">
<th class="col-6">My </th>
<th class="col-6"></th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="text-sm-left col-sm-11">some text
</td>
<td class="text-sm-right col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="text-sm-left col-sm-11">some text
</td>
<td class="text-sm-right col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-sm-12">testtexttex :</td>
</tr>
<tr class="d-flex">
<td class="col-sm-11">Option1
<button type="button" class='btn btn-secondary '>
<span class="fa fa-envelope"></span>
</button></td>
<td class="col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-sm-11">Option2
<button type="button" class='btn btn-secondary '>
<span class="fa fa-envelope"></span>
</button></td>
<td class="col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Hi I need to add textfield in html table using bootstrap, but when using the bootstrap class in html table cell teh textfield is too small.
In the following code example the problem is in textfield id="Winvnetv".
<table class="table table-bordered table-striped">
<tr>
<form id="formSuppliestrn" method="post" class="form-horizontal" >
<td>
<input type="text" name="Wsupplyid" id="Wsupplyid" >
</td>
<td><input type="text" name="Wsupplydesc" id="Wsupplydesc"></td>
<td><input type="text" name="Wquantity" id="Wquantity"></td>
<td>
<div class="form-group">
<label class="col-xs-3 control-label">Ποσό τιμολογίου</label>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon">€</span>
<input type="text" class="form-control" name="Winvnetv" id="Winvnetv"/>
</div>
</div>
</div>
</td>
<td>
<input type="text" name="Wtotv" id="Wtotv">
</td>
<td> <button type="submit" class="btn btn-sm btn-primary" id="trnadd">
<span class="glyphicon glyphicon-plus-sign"></span>
</button>
</td>
</form>
</tr>
</tbody>
</table>
any idea?
You can add the input-lg or input-sm class to the textbox. It will increase its size.
<input type="text" class="form-control input-lg" name="Winvnetv" id="Winvnetv"/>