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.
Related
I'm using Grid (multiselect mode) in Vaadin for data representation and i've got a question:
How to remove select/deselect checkbox in header?
Screenshot
In order to avoid mouse clicks on the cell to toggle the checkboxes you can use the CSS property pointer-events.
I've added the style hide-checkbox to my grid and then used the following css to hide the checkbox and prevent click events (Vaadin 7):
.v-grid-hide-checkbox th .v-grid-select-all-checkbox {
display: none;
}
.v-grid-hide-checkbox th:first-child {
pointer-events: none;
}
You could use css to hide it, something like
.v-grid-select-all-checkbox {
display: none;
}
should work.
If course the checkbox is still there so by using browser's developer tools it's possible to make it visible.
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
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;
}
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
I have a <p:menubar> in a xhtml template. The div that surrounds it has these CSS properties:
position: fixed;
top: 44px;
width: 100%;
So I can fix the menu header while user scrolls down the page.
The problem now is that some Prime Faces component have icons and headers overflowing the menu.
I tried to work with z-index but no success. I imagine that there is another solution in PrimeFaces instead of z-index.
Thanks a lot.
According to the PrimeFaces default style sheet primefaces.css, the <p:message(s)> icon is relatively positioned.
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
background: url("/omnifaces/javax.faces.resource/messages/messages.png.xhtml?ln=primefaces") no-repeat;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
}
I'm in first place not sure why it's relatively positioned as it doesn't seem to need to be offsetted nor have any absolutely positioned children. Perhaps it's been used as some (most likely IE-specific) workaround/hack for something else (if this was "has layout" related, the developer would better have used overflow: hidden instead for this). So just making it the default position: static should fix it.
Add the following to your override stylesheet to achieve this:
.ui-messages-info-icon, .ui-messages-warn-icon, .ui-messages-error-icon, .ui-messages-fatal-icon, .ui-message-info-icon, .ui-message-warn-icon, .ui-message-error-icon, .ui-message-fatal-icon {
position: static;
}
Alternatively, you could of course also set z-index of the menu with an insane high value, as you figured out yourself. I wouldn't consider this a reliable solution though, this is too much a workaround/hack.
Resolved it by setting the z-index: 9999999 to the <p:outputPanel> sorrounding the menu instead of setting the style property in the menu.