We Keep Coding

Why is zk rendering a second tbody for a listbox?

I'm having a problem where zk 3.6.3 is rendering a second <tbody> tag for a Listbox. Actually the first rendered <tbody> tag is the one that is making me problems. It has it's css style set to visibility:hidden;height:0px and Opera 12 and IE 11 are rendering a large white empty space for it. So in the browser I see the table header, this empty space and then the actual rows of the listbox.
The problematic code for zkoss rendering is contained in org.zkoss.zkmax.zul.render.ListboxDefault in lines 53-63.
How can I prevent zkoss or browsers from rendering this empty space?

Well, there is always a solution and maybe the "hacking" solution is the best here :
Class overriding of that class.
Create that package and create that class (exactly the same package and classname).
Copy the code from your link to your class.
Change the code, I'll suggest try to remove the complete if. => See what result it gives (test al your listboxes!)
When you ever think of upgrading ZK version : Don't forget to remove or update the class !!!
If removing doesn't help, try to change the style,...
On the other hand, if updating ZK version is possible, you should try that.
The version you use is old, and doesn't support newer browsers.

The first tbody contains the list header (no, I don't know why they don't use thead for this). If you don't add one to the list, the CSS visibility:hidden;height:0px should make it invisible on the screen and that works for me.
My guess is that somewhere in the app, you have CSS rules which override this style. So the next step is to fire up the web developer tools and check which CSS styles are actually applied.
Alternatively, you can give the list box a custom class setSclass("hiddenheader") and then use CSS like this:
table.hiddenheader tbody:first-child { display: none; }
(note: I didn't test this; ZK might add some prefix to the styles so you might have to adjust the code but the example should get you started).

How can I get an Embossed (raised letter) effect on text through CSS in JavaFX?

I've been bashing my brain against this one for a few days but I can't find a straight forward answer to the question on google. There's plenty of CSS stuff but I don't really know what crosses over from general CSS domain into JavaFX CSS domain (if any of it does, and really I'm nto sure that anything does).
I have a label that is functionally a button. It has 3 states reflected by CSS:
1: Idle, nothing special.
2: Hovered This is where I want the text to appear "raised"
3: Pressed: I was able to figure this out.
For hovered I have the following CSS:
.label:hovered{
//What goes in here to make the text appear embossed (raised) when the cursor
//is hovering over it?
}
I've tried the -fx-effect : innershadow(...) but it isn't really providing the ideal desired effect.
EDIT:: For a bit of clarity this is for what I am going (See #3). I tried the CSS but it did not work.
The appearance of the control is thus right now:

You can use a Lighting effect, here is a link to the Oracle tutorial on lighting.
The effect cannot be applied via CSS in Java 8. You could apply it in code or via xml.
You can add a listener on the hover property of a node to switch lighting off by setting the node effect to null and to switch it on by setting the node effect to you lighting.
There is example code in the JavaFX javadoc on Lighting, which I've just reproduced here:
Light.Distant light = new Light.Distant();
light.setAzimuth(-135.0);
Lighting lighting = new Lighting();
lighting.setLight(light);
lighting.setSurfaceScale(5.0);
Text text = new Text();
text.setText("JavaFX!");
text.setFill(Color.STEELBLUE);
text.setFont(Font.font(null, FontWeight.BOLD, 60));
text.setX(10.0);
text.setY(10.0);
text.setTextOrigin(VPos.TOP);
text.setEffect(lighting);
A drop shadow would also work and there are likely other ways to achieve what you want, all with slightly varying results.

delay in wicket component tooltip

I am using tool tip in wicket.It shows by delay and I couldn't speed it up.I want to make some css attributes for it . How can I do?
inputTextField.add(AttributeModifier.append("title", "I am a tool tip in wicket"))

The style-attribute can be added the same way you used the AttributeModifier for the title-attribute.
inputTextField.add(new AttributeAppender("style", Model.of("border: 1px solid red;")));
But I think this will not solve your "delay problem" (it is not Wicket related). You could pick a decent JavaScript library that draws you tooltip boxes on mouse over.
There are also pure CSS tooltip libraries, for example: hint.css

CSS style for radios in Tapestry 5

How can I get rid of the box look of radio buttons in IE8? They look like this:
They look normal in other browsers. I'm using Tapestry 5.
Thanks.

It sounds like you have a border around all INPUT tags which most likely comes from your own css somewhere as I don't believe tapestry adds it by default.
Adding this to your css should resolve it.
input[type="radio"] {
border: 0 none;
}
If it doesn't, you'll have to share your html and your css so we can have a closer look.

DialogBox depth (z-index) in GWT

Having many GWT DialogBox'es, the first one always stays at the bottom and new ones are created on top.
What I am trying to obtain is a way to bring one of such dialogs on top when it is clicked.
I haven't found the GWT approach to handle depth (something related to a CSS label z-index but it lacks some documentation).

I think, you can use something like this:
DialogBox d=new DialogBox();
d.getElement().getStyle().setZIndex(intValue);

You can also define a CSS rule for all DialogBoxes in the system:
#external gwt-PopupPanel;
#external gwt-DialogBox;
#external gwt-PopupPanelGlass;
.gwt-PopupPanel, .gwt-DialogBox, .gwt-PopupPanelGlass {
z-index: 1000;
}
(Remove the #external references if you are not using CssResource).
That way all your popups, dialogboxes and popup glasses will be over other items in the page. Make sure no other item has z-index above the value you choose (in my example, 1000).