I'm using bootstrap and Vue.js for a webapp. But I can't use bootstrap table css in a Vue component. When I write
<table>
<tr class='active'>
<td>place</td>
<td>holder</td>
</tr>
</table>
outside Vue component the css works okay and the table is properly formatted. But when I use the same code within <template>...</tenplate> tag of the Vue component, the active style of bottstrap table css is not applied to the table row.
I am keeping the Vue component in a .vue file and compiling with webpack.
What's going wrong?
Adding a tbody element to the table solved the problem. The code now reads
<table>
<tbody>
<tr class='active'>
<td>place</td>
<td>holder</td>
</tr>
</tbody>
</table>
The CSS is working properly now.
I can see table working properly in Vue component. Following is code for table I am using:
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Here is working fiddle.
Related
I working on Vue3 with Quasar/cli.
How to make this category dividers (blue subtitles) with Quasar component qTable or qMarkupTable? screen
Ive tried to figure out body slots but I couldnt
Link to qTable API doc
https://quasar.dev/vue-components/table#introduction
Link to qMarkupTable API doc
https://quasar.dev/vue-components/markup-table#introduction
For QMarkupTable, add a row whose TD spans all the columns:
<q-markup-table>
<thead>
<tr>
<th>№</th>
<th>Name</th>
<th>Code</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary text-white">
<td colspan="4">Medicines</td>
</tr>
<tr>
<td>1</td>
<td>Mukosolvan</td>
<td>101492</td>
<td class="text-negative">1</td>
</tr>
</tbody>
</q-markup-table>
QMarkupTable is a regular HTML table - it just applies the proper styling on it, everything else is the same HTML you've been studying as a student.
I'm trying to make components that would handle some table data for me. I figured the best approach is to create a component for each part of the table.
So, I have
Vue.component('my-table', { ... });
Vue.component('my-table-header', { ... });
Vue.component('my-table-header-column', { ... });
As I was writing the code, my HTML looked like this first:
<my-table inline-template>
<table>
<thead>
....
</thead>
<tbody>
....
</tbody>
</table>
</my-table>
This worked just fine.
Now I wrote the second component (my-table-header) and changed the HTML like so:
<my-table inline-template>
<table>
<my-table-header inline-template>
<thead>
....
</thead>
</my-table-header>
<tbody>
....
</tbody>
</table>
</my-table>
This however results in vue complaining that "Inline-template components must have exactly one child element."
I can't seem to find a good explanation on what I'm doing wrong here. It seems just by using a nested component, I create this issue.
The problem was indeed with table element being finicky ands stuff getting thrown out.
I finally managed to get this working with is="component-name" construct, like so:
<my-table inline-template>
<table>
<thead is="my-table-header" inline-template>
<thead>....</thead>
</thead>
<tbody>
....
</tbody>
</table>
</my-table>
Ask me not why I had to repeat the thead tag. It wouldn't render without it.
I have table which have more rows:
This table start on new page and some rows are hidden (are not visible on next page).
I want to place table on previous page and hidden visible display to next page. I use DOMPDF 0.8.3.
I tried:
<table style"page-break-inside: auto;">
<tr style="page-break: auto">
<td>abc</td>
<td>cde</td>
</tr>
<tr style="page-break: auto">
<td>abc</td>
<td>cde</td>
</tr>
<tr style="page-break: auto">
<td>abc</td>
<td>cde</td>
</tr>
</table>
Do not know how to solve this, please?
I am trying to learn proper use of locators to find nested elements. Using a modified table from w3school (for illustration porpouses), what is a good way of collecting the row elements belonging to the tbody (while exclude those belonging to thead)?
I was thinking:
element(by.tagName('tbody')).element.all(by.tagName('tr'))
This does not work since a sublocator can not be a an elementArrayFinder (if I have understood correctly).
Is it possible to write:
element.all(by.css('tbody tr')) ?
(I will try that last tomorrow after a long day).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML Table</h2>
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</body>
</html>
For nested selection in Protrator, you have to all diretly to the previous all method call like,
element(by.tagName('tbody')).all(by.tagName('tr'))
Even you can use to select the deep child like this,
element(by.tagName('tbody')).all(by.tagName('td'))
Yes. by.css('tbody tr') is for finding element by css selector. Using them in element.all() will return all the element matching the css selector.
element.all(by.css('tbody tr'));
As it is tr a immediated child, you can try this as well,
element.all(by.css('tbody>tr'));
How can I locate an element "1988" (the fourth line) in the following table:
<table border="0" width="820" cellpadding="2" cellspacing="0">
<tbody>
<tr valign="top">
<td class="default" width="100%">Results <b>1</b> to <b>10</b> of <b>1988</b></td>
</tr>
<tr valign="top">
<td class="default" bgcolor="#C0C0C0"> <font class="resultsheader"> ...etc
</tr>
</tbody>
</table>
IMPORTANT: I know one way that works (By.xpath):
driver.findElement(By.xpath("//td[#width='100%']")).getText();
However, this way does not ALWAYS work. The page is dynamic, so I need a way to locate that element no matter what changes happen to the page.
I tried the following but I am not sure:
By.xpath("//html//body//table//tbody//tr[3]//td//table//tbody//tr//td[2]//table[4]//tbody//tr[1]//td//b[3]"
If you can't change the HTML and want to use attributes for selection, you can write something like this:
//table[#border=0][#width=820]//tbody//tr[1]//td//b[3]