Is it possible to insert html content to the title of a window component in CX instead of a string? I need to customise the contents of my window title.
It is. Here is an example on how to put additional buttons in the header:
import { Button, FlexRow, Heading, HtmlElement, Window } from "cx/widgets";
export const App = (
<cx>
<div>
<Window bodyStyle="padding: 1rem">
<FlexRow putInto="header" spacing align="center">
<Heading level={4}>My Title</Heading>
<div style="flex: 1" />
<Button mod="hollow" icon="search" />
</FlexRow>
Window Contents
</Window>
</div>
</cx>
);
https://fiddle.cxjs.io/?f=oydjHF84
Another option is to use the header property. This way you can also create custom content placeholders within the header:
<Window
header={(
<cx>
<FlexRow align="center" style="width: 100%;">
<span>Title</span>
<div style="flex: 1 1 0%" />
<ContentPlaceholder name="header-tools" />
</FlexRow>
</cx>
)}
>
<LookupField
putInto="header-tools"
style="width: 220px;"
mod="header-tool"
value-bind="classificationId"
options-bind="classifications"
/>
Window content
</Window>
Related
I have a kendo-popup in an angular component which I use within a kendo-dialog. The popup will be shown next to an icon when the user clicks on the icon. The positioning of the popup works fine when it is not inside a kendo-dialog. But the positioning is not correct when it is within a kendo-dialog. When the button is clicked within the kendo-dialog, the popup does not show up next to the icon. It shows up somewhere else.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
When I click the div to open the dialog, the kendo-popup does not show next to the input tag. It shows up somewhere to the lower right.
Edit 1:
Tried moving the popup to within the span. Still not working.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
Note: I have intentionally left out the styles. In the original source, I have all the styles setup properly.
You have to specify where the popup will display by using an id of anchor on the target element:
<div>
<target-tag #anchor></target-tag>
</div>
<div>
<kendo-popup [anchor]="anchor">
<Content to display>
</kendo-popup>
</div>
I have a Kendo Angular2 Slack: https://kendouiangular2.slack.com
I tried to replicate the issue in a standalone Plunker demo, but it seems that the popup positions just fine in Kendo Dialog component:
Tested in Chrome and Safari.
This is the dialog content:
<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</kendo-popup>
And this is the actual test Plunker demo:
http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview
Could you modify it in order to reproduce the issue? This will help to find the cause of the erroneous behavior faster.
please use div id which div you want to popup.
<div id="popupdiv"></div>
$("#popupdiv").kendoWindow({
title: "Inforamtion",
resizeable: true,
scrollable: false,
width: "50%",
actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
modal: true,
// pinned: true,
animation: {
close: {
effects: "fade:out"
},
}
});
Examine this
<a href="${mybean.href}" data-sly-test="${mybean.href}">
<img src="myimage.jpg" />
</a>
What we need
when data-sly-test="${mybean.href}" evaluates to false, only hide the anchor tag, and not its child elements. The default behavior is that the img tag will disappear also when the anchor tag disappears. We only want to hide the wrapper tag.
I expect some paramater like this
<a href="${mybean.href}" data-sly-test="${mybean.href # hideChildren=false}">
<img src="myimage.jpg" />
</a>
You can use the data-sly-unwrap in your anchor tag as shown below example where mybean.href true result removing of the anchor tag and producing only <img src="myimage.jpg" />
Example
<a href="http://www.google.com" data-sly-test="${mybean.href}" data-sly-unwrap>
<img src="myimage.jpg" />
</a>
For your case the following solution should work
<a href="${mybean.href}" data-sly-unwrap="${!mybean.href}">
<img src="myimage.jpg" />
</a>
I am creating a tabPanel in GWT Uibinder
<g:TabLayoutPanel ui:field="tabPanel" barUnit='PX'
barHeight='40' width="100%" height="100%">
<g:tab>
<g:header size='7' >
My tab Name
</g:header>
<g:HTMLPanel ui:field="tabConfiguration" >
<div>
</div>
</g:HTMLPanel>
</g:tab>
<g:tab>
Now when i try to put my internationalized text it doesnt work :
<g:TabLayoutPanel ui:field="tabPanel" barUnit='PX'
barHeight='40' width="100%" height="100%">
<g:tab text = "{i18n.CONFIGURATION}">
<g:header size='7' >
My tab Name
</g:header>
<g:HTMLPanel ui:field="tabConfiguration" >
<div>
</div>
</g:HTMLPanel>
</g:tab>
<g:tab>
It simply gives me an empty tab , with no name
any work around for this .
Please not : in this file if i apply this same I8n text to any other widget its works perfectly.
<g:tab is not a widget, but a uibinder child element of TabLayoutPanel. Therefor you can't use it as a widget. To make it work with plain text you need to set the text in the header element with <ui:text ..> on the same place as in your first example:
<g:header size='7' >
<ui:text from="{i18n.CONFIGURATION}" />
</g:header>
My Simple HTML Structure:
<html>
<body>
<p id="5">
My Text Qoted Here -
<span class="author">Author </span>
<br>
<span class="uptext">20</span>
<img class="im" class="upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />
<img class="im" class="downimg"
src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg" />
<span class="downtext">5</span>
</p>
</body>
</html>
as can be seen there are two images, and i want to change the count of the image based on which image is clicked.
i write the following jquery code for it:
$(function() {
$(".upimg").click(function(e) {
e.preventDefault();
alert("here1");
curr_val = $(this).closest(".uptext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".uptext").text(nos);
});
$(".downimg").click(function(e) {
e.preventDefault();
alert("here2");
curr_val = $(this).closest(".downtext").text();
nos = parseInt(curr_val, 10) + 1;
$(this).closest(".downtext").text(nos);
});
});
But it does not seem to respond.
You can find the fiddle here
Your <img> tags have two class attributes:
<img class="im" class="upimg"
Try changing that to
<img class="im upimg"
Also, the closest() method returns the closest parent element, not an adjacent sibling, so to find the correct uptext element, you need to use:
$(this).prev().text()
you cant use 2 class attribute
you have to do like that
<img class="im upimg"
src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg" />
I'm currently using an parser called Element Parser and I'm trying to parse an img tag that is the 4th img tag down under the div id "Group-E". I can retrieve the 2nd img but not anything after the 2nd img. The img that I'm wanting to parse is:
<img src="http://example.com/I_need_this_image_here.jpg" />.
How can this be done? So far I've used the following code to get the 1st img tag:
Element* needIMG = [document selectElement: #"div.edgeTop div#Group-E img"];
HTML Code trying to parse
<div class="edgeTop">
<div id="Group-E">
<img src="http://example.com/image.jpg" id="image" /> <img src="http://example.com/image2.png" border="5" />
<h4>Group - Section E</h4>
<div class="efs" style="width:28px;">Group:</div>E<br />
<div class="efs" style="width:28px;">Link:</div>Group E<br />
<div class="efs" style="width:28px;">Date:</div><strong>Febuary 15, 2001</strong> by <strong>Date</strong><br />
<br />
<img src="http://example.com/image3.gif" class="image" style="padding: 0 4px 7px 0;" />Group;. <b>Group E</b><br /><br />Group E Other:
<img src="http://example.com/I_need_this_image_here.jpg" /> Other:<br />Group Site
<div class="efs">
<div style="padding:18px 0 1px 8px;">Link Pics:</div>
<img src="http://example.com/linkpic.gif" class="imagelink"/> </div>
</div>
<div class="efsl"></div>
Thanks for the help.
Figured it out after hours of trial and error. You have to use the "+" selector to get the next element.
Could you not add a class to the image you want to parse such as...
<img class="imgtoparse" src="http://example.com/I_need_this_image_here.jpg" />