Having some CSS problems with a textfield in a table. I’m trying to put a textfield with large text into a table, but the generated input has explicit selectors that override my CSS. See the test case and the comments within it.
public class TestcaseApplication extends Application {
@Override
public void init() {
Window mainWindow = new Window("Testcase Application");
setMainWindow(mainWindow);
setTheme("testcasetheme");
Table t = new Table();
t.setSizeFull();
t.addContainerProperty("Text", TextField.class, null);
mainWindow.addComponent(t);
// I want the table to fill the whole window so I maximize the layout.
// Without this the inputs have a blue underline
((VerticalLayout) mainWindow.getContent()).setSizeFull();
// If the verticallayout is not maximized and the table has only one
// item the input again gets a thick blue underline.
// for (int i = 0; i < 1; ++i) {
for (int i = 0; i < 10; ++i) {
TextField tf = new TextField("", "large text");
tf.setSizeFull();
tf.addStyleName("large");
t.getContainerProperty(t.addItem(), "Text").setValue(tf);
}
}
}
Hi! I found two ways to fix this. inline css overrides general css files. You can counteract this by adding !important to the end of the css row, like this:
However. I think it is a little quirky to force override on inline css. Is it a must that the height must be specified in css? otherwise you can just write tf.setHeight(“40px”); on row 26 in the java. It basically just puts the css inline into the component itself.
I tried that too, and it works partially: the text fits to the input, but you get a thick blue underline in them (see the comments in my code snippet). This is because the v-texfield has a background image for selections etc. I solved it by removing the background image altogether:
Ah, didn’t notice the comments, and tested it only with Google Chrome, where it works like a charm. Firefox, IE8, IE7 caused the blue bar. I think at least the tf.setHeight(“40px”); should work no matter what, so this smells like a bug. Ticket?
Just checked the CSS, there should be no need for !important statements in your custom CSS to get the height overridden, your selector seems specific enough.
Was the blue underline the only actual problem? I closed the ticket Jens made and commented there what’s causing that (in short, CSS sprites).
The first problem was how to override the explicit height and the second problem was the blue line. My CSS avoids both of those, but as you said, it feels like a kludgy way to do it.
Anyhow, I noticed what’s causing the height issue: you use setSizeFull() for the TextFields, which will cause the client side to calculate the height explicitly. Leave that out, and you don’t need the !important in your CSS. And if you wish to have exactly the same looking textfield like in Reindeer, use the following background:
Yeah, but without setSizeFull() the textfields do not resize to cell width; most of my cells are narrower than the default textfield, resulting in textfields being “cut off”:
