I am facing issue when working with NgTableParams to show table in IE.
It is showing correctly in chrome but the table row alignment is not proper in IE.
Please find the demo https://plnkr.co/edit/NAi4ZIleQ2LWDWHQbjS5?p=preview
In IE when you open the above link and Launch the preview window in separate page, you can notice the table rows are not properly matching with the table header.Any inputs?
html:
<div ng-controller="BaseController">
<div class="col-xs-5 container-paragraph">
<table ng-table="tableParams" class="table table-striped table-scroll" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ firstname: 'text'}" sortable="'firstname'">
{{user.firstname}}</td>
</tr>
</table>
</div>
<div class="col-xs-7 container-paragraph">
<table ng-table="tableParams" class="table table-striped table-scroll" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ firstname: 'text'}" sortable="'firstname'">
{{user.firstname}}</td>
</tr>
</table>
</div>
</div>
Pls find the image which shows the alignment of rows with the header issue in IE below:
Put both tables inside a single table and try
may this code help you
<td data-title="'#'" sortable="'id'">
{{$index + 1}} </td>
you can name your fields using data-title in ng-table
<input type="text" class="form-control input-sm pull-right ng-pristine ng-valid ng-touched"
ng-model="" placeholder="">
and search button seperatelly
Related
I'm doing a form that have a multiple checklist, the user can select whatever they want and they neet to put a date, I already configured the checklist but, How can I connect the input date to the input checkbox because they need to be related to.
Soo my final result should be like:
results [{ 'Tramit1', 'date1' }, { 'Tramit2', 'date2' }];
Here's my current code of the part I'm talking about (because the form is bigger):
<table class="table table-bordered">
<thead>
<tr>
<th> # </th>
<th>Tràmit</th>
<th>Validesa de l'autorització</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let permiso of permisos">
<td id="first">
<div class="form-check form-check-aj">
<label class="form-check-label">
<input (change)="onChange(permiso.nom, $event.target.checked)" type="checkbox" class="form-check-input">
<i class="input-helper"></i></label>
</div>
</td>
<td id="first">{{permiso.nom}}</td>
<td>
<div id="datepicker-popup" class="input-group date datepicker">
<input type="date" id="datePicker{{permiso.id}}" name="bday" />
<span class="input-group-addon input-group-append border-left">
<span class="mdi mdi-calendar input-group-text"></span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
I have a form and all inputs are set inside table td, I use text input and bootstrap-select in table row.
All inputs are displayed properly with normal resolution in system.
The display size of text inputs gets reduce when I view that in lower resolution or zoom but bootstrap select does not reduce beyond title text or option text and remains the same.
Also table row width remains same, i.e it tries to fit into screen width instead of expanding with scroll beyond screen width.
I want text input not to reduce display size.
following is my code please help on fixing this.
<div class="span6">
<table id="target-tables"
class="table table-responsive table-striped table-bordered table-hover no-margin no-border">
<thead>
<tr>
<th class="no-border" >Title1</th>
<th class="no-border" >Title2</th>
<th class="no-border" >Title3</th>
<th class="no-border" >Title4</th>
<th class="no-border" >Title5</th>
<th class="no-border" >Title6</th>
<th class="no-border" >Title7</th>
<th class="no-border" >Title8</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" title='Select a database' >
<option value=".....">......</option>
</select>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md"/>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" multiple title="........." >
<option value="......">.....</option>
</select>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md" />
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md" />
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md" />
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" title="........." >
<option value="...">........</option>
</select>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" >
<option value="......">........</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
Your .table needs to be nested INSIDE a .table-responsive class as per Bootstrap's documentation:
Responsive tables Create responsive tables by wrapping any .table in
.table-responsive to make them scroll horizontally on small devices
(under 768px). When viewing on anything larger than 768px wide, you
will not see any difference in these tables.
You have the .table-responsive in the same element as the .table.
I am trying to click on a button in a table row. The relevant HTML code is given below:
<div id="catalogItems" class="col-xs-12">
...
<table class="table table-condensed table-hover">
...
<tbody id="existingItemsList">
<tr id="item_3" class="info item" item_name="vegetables" role="form" item_id="3">
...
</tr>
<tr id="item_4" class="info item" item_name="pizza" role="form" item_id="4">
...
</tr>
<tr id="item_5" class="info item" item_name="Pastries" role="form" item_id="5">
<td>
<button onclick=".." class="btn btn-sm btn-info" type="button"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr id="item_6" class="info item" item_name="Burger" role="form" item_id="6">
...
I want to access the the button in the row with item_name="pastries" to run a test on it with Robot. My Xpath is given below:
xpath=//div[#id='catalogItems']//tr[#item_name=Pastries]//button[#class='btn btn-sm btn-info']
With this, however, the button in the first row (item_name="vegetables") is being selected by the Robot FW. How should I change the xpath to access the item_name="pastries" row? Please help!
I think this is because you have an issue here, please cover Pastries with '', so it looks like 'Pastries'
//tr[#item_name='Pastries']
I am working on a project. You can access to the page here
Here is the small bit where the error happens
<div class="col-sm-6 responsive-table">
<table>
<caption>Page template</caption>
<tr >
<td class='leftCol'>Easy</td>
<td ><input ng-model='page.easy' ng-model='wordpress' min=0 type='number' class='form-control numberInput' ></td>
</tr>
<tr >
<td >Medium</td>
<td ><input ng-model='page.medium' type='number' min=0 class='form-control numberInput'></td>
</tr>
<tr >
<td class='leftCol'>Hard</td>
<td ><input ng-model='page.hard' type='number' min=0 class='form-control numberInput'></td>
</tr>
</table>
</div>
<div class="col-sm-6 responsive-table">
<table>
<caption>Frontpage template</caption>
<tr >
<td class='leftCol'>Easy</td>
<td><input ng-model='frontpage.easy' type='number' min=0 class='form-control numberInput'></td>
</tr>
<tr >
<td >Medium</td>
<td><input ng-model='frontpage.medium' type='number' min=0 class='form-control numberInput'></td>
</tr>
<tr >
<td class='leftCol'>Hard</td>
<td><input ng-model='frontpage.hard' type='number' min=0 class='form-control numberInput'></td>
</tr>
</table>
</div>
</div>
When I clicked the input text boxes in the app, the whole group moves. Anyone knows why?
At first I thought it would be because of data-toggle tooltip. I tried to fix with adding container body to the element but it just does not work. I think it is not because of the tooltip because I even removed the tooltip stuffs but it still does not work.
Thank you for reading! Any answers, tips or suggestions is welcome.
I tried it in chrome and saw no offsets when clicking in. This might be due to css issuses. Note that angular modifies the input's class when you click in it, outside, change value etc. Some of the classes that are modified are:
ng-pristine, ng-dirty, ng-valid, ng-invalid, ng-touched (there are probably more).
If your css has a definition that changes the element size, for example a different border for an active object, it might generate such effect.
One way to track the issue would be to use chrome and do the following:
1. Right click the field and select 'inspect elemenet'
2. The DevTools window opens, now click in and out of the input element and see what classes are changed, the DevTools animate the changes for you and you will have a visual cue.
3. See what definitions might be affecting the layout.
I have three columns in a table. 1st and 3rd column have plenty of rows. 2nd column has only row, but i want this row to be located in middle of table. I am not getting desired result.
<tr>
<td>
<div id="Usrs">
<select name="z" id="z" size="25" multiple="multiple" style="width: 200px">
<option>abc</option>
</select>
</div>
</td>
<td colspan="2" align="center" valign="middle">
Move
</td>
<td>
<div id="Usrs">
<select name="z" id="z" size="25" multiple="multiple" style="width: 200px">
<option>abc</option>
</select>
</div>
</td>
</tr>
Attached the image also. Help me where am I going wrong
Use "vertical-align:" instead of "valign:"
style="vertical-align: middle"
http://www.css4you.de/Texteigenschaften/vertical-align.html
Try to add a div or span tag, and mention the width and height in it.