Help with CSS

[NielsBaloe]

Hi all,

I'm starting to use SmartGWT 2.2, and I have some serious troubles with the css-layout of a DynamicForm objects. The problems I have are:

css code:
.regular {font-size:16px;white-space:nowrap;vertical-align:top;}
GWT-code is included below.

1. TextItem's do not react on .setTitleStyle("regular"), only the RadioGroup does. The white-space:nowrap is taken into account, but the font-size is ignored, and the vertical-align is only listened to when the focus is gained (which makes titles go up and down on a focus).
Adding .regular:focus does not help for the focus vertical-alignment problem.

2. I don't know how to set the default fontsize to 16 (instead of 15) for smartgwt in general, without having to override all styles manually for each item. I do have a *{font-size: 16px;} in the .css, but the TextItem input-fields are still in 15.

3. The DynamicForm also includes a SelectItem. This SelectItem listens to .setTitleStyle("regular") but not when it has the focus. Furthermore, although there are no items added to it yet, it has a width which is bigger then the complete DynamicForm is added to, which creates a horizontal scrollbar in this tab for no reason.

Thanks for any hints!!

GWT-code:
tabLayoutPanel = new TabSet();
tabLayoutPanel.setWidth(400);
tabLayoutPanel.setHeight(500);

DynamicForm formGeneral = new DynamicForm();
formGeneral.setCellPadding(5);

tab1 = new Tab(i18nContacts.general());
tab1.setPane(formGeneral);

ge0 = new RadioGroupItem();
ge0.setTitle("Type");
ge0.setTitleStyle("regular");
ge0.setTitleAlign(Alignment.LEFT);
ge0.setTitleVAlign(VerticalAlignment.TOP);
ge0.setValueMap(i18nContacts.person(), i18nContacts.company());
ge0.addChangeHandler(new ChangeHandler() {
@Override
public void onChange(ChangeEvent event) {
// ....
}
});

TextItem ge1 = new TextItem("1", i18nContacts.firstName());
ge1.setTitleStyle("regular");
ge1.setTitleAlign(Alignment.LEFT);
ge1.setTitleVAlign(VerticalAlignment.TOP);

ge6 = new SelectItem("6", i18nContacts.connectedToCompany());
ge6.setTitleStyle("regular");
ge6.setTitleAlign(Alignment.LEFT);
ge6.setTitleVAlign(VerticalAlignment.TOP);
formGeneral.setFields(ge0, ge1, ge2, ge3, ge4, ge5, ge6);

tabLayoutPanel.setTabs(tab1, tab2);

Niels

[Isomorphic]

You probably have external CSS interfering (see FAQ), also, note that FormItem styles are stateful and will have state-specific suffixes attached (such as "Focused" - see default styles in skin).

Then, also note the dynamicForm.titlePrefix and wrapItemTitles properties. Several things are not controlled by CSS because the CSS property is not reliable across all browsers and in all relevant situations.

[NielsBaloe]

Hi,

Thanks for your answer! But, it doesn't help much. I tried removing the gwt theme from the .xml (as said in the FAQ), and that doesn't change anything.

Also, playing with the dynamicForm.titlePrefix doesn't help (if I set the alignment to left there, then on the focus the titles are at the right, while when I set them directly on the formItems, they stay on the left).

So, then again, with or without css (I don't care!!), how do I just simply set the font-sizes on the titles as well as the input-fields? Quite a basic question I guess.

Thanks,
Niels

[Isomorphic]

Changing font works fine in a quick test. Look for simple errors like typos.

Don't really understand what you mean about alignment. There is a titleAlign attribute that can be set on items so that's what to use.

[NielsBaloe]

Hi,

Thanks for your answer. However, the font size is not applied to the input fields themselves. I mean, the titles grow bigger inderdeed, but the text that I enter stays smaller.

I found out I can do that with .setTextBoxStyle, but then the whole style is removed, which results in a html-only ugly inputfield. How can I override the font size only (and not the whole style) for a TextItem and SelectItem, and -even better- gwt-wide?

As said, I don't care whether it's css or an adjustment in the central .html file or similar, or making adjustments to the original skin, or a method call (like .setTitleAlign and .setTextAlign), as long as I can set this font size.

Thanks in advance!,
Niels

[Isomorphic]

The default textBoxStyle (in the skin) includes borders and other CSS that create the appearance of an input field. You can change this system-wide if you want - start with the QuickStart Guide's sections on the skinning system.

[NielsBaloe]

Hi,

Thanks again. So, you're indirectly saying in 5 posts: Sorry, there is no setFontSize and you can't do it in the css either, you must adjust the whole skin to do so. You could have said so in the first place ;) OK, thanks anyway,

Niels

[Isomorphic]

No, incorrect. You can change the CSS definition of the default style by just adding an additional CSS declaration with the new font size, or you can add your own new CSS style from scratch and use setTextBoxStyle() to apply it. Neither involves modifying the skin, but in the latter case you might need to look at the skin to see the original definition so you could copy it.

We're not being indirect, but you may need to run through a tutorial on CSS in order to understand how to use it better. You don't need to know anything about CSS layout or any advanced CSS techniques to use SmartGWT, but you do need to know the basics of declaring styles.

[NielsBaloe]

Hi,

Thanks. Yes, I know what you say, but it doesn't answer my font question. I know you can change the css definition of the default style.... and the rest you say, but it is an indirect answer.

Anyway, creating a new style from scratch is a little bit out of scope just to change the font size. And tracing back the original style for one object (and then adjust it manually with setTextBosStyle() is hell, I tried that for one object but it took too long. So, additional CSS declaration is not at all an option, as you suggest. It's hell to trace it back.

Thanks anyway, it worked out fine.

Best,
Niels

[Isomorphic]

Let's say the default style is "textItem" then the CSS is just:

.textItem { font-size:13px }

Amazing that you're still talking about answers being "indirect" and that it's "hell" to configure this. The reality is that it's as simple as it's possible to make it, but you do have to have an elementary grasp of CSS.

[Jedi-Son]

Hi, to change the font-size of labels, field and other components I coped the content from skin_style.css and pasted in my css file, then I replaced all font-size with 11px to 13px !important