I want use below code to enable line break for the cell.
Grid6Obj.getRowTemplate().setClass("text", "wrap");
But when I opened the page in chrome and it didn't work.
I debug the page and the html is like below.
<span id="aw36-row-0" class="aw-templates-list aw-text-wrap aw-grid-row aw-row-0 aw-rows-normal aw-alternate-even "><span id="aw36-row-0-start" class="aw-row-start " style="width:0px;"></span><span id="aw36-cell-0-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-0 aw-cells-normal " style="border-right:1px solid #ccc;border-bottom:1px solid #ccc;" title="">123 456 678</span><span id="aw36-cell-1-0" class="aw-item-template aw-templates-cell aw-grid-cell aw-column-1 aw-cells-normal " style="border-right:1px solid #ccc;border-bottom:1px solid #ccc;" title="">12</span><span id="aw36-row-0-end" class="aw-item-template aw-grid-cell aw-column-space "><span id="aw36-row-0-end-box" class="aw-item-box "></span></span></span>
It set the class but the value "123 456 678" is still in one line. Is this because Chrome didn't suppose this class?Then what's the correct way to archieve it? Thx.
I did some research for you, there are 3 easy options. wrap your data in PRE tags
<PRE>
123
456
678
</PRE>
or in your aw.css file you could change the css on line 17
.aw-text-normal .aw-templates-cell, .aw-text-normal .aw-templates-text, .aw-text-normal .aw-templates-link, .aw-text-normal .aw-item-box {
white-space:nowrap;
}
Which is set to nowrap, changing this to pre will allow you to hard break your lines. Though this solution will change all cells to type PRE
.aw-item-box {
white-space:pre
}
Alternatively you could mutate your data to this:
"Line1 \r\n Line 2"
Related
I am trying to add text after each numerical weight value.
Here's what the html looks like:
<table class="shop_attributes">
<div class="field" data-field-id="product_size">
<strong class="field__label field__label--above">product_size</strong>
<div class="field__content">
<p>66 x 81 x 61</p>
</div>
</div>
<div class="field" data-field-id="product_weight">
<strong class="field__label field__label--above">product_weight</strong>
<div class="field__content">
<p>128</p>
</div>
</div>
</table>
The results I want to display is:
product_size
66 x 81 x 61 in
product_weight
128 lbs
From what I know, we can select the data field using
div[data-field-id=product_size]
div[data-field-id=product_weight]
And we can use > p to select just the p elements under the data fields.
This is what I've done
div[data-field-id="product_weight"] > p{
white-space: nowrap;
content: " lbs";
}
However this does not work. What am I doing wrong?
Hello dear I have read your problem carefully, after that I have solved your problem which I have attached as below code.
div[data-field-id="product_size"] > div > p::after {
content: " in";
}
div[data-field-id="product_weight"] > div > p::after {
content: " lbs";
}
I hope my solution will solve your problem.
Note:- If you want to add content after and before any element then you need to use CSS Pseudo-elements (like ::after and ::before)
I am using VBA to generate an Outlook email. I want to put the email address with a gray background color and I want it to be in front of "Resource (s):".
This is my VBA code:
bodyHTML = bodyHTML + "<p style=""display: inline"">Resource(s): #" & "<p style=""display: inline; background-color: #EDEDE7; font-size: 15px; font-weight: normal"">" & aloc.resourceEmail & "</p></p>"
This is the result. Over the dotted line: the way it is. Below the dotted: The way it should be
<p> is a paragraph, it adds a newline.
Replace <p> with <span> which does not add a newline (and consequently replace </p> with </span>
I have this snippet of html:
<li class="result-row" data="2">
<p class="result-info">
<span class="icon icon-star" role="button">
<span class="screen-reader-text">favorite this post</span>
</span>
<time class="result-date" datetime="2018-12-04 09:21" title="Tue 04 Dec 09:21:50 AM">Dec 4</time>
Link Text
and this perl code (not production, so no quality comments are necessary)
my $root = $tree->elementify();
my #rows = $root->look_down('class', 'result-row');
my $item = $rows[0];
say $item->dump;
my $date = $item->look_down('class', 'result-date');
say $date;
my $title = $item->look_down('class', 'result-title hdrlnk');
All outputs are as I expected except $date isn't defined.
When I look at the $item->dump, it looks like the time element doesn't show up in the output. Here's a snippet of the output from $item->dump where I would expect to see a <time...> element. All it shows is the text from the time element.
<li class="result-row" data="2"> #0.1.9.3.2.0
<a class="result-image gallery empty" href="https://localhost/1.html"> #0.1.9.3.2.0.0
<p class="result-info"> #0.1.9.3.2.0.1
<span class="icon icon-star" role="button"> #0.1.9.3.2.0.1.0
" "
<span class="screen-reader-text"> #0.1.9.3.2.0.1.0.1
"favorite this post"
" "
" Dec 4 "
<a class="result-title hdrlnk" data="2" href="https://localhost/1.html"> #0.1.9.3.2.0.1
.2
"Link Text..."
" "
...
I've not used HTML::Element before. I rtfmed and didn't see any tag exclusions and I did a search of the package code for tags white/black lists (which wouldn't make sense, but neither does leaving out the time tag).
Does anyone know why the time element is not showing up in the dump and any search for it turns up nothing?
As an fyi, the rest of the code searches and finds elements without issue, it just appears to be the time tag that's missing.
HTML::TreeBuilder does not support HTML5 tags. Consider Mojo::DOM as an alternative that keeps up with the living HTML standard. I can't show how your whole code would look with Mojo::DOM since you've only shown a piece, but the Mojo::DOM equivalent of look_down is find (returns a Mojo::Collection arrayref) or at (returns the first element found or undef), both taking a CSS selector.
I'm a newbie in html and css. I'm trying to make text go next line even if the text is not overflowed in css.
Now it gives from the page like,
However, I want to be like such as
Temperature : 13 Celsius
CO2: 345 ppm
Humidity: 13%
How can I do such a thing? I tried to find in google but couldn't find any solutions that I want.
Thanks in advance.
EDIT
I actually used tooltip function like below
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
and then the text that I showed above is in div title
<div id="my id" class="draggable js-drag" data-toggle="tooltip" data-placement="top"
style="display: block; position: absolute; left: 894px; top: 413px;"
data-x="894" data-y="413"
data-original-title="Temperature : 13.0 °C CO2 : 345 ppm Humidity : 13.0 %"></div>
Use multiple div.
The div is a display: block by default and would occupy the entire space in the line, forcing the other div onto the next line.
Refer code:
<div>
<div>Temperature : 13 Celsius</div>
<div>CO2: 345 ppm</div>
<div>Humidity: 13%</div>
</div>
EDIT
To apply a line break in data-original-title you need to add data-html="true" in your markup. Either you can manually add it in your markup or using jquery. And then you can add <br/> in your code.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip().attr("data-html", "true");
});
<div id="my id" class="draggable js-drag" data-toggle="tooltip" data-placement="top" data-html="true"
style="display: block; position: absolute; left: 894px; top: 413px;"
data-x="894" data-y="413"
data-original-title="Temperature : 13.0 °C <br/> CO2 : 345 ppm <br/> Humidity : 13.0 %"></div>
Simply add <br/> to your text to indicate line break
Temperature : 13 Celsius<br/>
CO2: 345 ppm<br/>
Humidity: 13%<br/>
Would this do?
<p>Temperature : 13 Celsius</p>
<p>CO2: 345 ppm</p>
<p>Humidity: 13%</p>
I would go with the DIV solution, P tag would give a default margin value which is not required for a simple line break.
<div>Temperature : 13 Celsius</div>
<div>CO2: 345 ppm</div>
<div>Humidity: 13%</div>
You could then set the line-height using
CSS:
div{
line-height:14px; /* for example */
}
I'm looking for a command line tool (or Perl module or VIM script or whatever) that will take some input files (such as XML or JavaScript files) and format them in HTML. I specifically want my output not to contain stuff like <span style="color: red"> or <font color=red> according to a particular colour scheme, rather it should use CSS class names to mark up the different syntactic parts of the file.
For example, if I had this file as input:
function f(x) {
return x + 1;
}
the kind of output I would like is:
<pre><span class=keyword>function</span> <span class=ident>f</span><span class=punc>{</span>
<span class=keyword>return</span> <span class=ident>x</span> <span class=op>+</span> <span class=numliteral>1</span><span class=punc>;</span>
<span class=punc>}</span></pre>
Does anyone know of such a tool?
Something like VIM's 2html.vim script, but outputting class="" attributes with the syntax highlight group names (like "Constant", "Identifier", "Statement", etc.) would be ideal.
Thanks,
Cameron
You can feed a file into GeSHi using PHP on the command line (or cURL your own local server or some other hack)
http://qbnz.com/highlighter/geshi-doc.html#basic-usage
There is buf2html.vim. Unfortunately, it uses non-semantic class names: See http://intrepid.perlmonk.org/apropos.vim/buf2html/current/myself.html
I think this is exacly what Vim's :TOhtml does if you
:let html_use_css = 1
Original:
function f(x) {
return x + 1;
}
output:
<pre>
<span class="Identifier">function</span> f(<span class="">x</span><span class="javaScriptParens">)</span><span class=""> </span><span class="Identifier">{</span>
<span class="Statement">return</span><span class=""> x + </span>1<span class="">;</span>
<span class="Identifier">}</span>
</pre>