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;
}
Related
I have created a simple grid with one column:
public MyGrid() {
addComponentColumn(this::getIcon).setClassNameGenerator(i -> "icon-img");
setItems(/** some items */);
setClassName("sidebar-grid");
}
And I have a css theme called mangaTheme. I use it like this #Theme("mangaTheme"). In the mangaTheme folder I have styles.css file with the following content:
.icon-img {
padding: 0;
}
.sidebar-grid {
width: 102px;
margin: auto;
margin-left: -30%;
}
The sidebar-grid css properties are applied properly as the grid is moved, but the icon-img properties are not applied whatsoever:
The classnames are applied:
What am I doing wrong or missing? I have also read this guide: https://cookbook.vaadin.com/dynamic-grid-cell-styling
EDIT: After configuring my workspace as was mentioned in the answer this is the resulting structure, but it still does not seem to function properly.
What you're missing is that the cell <td> element is inside the shadow DOM of the vaadin-grid component, and thus cannot be styled with global CSS. To style parts of components that are inside the component's shadow DOM, you need to inject the CSS into the component.
In the Cookbook example, this is done through the themeFor parameter in the annotation that loads the stylesheet:
#CssImport(themeFor = "vaadin-grid", value = "./recipe/dynamicgridcellstyling/dynamic-grid-cell-styling.css")
In your theme folder, however, you can do the same thing by putting that CSS in a stylesheet called vaadin-grid.css in the components subfolder, i.e.:
themes/mangaTheme/components/vaadin-grid.css
Another thing you're missing is that the classname is applied to the <td> cell, but the padding is on the vaadin-grid-cell-content element slotted into the cell, not the cell itself, so you need to rewrite your selector:
.icon-img ::slotted(vaadin-grid-cell-content) {
padding: 0;
}
(The sidebar-grid CSS class works fine as-is because it's applied to the vaadin-grid root element, which is in the page's regular DOM.)
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 have the following code, which displays the images in my table with no border, then an orange border when hovered over:
table.test {
}
.test img {
border: solid 4px transparent;
}
.test img:hover {
border-color: orange;
}
If it try the following, i expect the border to stay orange after click, but it does not
.test img:active {
border-color: orange;
}
The images being used are thumbnail size instead of checkboxes.
Any ideas how I can keep the border orange after click?
Images cannot use active. http://www.whatwg.org/specs/web-apps/current-work/multipage/selectors.html#selector-active.Wrap it within an anchor and prevent default on the anchor click and change the cursor maybe?
check this fiddle might help you using simple jquery let you give your output
$('.test img').on('click', function(){
//use jquery css function
$(this).css({"border-color":"orange"});
// or add class .active with your own style
$(this).addClass('active');
})
make your image as block element and add this jquery click event. solved
You can create a class called orangeborder (or anything, really). Give it the attributes of border-color:orange;.
Then you can use jQuery and use:
$('img').click(function(){
$(this).toggleClass('orangeborder');
});
jsFiddle
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);
});