I need your help in this problem . I have just started learning vaadin framework. I want to apply css on the row headers (First cell of each row) but does not got any success.Following is the code which i used.Kindly reply for any possible solutions, thanks ...!!!
scss code i am using for rowheaders:
.v-table-row-cell-content-rowheader {
background: black !important;
}
My code for Table definition:
Table customizedTable = new Table();
customizedTable.addStyleName(Reindeer.TABLE_BORDERLESS);
customizedTable.setStyleName("no-vertical-lines-or-border");
You can work with the CellStyleGenerator and apply it to specific cells in a row.
More information about the CellStyleGenerator can be found here
Related
I've tried using wild cards in CSS selectors for JavaFX UI (TableView), but that doesn't seem to work, although JavaFX CSS reference notes that it's based on CSS version 2.1:
JavaFX Cascading Style Sheets (CSS) is based on the W3C CSS version
2.1 with some additions from current work on version 3.
For example:
TableColumnHeader[id|="column"] > .label
{
-fx-graphic: url("ico.png");
}
The above CSS is an attempt to show an icon "ico.png" on all column headers of a TableView
TableColumnHeader is the type selector for the table's column header Node
.label is the style class for the Label node rendered within the column header
[id|="column"] is similar to the example mentioned here: https://www.w3.org/TR/CSS21/selector.html#matching-attrs
The id of column header is inherited from its TableColumn. The id is set on the TableColumn object as follows: tableColumn.setId("column-"+ columnName) where columnName is a String variable
The above CSS doesn't work. Any variation that includes [id=...], or any other attribute other than id doesn't work.
Is this a limitation in JavaFX? or is there a way to make it work?
I used to gwt 2.5.1, java 1.6.
when used grid,
I want to centerd just grid header.
No data, Only Header.
Source
.getGrid().getColumnModel().getColumns().get(i).setAlignment(HorizontalAlignment.CENTER);
But,
Both are aligned.
So,
What Can I do?
Thank you.
Use DOM inspector and fish out the style that corresponds to your header cell.
If you named your column as "test" then the style may be named something like "x-grid3-td-test".
Add the following to your stylesheet:
.x-grid3-td-test* {
text-align: center;
}
I am trying to align a column in my cell table to the right. Therefore I use the "setHorizontalAlignment" of my column object. The resulting cell is actually rendered with the "align=right", but it is not aligned to the right because the cell contains another div that fills the complete cell.
Is this a bug in GWT or am I doing it wrong?
TextColumn<String> myColumn = new TextColumn<String>() {
#Override
public String getValue(String myObj) {
return myObj;
}
};
myColumn.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
myCellTable.addColumn(myColumn, "anyColumnName");
I know I can also align it right via CSS, but I hope, I can get this approach working because it seems to be the cleaner solution.
You can do it using css and Column#setCellStyleNames().
Sample code:
myColumn.setCellStyleNames("rightAlign");
css:
.rightAlign{
text-align: right;
}
Note: change css as per your requirement
I have the same code, and it renders the same way - with a div element that takes 100% of the width. And the text inside this cell is displayed aligned to the right - as it should. So this is not a GWT bug.
There is another style in your CSS that interferes here. Most likely, you have something like this in your CSS:
td {
text-align: left;
}
While trying to adjust the resolution of primefaces dataTable, the the paginator header has some issues. How can I sort it? My screen shots are given below. One full screen . and on restore down
I solved it with this:
.ui-datatable-tablewrapper {
overflow-x: auto;
}
This fixed pagination header and footer, and only scroll on data cell.
The issue is discussed here and here.
I got reasonable results by setting the table to fixed, and adjusting the word wrapping in the table:
.ui-datatable thead th {
white-space: normal;
word-wrap: break-word;
}
.ui-datatable table {
table-layout:fixed
}
And setting the width attribute for p:column rows.
So on the left hand side of this page I will have an html table which already has a function to add rows dynamically. On the right hand side I would like to have a bunch of pictures that can be dragged onto the html table and that will trigger the addRow() function adding a new row into the table containing the id from the picture. Can someone please tell me how to accomplish this?
EDIT: (answer to GrailsDev)
Well I haven't tried it yet because my research wasn't conclusive. I'm sure I want to do something like this:
$("#draggable").draggable(); $("#droppable").droppable({ drop: function() { alert('dropped'); } });
where the draggable would be the div encasing the images, however, I need to know how to get some information from the picture to put it into that drop function.
Okay, so the basic idea is that you'll want a tbody and thead in your html, that way it's possible to make tr tags in the tbody droppable slots while the header will not accept the images being dragged. Then you make the images draggable and the tr tags in the rows droppable elements that accept img.
For this working example in fiddle, I put the ID in row 1, the title tag in as the name, and a copy of the image in as a thumbnail.
Here is the jQuery code to get it running:
jQuery(function($) {
$('#rightcol img').draggable({
helper: 'clone'
});
var dropProps = {
accept: "img",
activeClass: 'active',
hoverClass: 'hover',
drop: function(ev, ui) {
console.log(ui);
var $im = $(ui.draggable);
var $row = $('<tr />').append(
$('<td />').html($im.attr('id'))
).append(
$('<td />').html($im.attr('title'))
).append(
$('<td />').append($im.clone().attr('id', null))
).droppable(dropProps);
$(this).after($row);
}
};
$('#leftcol table tbody tr').droppable(dropProps);
});