I have added a clickhandler to a label which works fine. But when I mouseover the label a cursor instead of the mousearrow is shown (the clickhandler still works fine). Is it possible to set something so the mousearrow remains?
If you have a label like
<g:Label addStyleNames="{style.mytext}">MyText</g:Label>
Just add the following to its style
.mytext {
cursor: default;
}
Or cursor: pointer, cursor: help, ...
Alternative
Or turn the <g:Label> into a <g:Anchor href="..." addStyleNames="{style.myanchor}">. To avoid the default underline, you may want to add a style
.myanchor {
text-decoration: none;
}
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 have a GWT application with some SimplePanel.
How can I make its border dashed?
I tried myPanel.addStyleName(Style.BorderStyle.DOTTED.getCssName());, but it didn't work.
This should work using Element#getStyle() method to update the element's Style object.
SimplePanel myPanel=new SimplePanel();
myPanel.getElement().getStyle().setBorderStyle(BorderStyle.DOTTED);
but I suggest you to keep the styling in the CSS file instead of directly applying it in Java file that is more difficult to manage and change in future mostly in case of themes.
CSS:
.dashedBorder{
border: 1px dotted black;
}
JAVA:
SimplePanel myPanel=new SimplePanel();
myPanel.setStyleName("dashedBorder");
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 am new to GWT and was learning it through some examples running in Eclipse. In one of those programs for a button I added setStyleName(class) (also checked with setStylePrimaryName()) and added one more style to that using addStyleName(class).
What I expected was that the button should display the css class properties setted using setStyleName()/setStylePrimaryname as this will be the primaryStylename.
But to my surprise if I add another style to button using addStyleName(), that style is getting as the button's style eventhough it is its secondaryStyleName! In such a case inorder to express the primary styleName, I had to add the secondary style Name using addStyleDependentName().
My code sets styles as follows.
final Button sendButton=new Button("Send");
final TextBox nameField=new TextBox();
sendButton.setStylePrimaryName("newButton");
sendButton.addStyleName("secondButton");
And in the css file
.newButton{
display:block;
font-size: 16pt;
color: black;
background-color: maroon;
}
.secondButton{
color:blue;
margin: 15px 10px 10px;
background-color: olive;
}
The button is always coming in olive background color except in cases where its adding as addStyleDependentName("secondButton") and
case 2: while using addStyleName("secondButton") and then setStyleName("newButton") (As setStyleName() will remove the existing secondary styles). I had also checked the values of primary style name and others using getStylePrimaryName() and getStyleName().
getStylePrimaryName() gives "newButton" and getStyleName() gives newButton,secondButton....So even having a primary style name why its always showing its secondary style property(here secondButton) added through addStyleName()?
*Please note: I have tried this on a text box as follows and its expressing the color mentioned under primary style as expected*
final TextBox nameField=new TextBox();
nameField.setText("---Enter Name Here---");
nameField.setStylePrimaryName("textStyle");
nameField.addStyleName("myText");
nameField.addStyleName("bigText");
and the CSS is as follows
.myText{
color:blue;
}
.bigText{
font-size: large;
}
.textStyle{
color:maroon;
text-shadow: aqua;
}
A thing noticed was that unless we are not adding the secondary styles as addStyleDependentName(), the properties are displaying in the order in which class names occur in CSS...That is, if the primary style name definition comes after secondary ones, primary gets displayed, else the secondary ones...The difference can be noted changing the order in which classes are defined in CSS
So in my button properties, when i changed the order to
.secondButton{
color:blue;
margin: 15px 10px 10px;
background-color: olive;
}
.newButton{
display:block;
font-size: 16pt;
color: black;
background-color: maroon;
}
the button color is getting as maroon. If the secondary styles are added as addStyleDependentName(), the primary style is expressed irrespective of the order in CSS
As per Docs :
Adds a secondary or dependent style name to this object.
After you set the setStyleName() or setStylePrimaryName() the addStyleName() will add another style,which you passed through the argument
The style primary name is the one style dependent names add a suffix to. Otherwise it's just a style name, and the CSS rules apply (GWT can't do anything around that, it's just HTML+CSS+JS in the end in the browser)
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.