Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

Form items get misaligned when any of the items has Icon set.

$
0
0
gwtVersion = 2.5.1
smartGwtVersion = 4.0p-2013-12-23


1. We are using "FormItem.setIcon()" to show help for some items in the Form. This configuration is dynamic and can be switched off/on at runtime.

Code:

for (FormItem formItem : getFields()) {
                String helpText = this.getHelpTextForForm(helpViewList, formItem.getName());
                if (helpText != null) {
                    formItem.setIcons(createFieldLevelHelpIcon(helpText, 11, 11));
                    formItem.setIconVAlign(VerticalAlignment.CENTER);
                    formItem.setHoverHeight(50);
                    formItem.setHoverWidth(200);
                    formItem.redraw();
                }
            }

FormItemIcon createFieldLevelHelpIcon(String helpTextMsg, int height, int width) {
        FormItemIcon icon = new FormItemIcon();
        icon.setSrc("[APP]/theme/images/help.jpg");
        icon.setPrompt(helpTextMsg);
        icon.setHeight(height);
        icon.setWidth(width);
        icon.setNeverDisable(true);
        icon.setTabIndex(-1);

        return icon;
    }

2. We set up column widths on the Form-level using "Form.setColWidths()" and for each Form Item, we set FormItem.setWidth("100%"). This way width only need to be allocated at Form-level and all items scale accordingly.


Issue we have is, whenever there is an item in the form where help is enabled, rest of the items in form gets misaligned. See attached fields_misaligned.png and fields_aligned.png.

Is there any way to adjust the width of non-help item automatically so that all items in the Form are properly aligned?

Attached Images
File Type: png fields_misaligned.png (7.5 KB)
File Type: png fields_aligned.png (3.4 KB)

Viewing all articles
Browse latest Browse all 4756

Trending Articles