Hi,
We are experiencing an issue with SelectBoxItem and the font-weight it displays after a failed validation in v9.0p_2014-03-21/Pro Deployment - 2014-03-21
We previously had a similar problem that was resolved here:
http://forums.smartclient.com/showthread.php?t=28817
See the included test bed sample code to better understand the current problem and to reproduce the issues we are experiencing.
The problem is only visible in FF & Chrome, and IE > 10.
Any idea on how this could be resolved ?
1. SmartClient versions tested against:
v8.3p_2014-03-20/Pro Deployment - 2014-03-20
v9.0p_2014-03-21/Pro Deployment - 2014-03-21
v9.1p_2014-03-21/Pro Deployment - 2014-03-21
2. Browsers tested against:
IE : 10.0.9200.16721 (WORKS)
IE : 11.0.9600.16521
FIREFOX : 28.0
CHROME : Version 33.0.1750.152
Thanks,
We are experiencing an issue with SelectBoxItem and the font-weight it displays after a failed validation in v9.0p_2014-03-21/Pro Deployment - 2014-03-21
We previously had a similar problem that was resolved here:
http://forums.smartclient.com/showthread.php?t=28817
See the included test bed sample code to better understand the current problem and to reproduce the issues we are experiencing.
The problem is only visible in FF & Chrome, and IE > 10.
Any idea on how this could be resolved ?
1. SmartClient versions tested against:
v8.3p_2014-03-20/Pro Deployment - 2014-03-20
v9.0p_2014-03-21/Pro Deployment - 2014-03-21
v9.1p_2014-03-21/Pro Deployment - 2014-03-21
2. Browsers tested against:
IE : 10.0.9200.16721 (WORKS)
IE : 11.0.9600.16521
FIREFOX : 28.0
CHROME : Version 33.0.1750.152
Code:
<HTML>
<HEAD>
<SCRIPT>
window.isomorphicDir = 'isomorphic/';
</SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Core.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Foundation.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Containers.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Grids.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_Forms.js"></SCRIPT>
<SCRIPT SRC="isomorphic/system/modules/ISC_DataBinding.js"></SCRIPT>
<SCRIPT SRC="isomorphic/skins/SmartClient/load_skin.js"></SCRIPT>
<STYLE type="text/css">
table {font-weight: inherit}
</STYLE>
<TITLE>Investigation - SelectItem hint font changed from initial hint font when validate of required item fails.</TITLE>
</HEAD>
<BODY STYLE="overflow:hidden">
<h1>Bug with SelectItem hint font changed from initial hint font when validate of required item fails.</h1>
<p>
<li><b>SmartClient versions tested against:</b>
<ol>
<li>v9.0p_2014-03-21/Pro Deployment - 2014-03-21</li>
</ol>
</li>
<p>
<p><b>Why we think this is a bug</b>: Everything works as expected in IE, however in FF and Chrome the hint font-weight and value font-weight changes for a required SelectItem after a failed validation. We believe that the hint font-weight and the value font-weight for the SelectItem should remain the same after a failed validation in FF and Chrome also.</p>
<p> The problem is masked until someone overrides the css font-weight for table : ie: table {font-weight: inherit}, as we did for this example</p>
<span>Here are the steps to reproduce the behaviour.</span>
<ol>
<li>Steps to reproduce the problem scenario
<ol>
<li>Note the hint font of the select items</li>
<li>Click 'Validate'</li>
<li>Note that the hint font of the Required SelectItems has changed.</li>
<li>Note that the hint font of the ComboBoxItem has not changed.</li>
<li>Add values to the required selectItems.</li>
<li>Note that the values font have a bold font-weight.</li>
<li>Click the 'Validate' button again.</li>
<li>You'll see that the values font for the SelectItems now has the original values font-weight.</li>
<li>Click 'Clear Values'</li>
<li>You'll see that the hint font for the SelectItems now has the original hint font-weight.</li>
</ol>
</li>
</ol>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p><b>Expected result</b>: The same hint behaviour as the ComboBoxItem. We would expect that the hint text would remain in the hint font-weight, and the values font would remain in the values font-weight, even when validation fails on the required SelectItems.</p>
<SCRIPT>
var comboDataSource = DataSource.create
({
ID : 'comboDataSource',
clientOnly : true,
fields :
[
{ name : 'user_id', type : 'integer' },
{ name : 'name', type : 'text' },
{ name : 'email', type : 'text' }
],
testData :
[
{ 'user_id': 1, 'name': 'Chris Rivers', 'email': 'chris@hipchat.com', 'username' : 'riversc' },
{ 'user_id': 3, 'name': 'Peter Curley', 'email': 'pete@hipchat.com', 'username' : 'curleyp' },
{ 'user_id': 5, 'name': 'Garret Heaton', 'email': 'garret@hipchat.com', 'username' : 'heatong' }
]
});
var textItem = {
name : 'textItem',
title: 'TextItem',
editorType : 'TextItem',
required : true
};
var valueMap = {};
valueMap['Key1'] = 'Value1';
valueMap['Key2'] = 'Value2';
valueMap['Key3'] = 'Value3';
var select1 = {
name: 'select1',
title: 'SelectItem (Not Required)',
editorType : 'select',
hint : 'Select a value',
showHintInField : true,
titleOrientation : 'top', // Orientation does not matter
valueMap : valueMap
};
var select2 = {
name: 'select2',
title: 'SelectItem (Bold hint & values)',
editorType : 'select',
hint : 'Select a value',
showHintInField : true,
//titleOrientation : 'top', // Orientation does not matter
required : true, //Needed to demonstrate bold bug
valueMap : valueMap
};
var select3 = {
name : 'select3',
title: 'SelectItem (Bold hint & values)',
editorType : 'select',
hint : 'Select a value',
showHintInField : true,
titleOrientation : 'top', // Orientation does not matter
required : true, //Needed to demonstrate bold bug
valueMap : valueMap
};
var comboBoxItem = {
name: 'comboBoxItem',
title : 'ComboBoxItem works as expected',
editorType : 'ComboBoxItem',
displayField : 'name',
valueField : 'username',
addUnknownValues : false,
hint : 'Select a value',
showHintInField : true,
titleOrientation : 'top',
required : true,
optionDataSource : 'comboDataSource',
sortField : 'name',
textMatchStyle : 'substring',
pickListWidth : 550,
pickListHeight : 245,
pickListFields :
[
{ name : 'user_id', width : '10%', title : 'User id' },
{ name : 'name', width : '40%', title : 'Name' },
{ name : 'email', width : '50%', title : 'Email' }
]
};
var valuesManager = ValuesManager.create();
var clearValuesButtonItem = {
name : 'ButtonItem',
editorType : 'ButtonItem',
width : 95,
startRow : false,
endRow : false,
vAlign : 'bottom',
tabIndex : 998,
title : 'Clear Values',
click : 'valuesManager.resetValues();'
};
var validateButtonItem = {
name : 'ButtonItem',
editorType : 'ButtonItem',
width : 80,
startRow : false,
endRow : false,
vAlign : 'bottom',
tabIndex : 998,
title : 'Validate',
click : 'valuesManager.validate();'
};
var dynamicForm = DynamicForm.create({
width: 500,
valuesManager : valuesManager,
fields:
[
textItem,
{
type : 'SpacerItem'
},
select1,
{
type : 'SpacerItem'
},
select2,
{
type : 'SpacerItem'
},
select3,
{
type : 'SpacerItem'
},
comboBoxItem,
clearValuesButtonItem,
validateButtonItem
]
});
VLayout.create
({
width : 730,
members :
[
VLayout.create({ height : 520 }), // Bogus layout to create room for our intro and explanation,
VLayout.create
({
members :
[
dynamicForm
]
})
]
});
dynamicForm.focusInItem('textItem');
</SCRIPT>
</BODY>
</HTML>