<tr ng-repeat="rows in CalendarBean.weekList">
<td ng-repeat="cellList in rows">
<div id="{{cellList.fullDate}}" ng-click="onDateSelect(cellList.fullDate)"
class=" {{cellList.timeClass}} {{cellList.leaveFlag}}+{{cellList.holidayFlag}}"
style="border:{{cellList.borderColor}}; background-color: {{cellList.ColorCode}}"
align='center'>
<div class="row">
<span style="color: {{cellList.dateNumberColor}}" class="class1">
{{cellList.date}}
</span>
</div>
</div>
</td>
</tr>
I have this code.
background-color: {{cellList.ColorCode}}
this part and some closing second braces are getting removed while I am formatting my code in eclipse Luna. Any suggestion how to stop this?
Related
I'm trying to use jquery in order to replicate the styling from another description tab that uses a table.
This is the current code of what I want to apply the script on:
<table class="shop_attributes">
<div class="iconic-cffv-field" data-field-id="iconic_cffv_2599_product_size">
<strong class="iconic-cffv-field__label iconic-cffv-field__label--above">product_size</strong>
<div class="iconic-cffv-field__content"><p>66 x 81 x 77</p></div>
</div>
<div class="iconic-cffv-field" data-field-id="iconic_cffv_2599_product_weight">
<strong class="iconic-cffv-field__label iconic-cffv-field__label--above">product_weight</strong>
<div class="iconic-cffv-field__content"><p>146</p></div>
</div>
</table>
</div> </div>
This is what I'm trying to replicate:
<div class="cPanel cPanel--additional_information cPanel--ord-3">
<div class="cPanel-inner">
<h2>More Details</h2>
<table class="woocommerce-product-attributes shop_attributes">
<tbody><tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--weight">
<th class="woocommerce-product-attributes-item__label">Weight</th>
<td class="woocommerce-product-attributes-item__value" data-o_content="N/A">164 lbs</td>
</tr>
</tbody></table>
</div> </div>
I've tried the following to start off with but can't seem to have any of the tags apply at all
(function($) {
// Wrap attributes into table format
$(".iconic-cffv-field__label.iconic-cffv-field__label--above").wrapAll("<th></th>");
$(".iconic-cffv-field__content").wrapAll("<td></td>");
}
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've been recently introduced to bootstrap and I'm trying to make a table but for some reason, if I put my table inside a panel, the borders on the top,left,right,bottom suddenly disappears and I'm not sure what's causing this.
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<br>
<table class='table table-striped table-bordered'>
<tr>
<td width='12%'>
<b>Message Title:</b>
</td>
<td>
Title
</td>
</tr>
<tr>
<td>
<b>Message Body:</b>
</td>
<td>
Body
<br /><br />
<h6><b>Created By:</b> John | <b>Created On:</b> February 13, 2015 3:45pm </h6>
</td>
</tr>
</table>
<hr>
<table class='table table-striped table-bordered'>
<tr>
<td width='12%'>
<b>Message Title:</b>
</td>
<td>
Title
</td>
</tr>
<tr>
<td>
<b>Message Body:</b>
</td>
<td>
Body
<br /><br />
<h6><b>Created By:</b> John | <b>Created On:</b> February 15, 2015 1:23pm </h6>
</td>
</tr>
</table>
<hr>
</div>
</div>
</div>
</div>
I would put a picture but it says I need 10 reputation points but I do hope you get my problem. If I remove the panel, the tables' borders suddenly appear.
You can use that style.
<div class="panel panel-default">
<div class="panel-heading">
Panel heading without title
</div>
<div class="panel-body">
Table content
</div>
</div>
From the bootstrap docs regarding panels:
Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.
You can use tables within panels, but not within panel-body or panel-heading as they will be displayed with separated borders, what is mostly not intended.
I've provided some working bootply examples to show default usage.
EDIT:
Also, panels are not designed to hold multiple tables, but for your use case you may simply want to add additional table rows instead of additional tables.
See the results in the additional bootply sample.
I have an HTML file. Here is a sample
<div class="criteria" style="padding-left:0;font-style:italic"> You searched for:
<span title="A*" >Individual: <span><b>A*</b></span></span>
</div>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">
<tr class="ListItemColorNew">
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
</td>
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">FRANK WHITE A'SMALLS </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: JAMES SMALLS</i></div>
<div class="GrayTextShade">
WEST RIVER CORP LLC (LIC# 3333)
</div>
</div>
</td>
<td style="width: 25%; vertical-align: top">
<div class="gvListItemStyle">
<div><img alt="help" src=\'/Content/images/BrokerCheck/icon-blueCheck.png\' style=\'vertical-align:top;padding-right:5px\' />Broker</div>
</div>
</td>
<td style="width:25%;text-align:right;vertical-align:top">
<div class="gvListItemStyle">
<a class="btn btn-primary" href="/Individual/Summary/5820616">Details »</a> </div>
</td>
</tr>
I'm trying to extract everything between <td style="width:50%"> and </td>. The data is stored in a file testFile.txt.
This is the Perl code I used
system("perl -pi.bak -e '/^<td style=\"width:50%\">.+<\\/td>/mg' testFile.txt";
Your below code isn't actually doing anything:
system("perl -pi.bak -e '/^<td style=\"width:50%\">.+<\\/td>/mg' testFile.txt");
You're matching m// in a void context with no captures, so the executed statement is meaningless.
Your pattern will never match your content because:
a. You're using the any character ., but it won't match newlines unless you use the /s Modifier.
b. You're using -p for line by line processing of the file, but your pattern would need to span lines in order to match.
The following demonstrates both a regex solution (not recommended) and using an actual HTML Parser, in this case Mojo::DOM. For a helpful 8 minute introductory video, check out Mojocast Episode 5
use strict;
use warnings;
use Mojo::DOM;
my $data = do { local $/; <DATA> };
# Regex Solution:
if ( $data =~ m{<td style="width:50%">(.*?)</td>}s ) {
print "Regex Solution:\n$1";
} else {
warn "No pattern match found";
}
# Parser Solution:
my $dom = Mojo::DOM->new($data);
my $yourtd = $dom->at(q{td[style="width:50%"]})->content;
print "\nMojo::DOM:\n", $yourtd;
__DATA__
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table>
<tr>
</td>
<div class="criteria" style="padding-left:0;font-style:italic"> You searched for:
<span title="A*" >Individual: <span><b>A*</b></span></span>
</div>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">
<tr class="ListItemColorNew">
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
</td>
<td style="width: 25%; vertical-align: top">
<div class="gvListItemStyle">
<div><img alt="help" src=\'/Content/images/BrokerCheck/icon-blueCheck.png\' style=\'vertical-align:top;padding-right:5px\' />Broker</div>
</div>
</td>
<td style="width:25%;text-align:right;vertical-align:top">
<div class="gvListItemStyle">
<a class="btn btn-primary" href="/Individual/Summary/5820616">Details »</a> </div>
</td>
</tr>
<table>
</body>
</html>
Outputs:
Regex Solution:
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
Mojo::DOM:
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
.*?(<td style="width:50%">((?!<\/td>).)*?<\/td>)
See demo.Use gs flags.
See demo.
http://regex101.com/r/oC3nN4/15
As said in the comments, remove the ^ in your regexp.
Also, use /s instead of /mg if you want to treat the file content as a single line string which allows '.' pattern to allow match new line characters '\n'.
/<td style=\"width:50%\">.+?<\\/td>/s
.+? while stop the matching at the first occurrence of </td>, not the last
I hope you've seen previous advice to avoid regexes to process HTML? It's really true! The only excuse I can think of for avoiding one of the several excellent HTML modules is that your data is so malformed that nothing else will process it.
Your "sample" of your HTML file is particularly unhelpful. Before I fixed the indentation the lines were scattered all over the place. After I looked at it I saw that it was the end of one table element followed by the start of another, so it left several elements unbalanced and either closed but not opened or vice-versa. Please don't do that to us.
I built a well-formed HTML file that contains your extract, and this is a program that will process it that uses HTML::TreeBuilder
use strict;
use warnings;
use HTML::TreeBuilder;
my $tree = HTML::TreeBuilder->new_from_file('html.html');
my #td50 = $tree->look_down(_tag => 'td', style => 'width:50%');
print $_->as_HTML('<>&', ' '), "\n\n" for #td50;
output
<td style="width:50%">
<div class="gvListItemStyle"><span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111) <div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade"> GREY TIDE LLC (LIC# 2222) </div>
</div>
</td>
In case you or others need it, here's the HTML input document that I used
<html>
<body>
<table>
<tr>
<td>
<div class="criteria" style="padding-left:0;font-style:italic"> You searched for:
<span title="A*" >Individual: <span><b>A*</b></span></span>
</div>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">
<tr class="ListItemColorNew">
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
</td>
<td style="width: 25%; vertical-align: top">
<div class="gvListItemStyle">
<div><img alt="help" src=\'/Content/images/BrokerCheck/icon-blueCheck.png\' style=\'vertical-align:top;padding-right:5px\' />Broker</div>
</div>
</td>
<td style="width:25%;text-align:right;vertical-align:top">
<div class="gvListItemStyle">
<a class="btn btn-primary" href="/Individual/Summary/5820616">Details »</a> </div>
</td>
</tr>
</table>
</body>
</html>
We have a custom implementation of CellTable in which there is a custom column to render label and image. As part of hovering on a table row, we call table.redrawRow(rowNum) to render some context menu.
However, doing that, cause the text and image column to re-render the image (make a server call to fetch the image). This causes a flickering effect. This only happens in Chrome (version I am using - Chrome27)
The table row looks like this:
<tr __gwt_row="0" __gwt_subrow="0" class="GAH0TQLMKD">
<td class="GAH0TQLKKD GAH0TQLNKD GAH0TQLOKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-65" tabindex="0">
<div style="border-collapse: separate; border-spacing:0">
<div style="display:table-cell;vertical-align:middle">
<img src="icon.png" alt="" style="vertical-align:middle; border: 0;width:16px;height:16px; ">
</div>
<div class="GAH0TQLMJD" style="display:table-cell"><b>Contiki</b></div>
</div>
</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-66">Travels</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-67">Blah</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-68">Blah</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-69">2013-07-10</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-70">5</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-71">07/10/2013 01:53 AM</div>
</td>
<td class="GAH0TQLKKD GAH0TQLNKD GAH0TQLILD GAH0TQLDAD" align="right">
<div style="outline-style:none;" __gwt_cell="cell-gwt-uid-72">
<div class="GAH0TQLFAD">
<div style="width:64px; height:17px"></div>
</div>
</div>
</td>
</tr>
I don't see flickering on Firefox or IE9.
Note: My Cache-Control headers are set to no-cache.
Any thoughts? Ideas?
If you ask the browser not to cache the image, and you ask it to draw the image, it'll re-download it.
So either change your caching strategy for the image, and/or your strategy for updating the table (using a redrawRow during a hover to display something new seems suboptimal; the cells should rather listen to the mouse events and update their DOM dynamically)