Using vue I dynamically create multiple td elements with v-for.
<table>
<tr>
<td v-for="(item, index) in navLinks" :key="index">
<span v-if="item.vif">
<router-link
:to="{ name: item.name }"
class="router-links"
style="margin-left: 0rem;"
exact
>{{ item.text }}</router-link>
</span>
<span v-if="showPipe(item, index)">|</span>
<span v-if="showMargin(item, index)"></span>
</td>
</tr>
</table>
Now I want to wrap all tds in another html element, without creating another table. Is this possible?
Related
I want my ngbpopover to appear at the top of the parent element as it is appearing below the parent element. I had put container="body" in ngbpopover that fix the given issue but somehow the external css is not appearing that I had defined in ng-template.
<mat-tab-group animationDuration="0ms">
<div *ngFor="let sampleData of sampleDataInfo[j]; let i=index">
<mat-tab label="{{targetData[j][i].fullName}}">
<table class="source-target-Info-table">
<tr class="source-target-Table">
<th><img data-toggle="tooltip" data-placement="bottom" title="Sub1"></th>
<th>row2</th>
<th>row3</th>
<th>row4</th>
<th>row5</th>
<th>row6</th>
<th>row7</th>
<th>row8</th>
<th>row9</th>
<th>row10</th>
</tr>
<tr *ngFor="let target of targetData[j][i].files; let file=index">
<td>
<a class="info-link" href="javascript:;" title=" Log-{{sampleData?.sessionId}}" (click)="openDexLog(j,i)">
{{(1)}}
</a>
</td>
<td *ngIf="target.qualityLevel > 0; else negativeQuality">
**<a class="info-link" href="javascript:;" title="Click to see Quality result files" href="javascript:;" placement="top-left" popoverClass="popover-class" [ngbPopover]="popContentQuality" container="body">{{target.qualityLevel}}</a>**
</td>
**
<ng-template class="quality-popover" #popContentQuality>**
<h1 class="quality-heading">Quality Results for</h1>
<h3 class="file-name">{{target.name}}</h3>
<table class="source-target-Info-table">
<tr class="source-target-Table">
<th>FILE NAME</th>
<th>SIZE</th>
<th>DESCRIPTION</th>
</tr>
<tr *ngFor="let tq of tqData; let i=index">
<td>
<a class="info-link" href="javascript:;">{{tq.name}}</a>
</td>
<td>{{tq.size/1000}} KB</td>
<td>{{tq.description}}</td>
</tr>
</table>
</ng-template>
</tr>
</table>
</mat-tab>
</div>
</mat-tab-group>
It is only taking the css if is defined in inline format ( using style). Is there any to make the external css working when container="body" for ngbpopover in ng-template? I had also tried to define the external css in the component that consist of body tag but that doesn't work for me. Any suggestions regarding this will be helpful.
Probably styles incapsulated in :host selector. Input container="body" makes you tooltip content not inside host component.
I am struggling with styling ng-template tag.
what i have tried in my .css file until now:
using #other_content as ID in my .css file
adding a class to <ng-template>
styling all <td> tags
It's not working and after searching i have not found any solution.
HTML:
<div class="cont">
<div class="scolldiv">
<table border="1">
<thead>
<tr>
<th>Char</th>
<th>Break After</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let charobj of Chars;let i = index" [attr.data-index]="i">
<td>{{charobj.char}}</td>
<td class="tdcell" *ngIf= "charobj.after; else other_content">YES</td>
<ng-template #other_content>NO</ng-template>
<td>
<MyBtn
[ID]="'btnaddchars_' + i"
[BackColor]= "globals.sysButtonBackColor"
[Color]= "globals.sysButtonForeColor"
[HoverBackColor] = "globals.sysHoverButtonBackColor"
[HoverColor] = "globals.sysHoverButtonForeColor"
[Text] ="'Delete'"
[SecondText]="'Close'"
[Width] ="'70px'"
[Height]="'17px'"
(buttonWasClicked) ="onSymbolsFormButtonClick($event)"
>
</MyBtn>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Image:
Since the tag <ng-template> is converted into bindings when DOM is rendered something like this
<!--bindings={
"ng-reflect-ng-if": "false",
"ng-reflect-ng-if-else": "[object Object]"
}-->
Try to give a class(CSS class) to your text example:
<ng-template #other_content>
<label class='_YOUR CSS CLASS_'>No</label>
</ng-template>
This has been bugging me a lot and when I try to google anything related to the subject, all I get is Stack Overflow questions about vertical-align not working on divs or similar elements.
I have this HTML table where as you can see, I set the style of each td to vertical-align:middle through an HTML inline style attribute:
<div ng-hide="getShoppingCart().length===0" class="col-md-10 col-md-offset-1">
<table class="table table-striped">
<tr>
<th class="col-md-2"></th>
<th class="col-md-3">Name</th>
<th class="col-md-2">Size</th>
<th class="col-md-2">Price</th>
<th class="col-md-2">Quantity</th>
<th class="col-md-1"></th>
</tr>
<tr ng-repeat="article in getShoppingCart()" style="height:120px;">
<!-- Image -->
<td class="col-md-2" align="center" style="vertical-align:middle;">
<img ng-src="{{article.media.images[0].smallHdUrl}}" class="img-responsive" style="height:120px;" >
</td>
<!-- Name -->
<td class="col-md-3" style="vertical-align:middle;">
<p>{{ article.name }}</p>
</td>
<!-- Size -->
<td class="col-md-2" style="vertical-align:middle;">
<p>{{ article.unit.size }}</p>
</td>
<!-- Price -->
<td class="col-md-2" style="vertical-align:middle;">
<p>£ {{ getTotalPriceForArticle($index) | number : 2 }}</p>
</td>
<!-- Quantity -->
<td class="col-md-2" style="vertical-align:middle;">
<button class="btn minusButtons" ng-click="decrementQuantity(article, $index)">–</button>
<input type="number" class="form-control" style="position:relative;top:2px;width:4vw;display:inline-block;" ng-model="getQuantities()[$index]"/>
<button class="btn plusButtons" ng-click="incrementQuantity(article, $index)">+</button>
</td>
<td class="col-md-1" align="left" style="vertical-align:middle;">
<button ng-click="removeArticleAtIndex($index)" class="btn redButtons" style="margin-left:0;">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
<div class="col-md-12" style="font-size:2vw; text-align:right;">
Total Price: £ {{ getTotalPrice() | number : 2 }}
</div>
So naturally I thought I could remove all of these inline styles and add this global rule in my external CSS file:
td {
vertical-align: middle;
}
But when I do that, the contents of the table's cells stop being aligned to the middle. I'm sure that the CSS file is properly linked as other elements are clearly affected by it. Also I checked the rest of the CSS and there are no other rules with higher priority overriding this property for this table. Any ideas?
Note: As you can probably figure out from the code, I'm using AngularJS and the table rows are being generated using ng-repeat, in case it could have something to do with the problem.
It's due to bootstrap overriding this with a higher specificity. This is what I see in the chrome developer console for td's:
.table>tbody>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
I would recommend doing something like the following:
.table.td-vertical-center>tbody>tr>td {
vertical-align: middle;
}
Then in your table element you can do this:
<table class="table table-striped td-vertical-center">
This will allow you to wrap this style in a custom class that will not override bootstrap by default, as well as give it enough specificity to update the table cells.
You can see a working example of a bootply here
Try this
td, th {
vertical-align: middle !important;
}
I have a list of items I want to display in a table (because I want to leverage the styling from bootstrap). But because I am having issues making the table sortable I want each row to essentially contain two rows, one information row and one detail row.
The information row will have some status icons and the item name. The detail row will have any quantity of text.
I'm using this answer to create two div/span rows within each table row:
<style>
.table-row {
display: table-row;
}
.data_column {
display: table-cell;
}
.icon_column {
width: 20px;
display: table-cell;
}
</style>
<table class="table table-condensed>
<thead>
<tr class="table_header">
<th>
<div class='table-row'>
<span class="icon_column"><i class="icon-ok"></i></span>
<span class="icon_column"><i class="icon-star icon-large"></i></span>
<span class="icon_column"></span>
<span class="data_column">Name</span>
<span class="data_column">Date</span>
</div>
</th>
</tr>
</thead>
<tbody>
{% for action in actions %}
<tr class="item_row">
<td>
<div class='table-row'>
<span class="icon_column"><input type="checkbox"></span>
<span class="icon_column"><i class="icon-star-empty icon-large"></i></span>
<span class="icon_column"><i class="icon-exclamation-sign icon-green"></i></span>
<span class="data_column">{{ action }}</span>
<span class="data_column">{{ action.previous_reset_date|date:"M d" }}</span>
</div>
<div class='table-row'>
<span>{{ action.notes|apply_markup:"creole" }}</span>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
My issue is that the second "table-row" is displaying like an individual column. It doesn't span the width of the entire table. If this were a strict table, I would need to do something like colspan="5". How do I change the css so that this portion:
<div class='table-row'>
<span>{{ action.notes|apply_markup:"creole" }}</span>
</div>
is the width of the entire table row?
If I remove the class from the second div row, it works fine.
<div>
<span>{{ action.notes|apply_markup:"creole" }}</span>
</div>
I have a table of records which is displayed nicely in a HTML Table.
The last column of this table displays a icon when hovering the row. When the user hovers the icon a drop down menu appears for all actions related to that row.
Currently I have the td that Icon is in set to Position:absolute and the div of the drop down menu is also set to Position Absolute.
This means I can align the Dropdown Menu Div to align nicely against the row it relates.
Firstly im not totally sure why this is the case. I would have thought I would need the TD as Absolute and the Menu Div as Relative but this just isnt the case.
The actual issue I am currently having (as the way I have it works across all browser) is that when the row is expanded to be double the height from text in other columns. The TD with absolute positioning applied does not expand to be 100% height of the TR. Which causes issues when trying to hover the tr and you move over where the last TD which should have expanded to the row height and it registers it as a hover out on the TR.
Any ideas to get around this?
The problem with putting the icon in a div which is relative is that I need the div to be 100% height/width of the td to be able to align the menu correct to the row!
EDIT:
As requested Some Html... This is a mustache template. Shouldn't be to hard to follow even if you have never used it
<table>
<thead>
<tr>
<th style="width:15px"><input type="checkbox" class="GridSelectAll" onclick="GridSelectAll(this);" /></th>
<th class="tar" style="width:30px">
<a href="javascript:SortGrid('EmployeeId')" id="headerEmployeeId">
<%= GetTranslation("EmployeeId") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('FirstName')" id="headerFirstName">
<%= GetTranslation("FirstName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('LastName')" id="headerLastName">
<%= GetTranslation("LastName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th>
<a href="javascript:SortGrid('CompanyName')" id="headerCompanyName">
<%= GetTranslation("PrimayCompanyName") %><span class="sortArrow ui-icon" ></span>
</a>
</th>
<th style="width:55px">
<a href="javascript:SortGrid('EmployeeRowStatus')" id="headerEmployeeRowStatus">
<%= GetTranslation("EmployeeRowStatus") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:60px">
<a href="javascript:SortGrid('IsLocked')" id="headerIsLocked">
<%= GetTranslation("IsLocked") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:15px"></th>
</tr>
</thead>
<tbody>
{{#EmployeeSummaries}}
<tr>
<td><input type="checkbox" class="chkRowId" value="{{EmployeeId}}" /></td>
<td class="tar">{{EmployeeId}}</td>
<td>{{FirstName}}</td>
<td>{{LastName}}</td>
<td>{{PrimaryCompanyName}}</td>
<td>{{EmployeeRowStatus}}</td>
<td>{{IsLocked}}</td>
<td style="position:absolute;">
<a class="optlink"><span class="ui-icon ui-icon-triangle-1-s"></span></a>
<div class="optmenu">
<ul>
<li><a onclick="UpdateEmployee_LoadDialog({{EmployeeId}});"><%= GetTranslation("ManageEmployee")%></a></li>
<li><a onclick="showLoading();" href="../Core/AuditItem.aspx?{{ItemTypeItemIdQuerystring}}"><%= GetTranslation("ViewHistory")%></a></li>
<li><a onclick="showLoading();" href="UserGroupsEvo.aspx#/?PageIndex=0&Filter=EmployeeId~EqualTo~{{EmployeeId}}"><%= GetTranslation("ViewUserGroups")%></a></li>
<li><a onclick="showLoading();" href="UserGroup_Employees.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManageUserGroups")%></a></li>
<li><a onclick="showLoading();" href="../Employee/EmployeePreferences.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManagePreferences")%></a></li>
<li><a onclick="ResetPasswords_LoadDialog({{EmployeeId}});"><%= GetTranslation("ResetPassword")%></a></li>
<li><a onclick="SendWelcomeEmails_LoadDialog({{EmployeeId}});"><%= GetTranslation("SendWelcomeEmail")%></a></li>
<li><a onclick="AddEmployee_Company_LoadDialog({{EmployeeId}}, {{PrimaryCompanyId}});"><%= GetTranslation("AddToCompany")%></a></li>
<li><a onclick="LoginAsUser({{EmployeeId}});"><%= GetTranslation("LoginAsUser") %></a></li>
{{#HasOtherCompanies}}
<li class="subheader"><%= GetTranslation("ManageOtherCompanies") %></li>
{{/HasOtherCompanies}}
{{#Companies}}
<li>
<span style="vertical-align:top;" class="hh ui-icon ui-icon-circle-close" onclick='RemoveEmployeeFromCompany_LoadDialog(this, {{EmployeeId}}, {{CompanyId}}, "{{CompanyName}}");return false;' title="<%= GetTranslation("Remove") %>"></span>
<a onclick="ManageEmployee_Company_LoadDialog({{EmployeeId}}, {{CompanyId}});">
{{CompanyName}}
</a>
</li>
{{/Companies}}
</ul>
</div>
</td>
</tr>
{{/EmployeeSummaries}}
</tbody>
</table>
I would get rid of the table all together. I would then use divs with table behavior. This will give you much more control over how each element works, each row, and each column.
This link explains the concept quite well: http://snook.ca/archives/html_and_css/getting_your_di
You might try this::
<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
Tutorials<br>
<table class="menu" id="tutorials" width="120">
<tr><td class="menu">HTML</td></tr>
<tr><td class="menu">CSS</td></tr>
<tr><td class="menu">XML</td></tr>
<tr><td class="menu">XSL</td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
Scripting<br>
<table class="menu" id="scripting" width="120">
<tr><td class="menu">JavaScript</td></tr>
<tr><td class="menu">VBScript</td></tr>
<tr><td class="menu">DHTML</td></tr>
<tr><td class="menu">ASP</td></tr>
<tr><td class="menu">ADO</td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
Validation<br>
<table class="menu" id="validation" width="120">
<tr><td class="menu">Validate HTML</td></tr>
<tr><td class="menu">Validate XHTML</td></tr>
<tr><td class="menu">Validate CSS</td></tr>
<tr><td class="menu">Validate XML</td></tr>
<tr><td class="menu">Validate WML</td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>
</html>