I have this fiddle and you can see that when you input any value for price field , It's popup tip is not positioned on the text because its data type is number as when you input values for Names.
https://jsfiddle.net/6da007fm/21/
HTML
<table data-toggle="table"
data-editable-emptytext="This field is empty"
data-id-field="id"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data2/">
<thead>
<tr>
<th data-field="name" data-editable="true" >Name</th>
<th data-field="price" data-editable="true" data-editable-emptytext="For free." data-editable-type="number" data-editable-placeholder="Enter a Number">Price</th>
JS
$.fn.editable.defaults.mode = 'popup';
Is it a normal behavior or there is any workaround to this. I am using this in my project web page and it has 5 columns in one row and is not looking very neat because of this.
-Thanks
you just need to override popovers core css
.popover{
left:190px!important
}
here is your updated fiddle Working demo
Related
This question might be easy for some people.
I want to click on a link based on href value and text in link.Below is what i am using to search for text in link.
var elementselected = this.coinDataTable.element(by.css('a[href*='+CoinLink+']'));
I tried below code but it is not working. Can someone please suggest correct usage?
var elementselected = this.coinDataTable.element(by.css('a[href*="'+CoinLink+'"][text='CoinText'));
OR
var elementselected = this.coinDataTable.element(by.css('a[href*='+CoinLink+']')).element(by.linkText('CoinText'));
or
var elementselected = this.coinDataTable.element(by.linkText('CoinText')).element(by.css('a[href*='+CoinLink+']'));
This link is inside a table. Below is HTML for whole row. There are 2 links in this row. I want to select 2nd one which has CoinText in it.
<tr>
<td><img border="0" src="../../../images/pc_cdlibrary_side_icon_img_lighterbg.gif"></td>
<td>1C</td>
<td>MS</td>
<td>CoinText</td>
<td>$15</td>
<td>S-12 </td>
<td>B-21</td>
</tr>
You could use the by.cssContainingText to find the element by text and attribute:
by.cssContainingText('[href*="CoinLink"]', 'CoinText')
This code helps me to solve the issue
element(by.css('a[href*="CoinLink"]')).getText()).toContain('CoinLink')
I'm trying to pull the "Available Balance" dollar amount from a web site and have the amount entered into my Excel sheet. Below is the code section from the web site and the page source is located here, http://pastebin.com/VsThEzEE. Thanks in advance for any suggestions.
<table class="bd-wizard-account-header">
<tr>
<td valign="bottom"><img src="/Content/images/tenants/visaUS/en-us/vgCard1.png" /></td>
<td valign="bottom"><h6>Card Ending</h6><h5>0102</h5></td>
<td valign="bottom"><h6>Available Balance</h6><h5>$0.00</h5></td>
<td valign="bottom"><h6>Initial Balance</h6><h5>$300.00</h5></td>
</tr>
</table>
After more searching, I was able to pull the info that I needed and enter it into my Excel sheet with the following.
Dim dd As String
dd = IE.Document.getElementsByTagName("h5")(1).innerText
ActiveCell.Value = dd
It is also the third td tag within the element with className "bd-wizard-account-header" with the tag table
Without knowing how many tables there are you could use the equivalent CSS selector, as described above, of:
table.bd-wizard-account-header td:nth-child(3)
or potentially just
.bd-wizard-account-header td:nth-child(3)
CSS selector query on HTML supplied:
Reference material:
CSS Class selector
nth-Child
VBA:
You can apply the selector via the .querySelector method of the IE.Document. .querySelectorAll if table/class index is greater than 0 i.e. there are more than one the page and the one you require is not the first.
Example syntax:
IE.Document.querySelector("table.bd-wizard-account-header td:nth-child(3)").innerText
I am using datatables and am wondering if there is an option to make the header wrap.
i use compact display
the problem is, some javascript sets the width of the table header cells to a fix number of pixels.
so i want:
fees
covered
name
shown
amount
shown
in the headers
EDIT: the problem with adding a <br/> tag is that the width of the columns stay exactly the same, but i want them to become smaller, less width, see here:
Use line break <br> in the table header:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>fees<br>covered</th>
<th>name<br>shown</th>
<th>amount<br>shown</th>
</tr>
</thead>
</table>
See this jsFiddle for code and demonstration.
Depending on how your table is initialised then you could use an adaption of the title key within a columns definition:
"title": "Your Title".split(" ").join("<br/>"), // Your<br/>Title
Example JSFiddle here.
I have a set of survey questions each of which I am arranging in a single row table. I want the first entry to serve as a prompt and have been using <th> for that cell, as in:
<table style='width:100% table-layout:fixed;border-collapse: collapse;'>
<tr>
<th style='width:40%'>
<b>How long were you on active surveillance?</b>
</th>
<td style='width:10%;'>f3_watchtime_num</td>
<td style='width:5%'></td>
<td style='width:50%;>f3_watchtime</td>
</tr>
</table>
It seems to work OK but I have some reservations and questions about mixing <th> and <td> cells in a single <tr>:
Is this HTML5 Standards compliant? (Is there a W3C document that allows or prohibits this practice?)
Are there any downsides to this practice?
Thanks,
David
1. Is this HTML5 Standards compliant? (Is there a W3C document that allows or prohibits this practice?)
W3C tr reference says it's content model can contain:
Content Model:
Zero or more td, th, and script-supporting elements
https://www.w3.org/TR/html5/tabular-data.html#the-tr-element
While your usage isn't very common, there isn't anything in W3C that forbids it.
2. Are there any downsides to this practice?
As for the use of th and td together, its accepted by W3C provided they are children of a tr element.
However, if you are displaying tabular data, (i.e. your survey results are data) using a table is fine. If you are using the table for layout purposes, you should use a CSS based layout instead.
The recommendation of W3C is avoid to use tables for layouts. It is valid only for displaying ordered data, but that's not your case. You can achieve the same with <div> and will be semantically correct.
Other thing is your question about mixing. I think if you don't write <tbody> and <thead> tags, you don't separate the content for the headers in the table, so that's correct because there aren't <td> tags inside a <thead> and there aren't <th> tags inside a <tbody>.
However, it's better practice if you don't use tables for this purpose.
I need to add pagination feature to few of my DataGrids
and I am just moving ahead step by step.
To begin with I tried setting 'rowsPerPage' attribute
of DataGrid to some value, say 5. But it has no impact on the
displayed grid. I mean number of rows displayed are more than
the value set to 'rowsPerPage'.
<table dojoType="dojox.grid.DataGrid" store="tags" rowsPerPage =3
style="width: 100%; height: 500px;">
<thead>
<tr>
<th width="150px" field="dept">Namey</th>
<th width="150px" field="name">Depty</th>
</tr>
</thead>
</table>
Please tell me how to show only 3 results only per time .
I have been searching web since morning but to no avail.
Any inputs will be highly appreciated.
Please help .
The rowsPerPage property actually doesn't control the number of items show in the grid. It controls the number of rows loaded as you scroll through the grid. Default is 25, and that's usually pretty good.
What you want to do is set the autoHeight property on the grid to the number of rows you want to show. It's kind of an interesting property because it can be set to "true" which will expand your grid to show all data rows, or it can be set to a number (like 3) and then it will only show that many rows, and create a scroller for your grid if your data store has more than that number of rows.
(I know this is probably a late answer, but found this while researching another grid question, and thought I'd throw it out there.)