i'm trying to display icons as filterOptions on my p:datatable.
the current situation is that i display a list of unicode symbols , but the client wants them to be colorful.
the code below shows how i fill my list of states (my filter options) in my backingbean.
private static final String LABEL_DEACTIVATED = "\u24E7";
private static final String LABEL_ACTIVATED = "\u2714";
private void fillSelectItem() {
userStates = new SelectItem[3];
userStates[0] = new SelectItem("", LABEL_ALL);
userStates[1] = new SelectItem(USER_ACTIVATED.name(), LABEL_ACTIVATED);
userStates[2] = new SelectItem(USER_DEACTIVATED.name(),
LABEL_DEACTIVATED);
}
You could use CSS to style each individual icon, as long as your target browser supports CSS2 attribute selectors (ie. almost all modern browsers). Put the following in your css file:
option[value='USER_ACTIVATED'] {
/* for example */
background-image: url(.....);
background-color: #123456;
color: #123123;
}
option[value='USER_DEACTIVATED'] {
/* for example */
background-image: url(.....);
background-color: #888111;
color: #222222;
}
Related
I am using iText 7 to generate pdf file from html file which is saved in a database.
I used the following code to generate pdf, but half of a table which is inside the html file is ignored. I guess the size of IBlockElement which contains the table is bigger than the size of canvas.
Any ideas how to solve the issue?
List<IElement> elements = (List<IElement>)HtmlConverter.ConvertToElements(html);
for (int k = 0; k < elements.Count; k++)
{
if (!renderer.IsFull())
{
canvas.Add((IBlockElement)elements[k]);
}
else
{
page = pdfDoc.AddNewPage();
pdfCanvas = new PdfCanvas(page.NewContentStreamBefore(), page.GetResources(),pdfDoc);
rectangle = new Rectangle(offset, offset, pageWidth, pageHeight);
pdfCanvas.Rectangle(rectangle);
pdfCanvas.Stroke();
canvas = new iText.Layout.Canvas(pdfCanvas, pdfDoc, rectangle);
renderer = new MyCanvasRenderer(canvas);
canvas.SetRenderer(renderer);
}
}
Implementation of MyCanvasRenderer:
class MyCanvasRenderer : CanvasRenderer {
protected bool full = false;
public MyCanvasRenderer(Canvas canvas) : base(canvas) {
}
public override void AddChild(IRenderer renderer) {
base.AddChild(renderer);
full = true.Equals(GetPropertyAsBoolean(Property.FULL));
}
public bool IsFull() {
return full;
}
}
Canvas class is primarily aimed at cases when you need to add elements to a specific predefined area on a page / XObject and it is not aimed at overflowing your content to next areas.
As the described use case is just converting HTML to PDF, the appropriate API to use is another method of HtmlConverter which allows you to convert HTML to PDF in one line:
HtmlConverter.ConvertToPdf(html, pdfWriter);
UPD: clarifications on additional requirements from #Saeed
Different margins for the first page
CSS allows you to specify page margins with #page media, and those declarations are picked up by pdfHTML. Here is an example of page margins specification and how to customize them for the first page:
#page {
margin-top: 100pt;
margin-left: 36pt;
margin-right: 36pt;
margin-bottom: 36pt;
}
#page:first {
margin-top: 100pt;
margin-left: 36pt;
margin-right: 36pt;
margin-bottom: 36pt;
}
Avoiding splitting of a table across several pages
CSS has page-break-inside property that controls page-wise appearance of elements. In particular, you are interested in page-break-inside: avoid; declaration that prevents splitting of an element across pages.
You could apply this declaration to all tables in your document:
table {
page-break-inside: avoid;
}
Alternatively, you can create your own class and apply it only whenever necessary:
.avoid-page-breaks {
page-break-inside: avoid;
}
<table class="avoid-page-breaks">
...
</table>
Third option is to apply this style to a table inline:
<table style="page-break-inside: avoid;">
...
</table>
I'd like to implement a tooltip dictionary chrome extension. When the user hover the mouse over a chunk or a word in text, It should show the block selection or change its background color and show the tooltip under the word.
How can I implement it?
I just did similar thing with background like this:
core.js
// Unique ID for the className.
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited';
// Previous dom, that we want to track, so we can remove the previous styling.
var prevDOM = null;
// Mouse listener for any move event on the current document.
document.addEventListener('mousemove', function (e) {
var srcElement = e.srcElement;
// Lets check if our underlying element is a DIV.
if (srcElement.nodeName == 'DIV' || srcElement.nodeName == 'SPAN') {
// For NPE checking, we check safely. We need to remove the class name
// Since we will be styling the new one after.
if (prevDOM != null) {
prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
}
// Add a visited class name to the element. So we can style it.
srcElement.classList.add(MOUSE_VISITED_CLASSNAME);
// The current element is now the previous. So we can remove the class
// during the next iteration.
prevDOM = srcElement;
}
}, false);
core.css
.crx_mouse_visited {
background-color: #bcd5eb !important;
outline: 1px solid #5166bb !important;
}
i have added a new unbound field to display image of Inventory Item in Transaction Details tab, then to set the fixed height of the image I have added some javascript, but after adding javascript the screen is not populating any default values into like RefNbr and Date, Below is the javascript code am using. The same javascript code is working on my custom screen.
<px:PXJavaScript runat="server" ID="CstJavaScript1" Script="var css = '.GridRow > img { width: 100%; height: 40px; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);" />
Earlier I have added Javascript inside the tab item, but now I moved out of the Tab when it was working without issues.
</px:PXTab>
<px:PXJavaScript runat="server" ID="CstJavaScript1" Script="var css = '.GridRow > img { width: 100%; height: 40px; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style);" />
I am working with Phaser.js v2.6.2. When I try to use this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;, it adds a white strip on top of Stage area. If I remove this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; white strip is gone but stage not scaled.
I dont know what is the problem, I need some help here. Screenshot is attached.
My code is
var game = new Phaser.Game(800, 250, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('background', 'images/gamebg1.jpg');
}
function create() {
game.add.sprite(0, 0, 'background');
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
}
function update() {
}
NOTE: It only happen in emulator view, chrome.
I had a similar problem. I think it has to do with the page giving margin and or padding to the html or body tags.
Try adding some styling to the html and body elements, Make the margin and padding 0 like so:
<style>
* {
padding: 0;
margin: 0;
}
</style>
I would like to change the color of the text displayed in a TableRow.
The instruction setStyle("-fx-background-color: green"); is working well,
but the instruction setTextFill doesn't work. Is it normal ?
tableView.setRowFactory(new Callback<TableView<Person>, TableRow<Person>>() {
#Override
public TableRow<Person> call(TableView<Person> param) {
final TableRow<Person> row = new TableRow<Person>() {
#Override
protected void updateItem(Person person, boolean empty) {
super.updateItem(person, empty);
setTextFill(Color.RED);
//setStyle("-fx-background-color: green");
}
};
return row;
}
});
The easiest way is to set the default CSS file in your application with:
.cell {
-fx-background-color: #FFCCAA;
-fx-text-fill: #000000;
}
/* if you want more different colours for even and odds: */
.cell:odd {
-fx-background-color: #FFDDDD;
-fx-text-fill: green;
}
You can add this file.css to your scene:
scene.getStylesheets().add("file.css");