Hi, I have upgraded from 11.2 to the current service released and realised that all my text editor controls have aditional styling applied. Is there any way that I can disable all the styling being applied to the text editors.
I hace tried the following:
$("[data-datatype=Currency]").each(function () { var $this = $(this); var disabled = $this.attr("disabled"); $this.igCurrencyEditor({ theme: "", renderInContainer: true, valueChanged: function () { eval($this.attr("onchange")); } }); $this.removeClass(); $this.parent().removeClass(); $this.attr("disabled", disabled); });
But the you are stuck with the focus and hover styling that gets applied via script.
Thanks in advanced
Regards Christoff
Hi Christoff,
Thank you for posting in the community.
As you have noted, some styling is applied on the texteditor upon actions such as hover and focus. I would therefore suggest that you create a custom there for your editor where empty CSS classes can override the undesired default styling. Instructions on how this can be done along with a list of the more common classes used can be found at:
http://help.infragistics.com/NetAdvantage/jQuery/Current/CLR4.0?page=igTextEditor_Styling_and_Theming.html
Please let me know if this helps.
Hi I have implemented the editors using the custom styles and overriding the applied styles. I am just struggling to get the text controls to look like the default browser's controls with no styling applied to it, e.g. how do I get the text control's borers to look like the normal controls, especially when hovered upon. Is there no way I can just disable all styling being applied?
Thanks Christoff
Hi, I am required to let the browser style the input controls, but overiding the styles does not give me what I need. i.e. in IE the some of my control looks different from the igEditors, and in safari I have the same issue.
Thanks in advance
Christoff
Hi I've managed to remove most of the styling using the following script just after the editors was initialized.
// Strip the applied Infragistics Styling. $(".ui-igedit-field").bind( "buttonClick hideDropDown invalidValue listSelected listSelecting showDropDown spin textChanged valueChanged valueChanging keypress keydown keypress keyup paste cut beforecut mousedown mouseup mousemove mouseover mouseout click focus blur drop select change focusout focusin", function (e) { $(this).removeClass("ui-igedit-field ui-igedit-focus ui-state-focus ui-igedit-hover ui-state-hover"); }); $(".ui-igedit-field").removeClass("ui-igedit-field ui-igedit ui-state-default ui-widget ui-corner-all");
But unfortunetly I'm still stuck on the cutting and pasting. As soon as you cut or paste a value into the editor there is a slight flicker due to the styling that gets applied. Although this does have a huge effect on the performance. Please guys can you maby assist?.
Thanks in advance.
There are 2 other classes which can be removed and which seem to have some effect on the appearance of the editor - ui-igedit-bordercolor and ui-igedit-nullvalue. Please let me know if removing them has the desired effect as I was not able to spot any flashing when copying and pasting to/from the igEditor.
Hey Petar
Thanks for the response I have been struggling with this issue for a while now J
I’ve added the suggested classes to the collection to be removed.
The flicking on the classes occurs on the Numeric and Percentage igEditors, it also seems that when doing the copy and pasting of the values in the editor the operation is ignored or lost on the first try, although when coping or pasting the values a second time the editors are updated.
Thanks allot
Hi Chrisoff,
Thank you for your reply.
Attached is a small sample with an igNumericEditor with stripped styling. Please let me know if the behavior is still being manifested as I was not able to reproduce the matter under Firefox and IE.
Hi christoffelleroux,
Thank you for the sample.
I have been testing this further and it seems there is no way to prevent the .ui-state-focus class as the available events are not fired in time to remove the class. However the class may be overriden by adding a class with the same name:
.ui-state-focus {background: none ;border: 1px solid #F0F0F0;}
Note that this would still cause a minor "flashing" due to the borders being applied. At this point it may be more practical to delete the theme in order to not have any styling applied. Note that our controls are jQuery UI compatible and you can use jQuery ThemeRoller to build custom themes and override the default ones.
http://jqueryui.com/themeroller/
Hi Petar
I've reproduced the issue in the attached sample.
Thank you