How can i reduce the size of the 'X' (cancel) icon which is seen during editing a grid cell with virtualization set to true? The size of the icon changes with grid height. This is a bad experience for users when there is a single row present in a grid and they try to edit it.
Attached a screenshot for your reference.
Thanks, Wajid.
Hello Wajid,
This is very strange issue. I would suggest you to check what styles are applied to that image and change them to get the desired look.
Hope this helps.
I did not apply any styles yet. This is seen with the default styles of IG. Attached a sample for your reference.
Thanks,
Wajid.
I can’t see any styles in the provided sample. I added the required css files and it worked as expected. I am attaching the modified sample. Let me know if you have any questions.
Hi,
I could reproduce the issue - it is caused by IE - it adds a X icon in every active textbox and the icon takes the full height of the input field. So you should check your grid row's height as it seems to be too big.
Thanks for taking a look Nikolay.
I did set the avg. row height to be 50px when the grid's height is 200px. Problem is when there are one or two rows in the grid since these two occupy the complete 200px taking 100px each. Is there a way i can fix the row height to 50px though the grid has a single row in it?
One way to solve this issue is to completely get rid of the clear button which is available in the IE 10 for the input fields. This can be achieved by using the IE 10 specific CSS pseudo class: "::-ms-clear".
Here is how to do it for the igGrid only by the id of the grid placeholder(grid1):
<style type="text/css">
#grid1::-ms-clear {
display: none;
}
</style>
Here is how to do it for the page:
::-ms-clear {
Hope this helps,
Martin Pavlov
Infragistics, Inc.