Currently, selecting a textfield item in an editable grid causes the heights of selected field and its row to increase, is there a way to prevent this from happening?
This is skin specific, and not really preventable unless all controls are re-skinned to fit the default cellHeight of the grid, or the default cellHeight of the grid is increased.
Thanks for the prompt response.
I did what you suggested; I reduced the size of my textItem and noticed the row not increasing as wide as it did; however, clicking in the textfield still causes padding of 2px being added to the top and bottom of the textItem. What causes this?
I modified my skins such that my textItem (disabled, focused etc.) have height of 14px and margin 0px. And my grid cells (Selected, SelectedOver, SelectedDark, etc.) have height 16px and padding of 0px and to no avail.
What skin and how much have you customized already?
The 2px you’re seeing is most likely padding on the textItem, Firefox will tell you for sure.
I am modifying “Enterprise” theme programmatic settings (load_skin.js) and “Enterprise” theme CSS styles (skin_styles.css).
The customization that I have done was for the appearance of grid and menu. For the grid, I made changes to background color, font style etc. But as I mentioned in my previous posting I did try setting padding to 0px for my grid cells, and I still noticed the issue.
Can we get an update on this ticket please? Are these the correct files to modify?
Still need to follow the advice in the last update - remove any padding from the TextItem. What may be confusing you is that removing padding from the cell style is not the same as removing it from the TextItem, so you have not yet removed all padding.
If the space persists, you can use Firebug’s “inspect” capability to see where it’s coming from.
Again, thanks for the quick response.
I did follow the advice in last update and removed the padding from the TextItem by setting padding:0px; I removed padding from the base property as well as specific properties (e.g. textItemFocused).
I am currently using IE Developers Tool which is similar to Firebug which indicated that textItem and its parent cell have no top/bottom padding yet the size of cell grew by 4px.
As mentioned above, the height of grid record and TextItem are 16px; clicking in the textfield causes grid record to increase to 20px.
Snippet of load_skin.js indicating how properties are being set follows:
//----------------------------------------
// 12) ListGrids
//----------------------------------------
if (isc.ListGrid) {
isc.ListGrid.addProperties({
editFailedCSSText:"color:FF6347;",
errorIconSrc : "[SKINIMG]actions/exclamation.png",
tallBaseStyle: "tallCell",
// Render header buttons out as StretchImgButtons
headerButtonConstructor:"ImgButton",
sorterConstructor:"ImgButton",
headerMenuButtonConstructor:"ImgButton",
sortAscendingImage:{src:"[SKIN]sort_ascending.png", width:9, height:6},
sortDescendingImage:{src:"[SKIN]sort_descending.png", width:9, height:6},
backgroundColor:null, bodyBackgroundColor:null,
headerHeight:20,
summaryRowHeight:17,
cellHeight:16,
headerBackgroundColor:null,
headerBarStyle:"headerBar",
headerBaseStyle:"headerButton", // bgcolor tint and borders
headerTitleStyle:"headerTitle",
bodyStyleName:"gridBody",
alternateBodyStyleName:"alternateGridBody",
// showHeaderMenuButton:true,
//----------------------------------------
// 14) Form controls
//----------------------------------------
if (isc.FormItem) {isc.FormItem.addProperties({
defaultIconSrc:"[SKIN]/DynamicForm/default_formItem_icon.png",
errorIconSrc : "[SKINIMG]actions/exclamation.png",
iconHeight:18,
iconWidth:18,
iconVAlign:"middle"
})}
if (isc.PickTreeItem) {isc.PickTreeItem.addProperties({
buttonDefaults: {
height:21
}
})}
if (isc.TextItem) {isc.TextItem.addProperties({
height:16,
padding:0,
margin:0,
showFocused: true
})}
if (isc.TextAreaItem) {isc.TextAreaItem.addProperties({
showFocused: true
})}
if (isc.SelectItem) {isc.SelectItem.addProperties({
textBoxStyle:"selectItemText",
showFocusedPickerIcon:false,
pickerIconSrc:"[SKIN]/pickers/comboBoxPicker16.png",
margin:0,
height:16,
padding:0,
pickerIconWidth:13
})}
if (isc.ComboBoxItem) {isc.ComboBoxItem.addProperties({
textBoxStyle:"selectItemText",
showFocusedPickerIcon:false,
pickerIconSrc:"[SKIN]/pickers/comboBoxPicker.png",
height:16,
margin:0,
pickerIconWidth:13
})}
// used by SelectItem and ComboBoxItem for picklist
if (isc.ScrollingMenu) {isc.ScrollingMenu.addProperties({
showShadow:false,
shadowDepth:5
})}
Snippet of skin_styles.css indicating how properties are being set follows:
/* text-based items common props */
.textItem,
.textItemFocused,
.textItemDisabled,
.textItemError,
.textItemHint,
.selectItemText,
.selectItemTextError,
.selectItemTextFocused,
.selectItemTextDisabled,
.selectItemTextHint {
padding:0px;
/*border:1px solid #aaacb2;*/
border:0px;
background:#FFFFFF;
color:#333333;
}
.textItem {
/**border-top:1px solid #abadb3;
border-left:1px solid #dbdfe5;
border-right:1px solid #dbdfe5;
border-bottom:1px solid #dbdfe5;*/
padding:0px;
}
.textItemDisabled,
.selectItemTextDisabled {
color:#666666;
background-color:#FFFFFF;
border:1px solid #A6ABB4;
padding:0px;
}
.textItemHint,
.selectItemTextHint {
color:#204268;
padding:0px;
}
/* selectItem */
.selectItemTextFocused {
color:#333333;
-moz-outline-offset:-1;
border:1px solid #5678ac;
padding:0px;
}
.textItemFocused {
color:#333333;
margin:0px;
/*border:1 solid black;*/
padding:0px;
/* -moz-outline-offset:-1;
border-top:1px solid #5678ac;
border-left:1px solid #bccde6;
border-right:1px solid #afc6e2;
border-bottom:1px solid #c0d7ec;*/
}
.selectItemTextFocused {
color:#333333;
padding:0px;
-moz-outline-offset:-1;
border-top:1px solid #5678ac;
border-left:1px solid #bccde6;
border-right:1px solid #afc6e2;
border-bottom:1px solid #c0d7ec;
padding:0px;
}
.selectItemText,
.selectItemTextError,
.selectItemTextFocused,
.selectItemTextDisabled {
border-right:0px none;
padding:0px;
}
.selectItemPickerIcon,
.selectItemPickerIconFocused,
.selectItemPickerIconDisabled,
.selectItemPickerIconError {
padding:0px;
}
/*------------------------------------------------------------
listGrid.baseStyle
------------------------------------------------------------*/
.cell,
.cellDark,
.cellOver,
.cellOverDark,
.cellSelected,
.cellSelectedDark,
.cellSelectedOver,
.cellSelectedOverDark,
.cellDisabled,
.cellDisabledDark,
.editedCell,
.editableDark,
.editedCellOver,
.editedCellOverDark,
.editedCellSelected,
.editedCellSelectedDark,
.editedCellSelectedOver,
.editedCellSelectedOverDark,
.editedCellDisabled,
.editedCellDisabledDark,
.editable,
.editableDark,
.editableOver,
.editableOverDark,
.editableSelected,
.editableSelectedDark,
.editableSelectedOver,
.editableSelectedOverDark,
.editableDisabled,
.editableDisabledDark,
.tallCell,
.tallCellDark,
.tallCellOver,
.tallCellOverDark,
.tallCellSelected,
.tallCellSelectedDark,
.tallCellSelectedOver,
.tallCellSelectedOverDark,
.tallCellDisabled,
.tallCellDisabledDark,
.gridSummaryCell,
.gridSummaryCellDisabled,
.recordSummaryCell,
.recordSummaryCellDark,
.recordSummaryCellOver,
.recordSummaryCellOverDark,
.recordSummaryCellSelected,
.recordSummaryCellSelectedDark,
.recordSummaryCellSelectedOver,
.recordSummaryCellSelectedOverDark,
.recordSummaryCellDisabled,
.recordSummaryCellDisabledDark,
.expansionCellCell,
.expansionCellCellDark,
.expansionCellCellOver,
.expansionCellCellOverDark,
.expansionCellCellSelected,
.expansionCellCellSelectedDark,
.expansionCellCellSelectedOver,
.expansionCellCellSelectedOverDark,
.expansionCellCellDisabled,
.expansionCellCellDisabledDark,
.groupNode {
font-family:Tahoma,Verdana,Arial; font-size:11px; text-overflow:hidden;
color:#333333;
background-color:#FFFFCB;
/*border-right: #EEEEEE 1px solid;
border-bottom: #EEEEEE 1px solid;*/
padding-left:2px;
}
By the way, is there a way to have the TextField not conformed to the cell of the grid??
OK, how important is it to your application to try to cram editors into 16 pixel rows? That has lots of consequences, down to different font choices, and it’s going to result in an interface that is too small to use on higher resolution screens, especially laptops.
Our entire web application is fixed pixel size so we don’t have any concerns with poor viewing for users with high-res screens. Our application currently uses text boxes that are 16 pixels in height when in-line editing within grids, so cramming is not an issue.
The grid row height is standard across our entire application, so we cannot increase the row height for our Smart GWT grids. Our standards department will not allow us to have a new grid that doesn’t conform to our current specs regarding grid height (we had a tough enough time getting them to allow non-anti-aliased text).
The issue is that anytime we render a TextField within a cell of the grid it causes the grid height to adjust and it simply looks sloppy. Is it not possible to achieve a 16 pixel TextField within a grid cell without causing the row height to adjust? If so, could we alternately overlay a TextField over a grid cell (but not in the grid cell), when the user clicks the cell?
16px height is achievable, but realize, every element in the row must be less 16px or less or the row will expand. So you can’t just look at an individual cell containing a textItem where the textItem is only 16px - look at everything in order to identify the tallest item, which might be something like a datePicker icon - and set heights pervasively.
This is pretty easy with Firebug.
Our application is designed to work in IE, but is not compatible with Firefox, so unfortunately we can’t use Firebug. We can use the IE developer tool which achieves something similar.
I’ve gone through the skin_styles.css and load_skin.js files and confirmed that none of the components are greater than 16px in height, but we’re still seeing the issue.
I’ve attached two screen captures of what we’re seeing with the IE development tool. The first shows the height of the text box before it is selected. It has a height of 14px but no padding. The 2nd once the text box is selected, the height increases to 18 but still doesn’t have padding.
Since none of the components are greater than 16px… why are we seeing a height of 18px?
Don’t overfocus on the text item as such. 2px of space outside of the textItem, as shown in one of your shots, indicates either that something else in the row is taller and is forcing the whole row to be taller, or that there is external padding in the cell (eg listGrid.cellPadding or padding in the cell style).
Sorry not to be of much help, but you’re using weak tools and you haven’t provided a test case we could look at. You can always take advantage of consulting services if what you want is a custom skin where all elements have been redesigned to fit 16px rows. This could make sense partly because if you begin to use other controls (like SelectItems and DateItems) there are a bunch of media files that aren’t the right size either, and will be scrunched.
Before we spend more time spinning our wheels on this issue… I’ve just gone through numerous editable grid examples in the Showcase: Editing, Grid All Editors, Edit by Cell, Enter New Rows, Mass Update, Modal Editing, Data Validation, etc. In all of these grids, anytime an editable field is selected, the height of the entire row shifts. Do you have any examples where this behavior does not occur? If not, could you create one?
My concern is that this behavior is native to the ListGrid/editors via the Javascript that the Smart GWT compiler generates and is not a consequence of an object in the row being taller than the row itself (again, we’ve gone through and made sure every object is not greater than 16px).
You’ve gone through and made sure all the settings you’ve identified are 16px and padding/margins you’re aware of are zero’d out. What we’re referring to is looking at the DOM.
As far as some kind of special JavaScript limit, what the JavaScript does is produce a DOM. In Firebug at least, everything the JavaScript could be doing to the DOM would show up under inspection, so you could see where the size is coming from. If you could use Firebug, you could see that there are no settings on the row that would raise the height beyond the configured listGrid.cellHeight, it’s just happening because something inside is too large.