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.
Related
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).
I have a simple question, I am trying to build something similar to whats in this URL
Visit: http://demo.vaadin.com/sampler-for-vaadin6
Specifically, I want to know how to create those boxes , which can be clicked on ? I am not sure what these are? whether they are links or images or buttons?
I also what the box around it when a mouse is moved over these boxes. Any sample code is highly appreciated.
The sampler page is created with Vaadin. According to FireBug it's made with a CSSLayout and those boxes are made with links. The hover effect is made with the following css attribute:
.v-csslayout-grid .screenshot a:hover span {
background: url("screenshot-frame-hover.png") no-repeat scroll 1px 0px transparent;
}
You can find the code for a "relatively" recent version of the Vaadin 6 Sampler here.
At least this version (which I believe to be 6.7.4) should give you some examples of what you're looking for.
I'm having a menuBar with a sub menuBar with n-menuItems. it looks kinda like this picture:
But because of my layout I want to open the "More" option on the left side of the menu not on the right side. Is this doable with just changing the Css-File [*] (left: XXpx) or do i have to make some kind of changePopUpPosition Method ?
[*]:
.gwt-MenuBarPopup{
left: 300px;
}
Thx for any help :)
Be careful because if you change this rule, all the elements which are using they´ll change their position as well.
So, I recommend you in your GWT´s code, get this element and apply your css rule.
About the css, under my opinion maybe changing the text-align is enought for your requirements.
Something like: text-align: right;
If you are happy working with JS, you can have a look into GQuery, because is quite fast have access to your element.
I have just checked in the GWT´s Showcase and is working...
I am using <s:doubleselect> in my jsp. The problem is both come on different row while I want the in same line. Here is the code
<s:doubleselect theme="css_xhtml" labelposition="top"
requiredposition="left" name="index" cssClass="dropdown_menu" list="#request.constants.keySet()"
doubleList="#request.constants[top]" doubleName="oldValue"
doubleCssClass="dropdown_menu" ></s:doubleselect>
How it can be possible to put them on same line?
This behavior is an unfortunate holdover from the old UI tags.
The easiest solution is to use CSS to change <br/> styling inside the .wwctrl class (changes all controls, which may be what you want anyway):
.wwctrl br {
display: none;
}
A less-practical, but potentially cleaner, solution would be to extend the theme and tweak the control's template. There are a number of controls that have some questionable HTML, but hardly anybody uses the specialized controls, so we never fix them.
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).