I'm finding a behavior that's really strange (at least, on the CSS side) in the CellTable component of GWT.
Suppose we examine the following CellTable demo: http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCellTable
If I try to add ellipsis to the header (TH tags) only by using CSS, by the following code (we can try to add this in the clean.css file directly in the Developer tools of browser):
th {
text-overflow: ellipsis;
overflow: hidden;
width: 50px;
display: inline-block;
white-space: nowrap;
}
This works with a normal HTML test page (according to this question), but not in this case: the headers will break into newlines instead.
I can't figure out which CSS properties of the elements have interfered with this simple approach.
Sorry for the simple question, but I'm learning CSS and try to experiment more with it, thus thanks in advance for any support.
Otherwise, I can try to solve this on the Java side, and custom the header with a builder.
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'm styling my GWT CellTable cells by overriding getCellStyleNames in my column definition. Styles are working, on the most part. I'm trying to color the background of a 4-pixel wide column, with mixed display results depending on the browser engine. I'm expecting the following to work, but it doesn't. I need to set the height for firefox to 0, otherwise the first row appears to have a larger height than the rest of the rows. Any ideas?
.wt-tableRowGreen {
background-color: #8DAF00;
width: 0px;
padding-left: 4px !important;
padding-right: 0px !important;
display: compact;
height: 100%;
}
Setting height to 0 works fine for FF, but breaks the others. Using browser specific selectors isn't working:
-ms-height: 100%;
-webkit-height: 100%;
-moz-height: 0;
If you want to target spesific css for Firefox, this is the solution I use:
#-moz-document url-prefix()
{
/* Css for FF here */
}
Obviously, this is something one should generally avoid, but in some cases it's virtually impossible to get around it.
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.
Can we get the value from inside a css definition in the code if CSS resource is used?
e.g.
.iv_menu_thumbnail {
display: block;
width: 24px;
height: 24px;
margin: 3px;
float: left;
cursor: pointer;
}`
Can we know via code the value of width and i want to access from one of my java class?
Thanks in advance
var width = $('.iv_menu_thumbnail').width();
console.log(width);
This will get the width of the element if this is what youre asking for.
As far as I'm concerned you cannot get non numerical values from a css declaration.
But you can set your own values via jQuery using the
.css()
So it would look like this if you want to set a new css value. (or overwrite it)
$(someelement).css('float', 'left');
As far as I know, you can only inspect the computed CSS property on an element where this has been applied. Like:
$(someElementOrId).css('width');
or
$(someElementOrId).width();
Note that the former and the latter differ - the former does not contain the unit of measure, the latter does.
You can have a variables in your Css Resource file and set the width attribute with that variable, and then access the width varialbe from code.
CssResource
Css Resource file
#def small 1px;
#def black #000;
border: small solid black;
Java Code
interface MyResources extends CssResource {
int small();
}
I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?
Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait.
<h:outputLink id="lnk" value="#">
<p:printer target="tbl" />
<p:graphicImage value="http://www.primefaces.org/showcase/images/print.png" />
</h:outputLink>
I didn't find any suitable attribute in the <p:printer> tag.
Update: sorry, nevermind the <p:printer> can be used on a <h:dataTable> as well, so you can also just answer the second question only.
Both qustions are answered with CSS #media print rule. It allows you to specify CSS styles which are specific to printed output. You can embed those rules in a normal CSS stylesheet file or <style> element the usual way.
I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?
Lookup the classname of the <p:dataTable> and override it in your #media rule:
#media print {
.primeFaces-dataTable-className {
border: 0;
margin: 0;
padding: 0;
background: none;
color: black;
}
}
There are likely more, I don't know it all from top of head, you should be able to check using Firebug or Chrome developer tools what classname is been used and which properties are all been set so that you know which you should reset to 0, none or some other default.
Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait.
Use CSS.
As per CSS 2.1, you can specify it as follows:
#media print {
#page {
size: landscape;
}
}
This has however browser specific impediments, it's not supported in FF and in MSIE <=7. For workarounds, check the accepted answer of this question: Landscape printing from HTML