Rounded field corners

[sujaydutta]

Does SmartGWT LGPL support rounded corners for fields (TextItem, SelectItem etc.) See attached screenshot.

[Isomorphic]

Yes.

If you need this for just non-IE browsers and IE9, you can do this via CSS (border-radius plus vendor-specific prefixes - Google for details). In this case IE8 and earlier will just show square borders.

If you need to support IE8 and earlier as well, you need to create images for the rounded edges and create a StretchImg, then place the FormItem over this StretchImg. Although this could be encapsulated as a CanvasItem and used pervasively, we strongly recommend against doing so (won't perform well). Instead, use this technique only for single fields on their own which you want to make very prominent, such as a Search field.

[sujaydutta]

Border-radius is a CSS3 feature and we still need to support IE 8 :(.

Are there any plans to offer this out of the box via convenience methods in the next few months? Rounded corners are used quite a bit in websites these days.

[Isomorphic]

Using CSS3, you still support IE8, you just have a subtly degraded appearance. It's not much different from the unavoidable fact that the browser is far slower.

We will not be providing convenience mechanisms to use the StretchImg-based approach. Again, we would strongly recommend against using this approach for all form fields.

[sujaydutta]

I got the rounded edges to show up for textItem by making the following changes in skin_styles.css/load_skins.js, and rounding the right top/bottom edges for pickers/comboBoxPicker.png and related images.

However the height of the textItem doesn't seem to increase to 21px, it stays at 16px, not sure where its picking up 16px from.

.textItem,
.textItemFocused,
.textItemDisabled,
.textItemError,
.textItemHint {
    height:21px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

/* selectItem */
.selectItemText,
.selectItemTextError,
.selectItemTextFocused,
.selectItemTextDisabled,
.selectItemTextHint {
	height:27px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
    -moz-border-top-left-radius: 4px;
    -moz-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
}

load_skins.js

 if (isc.TextItem) {isc.TextItem.addProperties({
        height:27,
        showFocused: true
    })}

    if (isc.SelectItem) {isc.SelectItem.addProperties({            
        pickListTallBaseStyle:"tallPickListCell",
        textBoxStyle:"selectItemText",
        showFocusedPickerIcon:false,
        pickerIconSrc:"[SKIN]/pickers/comboBoxPicker.png",
        height:27,
        pickerIconWidth:27
    })}
    
    if (isc.ComboBoxItem) {isc.ComboBoxItem.addProperties({
        pickListTallBaseStyle:"tallPickListCell",
        textBoxStyle:"selectItemText",
        showFocusedPickerIcon:false,
        pickerIconSrc:"[SKIN]/pickers/comboBoxPicker.png",
        height:27,
        pickerIconWidth:27
    })}

[Isomorphic]

In general do not try to affect sizes via CSS. The height of a FormItem in general comes from FormItem.height, not CSS, and can be changed via the skinning system - JSON/JavaScripts settings applied in load_skin.js or afterwards via JSNI. See the Skinning Guide for details.

[sujaydutta]

Thanks got it to work, updated the code in post #89 above.