I am using ngx bootstrap popver: http://valor-software.com/ngx-bootstrap/#/popover#popover-directive. I am able to render popover body as HTML. However, that does not work for PopoverTitle. The documentation says that popover type is string | TemplateRef and PopoverTitle is a string, so probably I cannot render title as html for popovertitle as I did for popover body. In the code below: I get popover body contents as HTML as expected. But, not for popoverTitle.
< span *ngFor="let item of items;">
< template #popTemplate>
<div [innerHtml]="getPopoverDetails(item)"></div>
< /template>
< template #popTemplate1><div [innerHtml]="getPopoverTitle(item)"></div>
< /template>
< img class="" [src]="item.image" [popover]="popTemplate" [popoverTitle]="popTemplate1" triggers="mouseenter:mouseleave"
placement="right"/>
< /span>
I think that is because popoverTitle does not support TemplateRef. In that case, is there anyway to render popoverTitle string as HTML (reason being my title contents are not plain text, I need to put images and other html content as well)
< span *ngFor="let item of items;">
< template #popTemplate>
<div class="popover-title popover-header" [innerHtml]="getPopoverTitle(item)" style="margin:-10px -10px -0px -10px;">
<div [innerHtml]="getPopoverDetails(item)"></div>
< /template>
< img class="" [src]="item.image" [popover]="popTemplate" triggers="mouseenter:mouseleave"
placement="right"/>
< /span>
I have modified your code to include your title html content and included popover-title popover-header class as default popover header class and included style to remove the effect of default padding for popover and make it look like popover header
Related
is there a way to print the contents of a screen, that contain images rendered, to a printer in React Native? I looked into react-native-print but it only accepts HTML text whilst react-native-xprinter only supports Android. Thanks.
Managed to make it work. See codes below.
import RNPrint from 'react-native-print';
var htmlString = `<div style="(your CSS style here)"> (HTML contents here) </div>`;
RNPrint.print({html: htmlString});
If you want to embed an image in the HTML, see below:
var htmlString = `<div style="(your CSS style here)">
<img src="data:image/png;base64, ${imgData}" style="width: $imgWidth; height: $imgHeight"/>
</div>`;
You can replace "image/png" with other image type. Hope this helps.
I tried to click the "No" button using the below xpath.
.//*[#id='btnID']
HTML code :
<div class = "ui-dialog-buttonpane" type = "button" id ="btnID">
<span class = "ui-button-text"></span>
<span class = "ui-button-text">No</span>
</div>
It didn't work.
But I tried with
.//*[#id='btnID']/span/span[1].
It worked fine. But my problem is div tag represents the button element. Therefore ,
.//*[#id='btnID']
should be also worked.
Please anyone can explain ?.
Here is the xpath which can Identify the object
//div[#id='btnID']/span[.='No']
I'm trying to configure a nice footer on a pdf document I'm generating using Flying Saucer.
But I'm having problems getting the page number and page count in a nice position.
Consider this bit of css:
div#page-footer {
position : running(footer);
// .. more styling .. //
}
div.page-number:before {
content: counter(page);
}
Using this bit of html will not give me a page number:
<div id="page-footer">
<div class="page-number"></div>
</div>
The only way I manage to get a page number if I move the class a level up.
<div id="page-footer" class="page-number">
</div>
But this does not allow me to add additional content in the footer or makes it really difficult to apply styling. I could add a separate footer just for the page number, but it would be quite hard to get the position just right.
Is there a way to get page number + page count in a footer that also contains other elements and styling?
Extra notes:
I simplified the footer a bit, in the original there is more in there, but even this simple example it is giving problems.
using span or div for the element does not make a difference.
You should use the id instead of the class to identify the div containing the page number.
This will work:
div#page-number:before {
content: counter(page);
}
<div id="page-footer">
<div id="page-number"></div>
</div>
I have an editable div-tag where i dynamically create paragraphs. I want to save that div-tags content on button click. Is that possible?
<div id="RiskScoreTextArea" class="RiskScoreTextArea" contenteditable="true">
<p id="textAreaP"></p>
</div>
I would use jquery for that
$('.btnClick').on('click', function(){
var content = $('#RiskScoreTextArea').html();
});
If you wanted the text of the div you can use .text() but html will return the full contents of the div. Hopefully this will work for you.
I am trying to extend dijit.form.Button with an extra attribute but this is not working.Code is given below
In file1.js
dojo.require('dijit.form.Button');
dojo.extend(dijit.form.Button,{xyz: ''});
In file2.jsp
<script type="text/javascript" src="file1.js"></script>
<div dojoType="dijit.form.Button" xyz="abc"></div>
However when I look at the HTML of the created button (In chrome seen by right click and then selecting 'inspect element' option), it doesn't show xyz attribute.
You need to keep in mind that there's a distinction between the widget object and its HTML representation. When you extend dijit.form.Button, the xyz attribute is added to the widget class, but not automatically to the HTML that the widget will render. So in your case, if you do
console.debug(dijit.byId("yourWidgetId").get("xyz"));
.. you'll see that the button object does have the xyz member, but the HTML (like you point out) does not.
If you also want it do be visible in the HTML, you have to manually add it to the HTML rendering of the button. One way to do that is to subclass dijit.form.Button and override the buildRendering method.
dojo.declare("my.Button", dijit.form.Button, {
xyz: '',
buildRendering: function() {
this.inherited(arguments);
this.domNode.setAttribute("xyz", this.xyz);
}
});
If you add an instance of your new Button class in the HTML, like so:
<div dojoType="my.Button" xyz="foobar" id="mybtn"></div>
.. then the HTML representation (after Dojo has parsed it and made it into a nice looking widget) will contain the xyz attribute. Probably something like this:
<span class="..." xyz="foobar" dir="ltr" widgetid="mybtn">
<span class="..." dojoattachevent="ondijitclick:_onButtonClick">
<input class="dijitOffScreen" type="button" dojoattachpoint="valueNode" ...>
</span>