I'm trying to render a tooltip for a table cell in Vue, for when the table cell's content exceeds 22 characters.
I need to use the v-tooltip library (https://www.npmjs.com/package/v-tooltip)
I can set the content of the tooltip to a simple string correctly using the 'content' attribute, however, when I try to set the html content, the tooltip is blank, and the html content which was supposed to appear inside the tooltip, appears constantly in the td.
<td v-if="cellContent !== null && cellContent.length>22">
<div>
<!-- <span v-tooltip.right="{content: 'This works, but is just a simple string', class:'mytooltip'}">{{cellContent.substring(0, 19)}}...</span> -->
<span class="icon-info-outline" v-tooltip.right="{ html: 'wildcardContent', class:'mytooltip' }"></span>
<div id="wildcardContent">
<p>This Fails and is displayed in the td</p>
</div>
</div>
</td>
<td v-else >{{cellContent }}</td>
v-tooltip="{ content: `<h1>Hellow World</h1>` }"
Related
I have a set of buttons that are created with the ngFor functionality.
Separate to these buttons there is a set of that are toggled to visible and invisible when you press these buttons.
What I am trying to achieve is that the content loaded in that second set of divs matches the content of the ngFor-created buttons.
All documentation I find online treates these problems with a table and table rows but that's always within the same Element.
the buttons
and the content
enter image description here
<div id="map" class="blue">
<!-- set of buttons filled with data from arrData:-->
<div *ngFor="let Lore of arrData" id="Content-knop" class="black knop" (click)="LoreToggle()">
{{Lore.Name}}
So what I am trying to do is load the rest of the data associated with Lore.Name on the component beneath, that is toggled to visible and invisible by the LoreToggle function in the element above.
<table>
<tr>Name <!--Load content from Content-Knop here--></tr>
<tr>Tribe <!--Load content from Content-Knop here--></tr>
<tr>Region <!--Load content from Content-Knop here--></tr>
</table>
<div class="green">
<p>Description <!--load content from Content-Knop here--></p>
</div>
I hope this makes sense. I know my code is missing some ng selected functionality somewhere but I can't find a clean, simple solution that matches my criteria,
I am still not quite certain that I fully understand your issue, but to me it sounds as simple as this:
example.component.ts:
const arrData = [
{ name: 'name1', tribe: 'tribe1', region: 'region1' },
{ name: 'name2', tribe: 'tribe2', region: 'region2' },
...
];
let visibleData;
public toggleVisibleData(data) {
this.visibleData = data;
}
example.component.html
<!-- set of buttons filled with data from arrData:-->
<div *ngFor="let lore of arrData" (click)="toggleVisibleData(lore)">
{{lore.name}}
</div>
...
<ng-container*ngIf="visibleData">
<table>
<tr>{{ visibleData.name }}</tr>
<tr>{{ visibleData.tribe }}</tr>
<tr>{{ visibleData.region }}</tr>
</table>
<div class="green">
<p>{{ visibleData.description }}</p>
</div>
</ng-container>
Please also notice that I corrected the code to stick to the Angular coding style guidelines.
I am working on a web scraping problem in Ruby. I have seen multiple questions and answers related to this but in none I have seen HTML that include some JavaScript framework in it and I cannot figure out how to do it. I just want to select the HTML and return an array of objects. The following is my script and the HTML code. The HTML classes of the values like name, currency, balance are similar and the question of how can it be done?
content = document.css("div.acc-list").map do |parameters|
name = parameters.at_css("p.s3.bold.row.acDesc").text.strip, # argument?
currency = parameters.at_css(".row.ccy").text.strip, # argument?
balance = parameters.at_css(".row.acyOpeningBal").text.strip # argument?
Account.new name, currency, balance
end
pp content
These HTML paragraphs are inside multiple other classes which I think is due to the framework. However, they are inside a <div class = acc-list div>...</div> and I think I did correctly when I assigned "div.acc-list" to "content" variable.
<!-- HTML for name -->
<td bindonce="" ng-repeat="col in gridOptions.columns" sg-bind-html-compile="col.cellTemplate" bo-class="col.className" bo-style="{width: col.remWidth }"
class="ng-scope icon-two-line-col" style="width: 17.3333rem;">
<div style="width: 17.333333333333332rem" class="first-cell cellText ng-scope">
<i bo-class="{'active':row.selected }" class="i-32 active icon i-circle-account"></i>
<div class="info-wrapper" style="">
<p class="s3 bold" bo-bind="row.acDesc">Name_value</p> # value
<a ui-sref="app.layout.ACCOUNTS.DETAILS.{ID}({id:'091601003439274'})" href="/Bank/accounts/details/BG37FINV91503006938102">
<span bo-bind="row.iban">BG37FINV91503006938102</span>
<i class="i-arrow-right-5x8"></i>
</a>
</div>
</div>
</td>
<!-- HTML for currency -->
<td bindonce="" ng-repeat="col in gridOptions.columns" sg-bind-html-compile="col.cellTemplate" bo-class="col.className" bo-style="{width: col.remWidth }"
class="ng-scope" style="width: 4.4rem;">
<div style="width: 4.4rem" class="text-center cellText ng-scope">
<span bo-bind="row.ccy">EUR</span> # value
</div>
</td>
<!-- HTML for balance -->
<td bindonce="" ng-repeat="col in gridOptions.columns" sg-bind-html-compile="col.cellTemplate" bo-class="col.className" bo-style="{width: col.remWidth }"
class="ng-scope" style="width: 8.73333rem;">
<div style="width: 8.733333333333333rem" class="text-right cellText ng-scope">
<span bo-bind="row.acyAvlBal | sgCurrency">1 523.08</span> # value
</div>
</td>
Using CSS:
require 'nokogiri'
document = Nokogiri::HTML(<<EOT)
<div class="acc-list">
<!-- HTML for name -->
<td>
<div class="first-cell cellText ng-scope">
<div class="info-wrapper">
<!-- # value -->
<p class="s3 bold">Name_value</p>
</div>
</div>
</td>
<!-- HTML for currency -->
<td>
<div class="text-center cellText ng-scope">
<!-- # value -->
<span>EUR</span>
</div>
</td>
<!-- HTML for balance -->
<td>
<div class="text-right cellText ng-scope">
<!-- # value -->
<span>1 523.08</span>
</div>
</td>
</div>
EOT
Now that the DOM is loaded:
content = document.css('div.acc-list').map do |div|
name = div.at("p.s3.bold").text.strip # => "Name_value"
currency = div.at("div.text-center > span").text.strip # => "EUR"
balance = div.at("div.text-right > span").text.strip # => "1 523.08"
[ name, currency, balance ]
end
# => [["Name_value", "EUR", "1 523.08"]]
Your HTML sample has a lot of extraneous information that obscures the trees in this particular forest. I stripped it out because it wasn't useful. (And, when submitting a question you should automatically do that as part of simplifying the non-essential information so we can all focus on the actual problem.)
CSS doesn't care about parameters other than the node name, class and id. The class can chain the parameters in the definition of the class if you need that granular access, but often you can get away with a more general class selector; It just depends on the HTML.
Most XML and HTML parsing is basically the same tactic: Find an outer placeholder, look inside it and iterate grabbing the information needed. I can't demonstrate that completely because your example only has the outer div, but you can probably imagineer the necessary code to handle an inner loop.
at_css is almost equivalent to at, and Nokogiri is smart enough 99.9% of the time to determine whether a selector is CSS or XPath, so I tend toward using at because my fingers are lazy.
I have a component that show/hide element by clicking a button.
This is my html
<div *ngFor="let history of histories | sortdate: '-dateModified'">
<p><b>{{ history.remarks }}</b> - <i>{{history.dateModified | date:'short'}}</i></p>
<a href="google.com"
[class.datatable-icon-right]="history.$$expanded"
[class.datatable-icon-down]="!history.$$expanded"
title="Expand/Collapse Row"
(click)="toggleExpandRow(history)"></a>
<!-- hide/show this by clicking the button above.-->
<div *ngFor="let step of history.steps; let i = index">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
<hr />
</div>
and my .ts
toggleExpandRow(row) {
console.log('Toggled Expand Row!', row);
//row
return false;
}
trying to search but, can't find any same sample.
On jquery, I can do this, but on Angular2, I am having hard time to figure this.
There are two options:
1- You can use the hidden directive to show or hide any element
<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
2- You can use the ngIf control directive to add or remove the element. This is different of the hidden directive because it does not show / hide the element, but it add / remove from the DOM. You can loose unsaved data of the element. It can be the better choice for an edit component that is cancelled.
<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
Use the ngIf in your repeated rows. Create a boolean property called showStep to indicate whether the row should be expanded or not.
<div *ngFor="let step of history.steps; let i = index" ngIf="history.showStep">
<b>{{i+1}}.</b> {{step}}
<span class="clear"></span>
</div>
Then, in your .ts file:
toggleExpandRow(history) {
history.showStep = !history.showStep
//note the same porperty of showStep that is used in your html
}
Extra:
In fact, to save a few lines of codes, you don't even need the toggleExpandRow function at all. You can do it inline in your html:
//other attributes omitted for brevity
<a (click)="history.showStep = !history.showStep">
I've created a custom tag to hide zero values from HTML. I use this for hiding currency formatted numbers when its values are zero.
This is my custom tag:
def hideifz(value):
return '' if value == 0 else value
The problem is that this tag deletes some of my HTML.
This is the relevant part of my template:
<div class="price">
<span class="price-new">{{ publication.price_record.low_price|CLP }}</span>
<span class="price-old">{{ publication.price_record.high_price|hideifz|CLP }}</span>
</div>
This HTML is for showing product prices. publication.price_record.low_price and publication.price_record.high_priceare the prices of my product. If the product is in sale, it must have high_price != 0, and this value must be shown in the HTML.
CLP is just another tag for currency formatting:
def toCLP(value):
if not value:
return value
return '$'+intcomma(int(value)).replace(',', '.')
If high_price is not zero, the output HTML is okay. For example:
<div class="price">
<span class="price-new">$75.990</span>
<span class="price-old">$83.990</span>
</div>
In the other hand, if high_price is zero, some of my HTML is deleted:
<div class="price">$21.990</div>
Note that span.price-new and span.price-old were removed.
Now, if I remove the hideifz tag, the output of the previous example looks like this:
<div class="price">
<span class="price-new">$21.990</span>
<span class="price-old">0.0</span>
</div>
The spans are back when I remove the hideifz tag.
I just want to hide the python variable/value from the html, preserving the outer span for other uses.
I know I can solve this by simply using the {% if val %} tag, but I wanted to create my own tag for simplicty.
I'm working with django 1.10.
Thanks you.
Have search the net and can't find a solution.
If im make a page in TYPO3 and add some content, i end up with this.
<div id="clear"> </div>
<!-- CONTENT ELEMENT, uid:4/html [begin] -->
<div id="c4" class="csc-default">
<!-- Raw HTML content: [begin] -->
<div id="topbilled_om"></div>
<!-- Raw HTML content: [end] -->
</div>
<!-- CONTENT ELEMENT, uid:4/html [end] -->
<!-- CONTENT ELEMENT, uid:2/html [begin] -->
<div id="c2" class="csc-default">
<!-- Raw HTML content: [begin] -->
<div id="LeftColumn">
And what i want is this
<div id="clear"></div>
<div id="topbilled_om"></div>
<div id="LeftColumn"></div>
How do i skip the extra added div's, my problem is that its make an error in my design, bc of the extra added div's ?
With TYPO3 7.6 and an enabled fluid_styled_content extension, this comes from fluid_styled_content/Resources/Private/Layouts/ContentFooter.html.
You have to add your own layout path in typoscript:
lib.fluidContent.layoutRootPaths.100 = EXT:foo/Resources/Private/Layouts/
and then copy and adjust the ContentFooter.html file in your extension.
You can delete the innerWrap of a cObject:
tt_content.stdWrap.innerWrap >
Yet I do not recommend it. It looks like you're trying to use HTML element as some kind of placeholders. You could use a field like "layout" (in the page properties) to define custom wraps instead of csc-default, e.g.:
tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
key.field = layout
1 = TEXT
1.value = <div class="my-layout-1">|</div>
2 = TEXT
2.value = <div class="my-layout-2">|</div>
}
and rename the layout in the backend:
TCEFORM.tt_content {
layout.altLabels.1 = My Layout 1
layout.altLabels.2 = My Layout 2
}
To remove comments disable them in your TS template:
page.config.disablePrefixComment = 1
To disable csc-* frames you can set it manually to the No frame on Appearance tab of each tt_content or better just set it as default with PageTS of root page:
TCAdefaults.tt_content.section_frame=66
Finally you can just overwrite whole CSC (CSS Styled Content) in your own template to remove unwanted wraps.