[CLOSED] HtmlEditor issue: stylizing

Page 2 of 2 FirstFirst 12
  1. #11
    Thanks for the workaround, Daniil. Using this approach, is there any way to apply different sets of custom rules based on the current theme? Also, do you see it as a limitation of CSS application of Sencha 5.x and/or Ext.Net v3.x?
  2. #12
    Using this approach, is there any way to apply different sets of custom rules based on the current theme?
    You can find out the current theme by Ext.net.ResourceMgr.theme and apply rules accordingly.

    Also, do you see it as a limitation of CSS application of Sencha 5.x and/or Ext.Net v3.x?
    I am not entire sure what exactly could be considered as a limitation. Please elaborate.
  3. #13
    You can find out the current theme by Ext.net.ResourceMgr.theme and apply rules accordingly.
    Thanks!

    By limitation I mean the current inability to effectively define custom CSS rules in a global .css file and having to prescribe them in the client side code. Based on my experience so far, I'm inclined to believe that some controls would be difficult to stylize the conventional way and client side workarounds may be necessary.
  4. #14
    Thank you for clarifying.

    HtmlEditor is quite a specific component. It uses an iframe component. CSS from an iframe's parent page are not being applied to that iframe. It is a limitation/design of HTML/CSS.
    http://stackoverflow.com/questions/2...-css-to-iframe

    That is not a limitation/design of Ext.NET or ExtJS. Also it is not a difference between Ext.NET v1 (ExtJS 3) and Ext.NET v3 (ExtJS 5). HtmlEditor uses an iframe in both. For example, the border styles are not applied in v1 as well. Though, "background-color" and "color" are being applied due to the same JavaScript thing in ExtJS sources that I suggested to you. As for ExtJS 5 I see the same/similar code there, but something else should be changed somewhere to get it working. I didn't investigate it in greater details, because a solution will be limited to these rules anyways:
    this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color');

    So, I decided to provide you with a solution how to apply any rule.

    I agree it would be great to avoid this JavaScript solution. At least, make that solution more general without having to specify exact CSS rules in JavaScript code. There are some suggestions in the StackOverflow discussion that I mentioned above. Seems a possible solution could be defining those required HtmlEditor styling rules (which is going to be applied on its iframe) in a separate .css file. Then attach that .css file to iframe appending a <link> tag into iframe's <head>.

    Based on my experience so far, I'm inclined to believe that some controls would be difficult to stylize the conventional way and client side workarounds may be necessary.
    Please clarify what other controls rather than HtmlEditor?

    Well, I can say that sometimes styling are being hardcoded in JavaScript for various reasons. Though, I would estimate it as, maybe, 5% of overall styling and it is also pretty unlikely these hardcoded styles are going to be customized ever. Yes, there might be issues (especially, with HtmlEditor (though, again, it is not a limitation of Ext.NET or ExtJS)), but personally I consider Ext.NET and ExtJS as very convenient to customize via regular CSS:) If any issues, we are happy to assist.
  5. #15
    Thanks for the clarification, Daniil! It's perhaps my personal perception but applying custom styles has become more difficult and less straight forward in recent versions of Sencha and by extension Ext.Net frameworks. I found it to be more intuitive and less hassle in v1.7 whereby one could expect attributes like Cls or BodyCssClass to work reasonably well. Unfortunately, that's no longer the case in Sencha 5 and probably its immediate predecessor. I'm not sure what to make of the fact that applying CSS rules using the Cls or ReadOnlyCls attributes hasn't produced any meaningful outcome for either HtmlEditor or TextArea (there's a separate thread dedicated to that). Is it an issue that can/will be fixed or is it by design so the only remedy available would be a client side workaround? I didn't mean to sound frustrated, hopefully it's just a steep learning curve to mount and then it will be a downhill from there :)
    Please feel free to close this thread.
  6. #16
    Thank you for sharing your experience. I think it is mostly because of changes in default CSS styles and markup produced by components.

    hopefully it's just a steep learning curve to mount and then it will be a downhill from there :)
    Hopefully!
Page 2 of 2 FirstFirst 12

Similar Threads

  1. [CLOSED] Stylizing FieldLabel and BoxLabel
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jan 14, 2013, 12:52 PM
  2. [CLOSED] Stylizing a menu button Panel
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 07, 2013, 3:49 PM
  3. [CLOSED] Stylizing ToolbarTextItem
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 16, 2012, 3:42 AM
  4. [CLOSED] ListView with HtmlEditor -> HtmlEditor value is null
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 17, 2012, 12:50 AM
  5. HtmlEditor contains
    By okutbay in forum 1.x Help
    Replies: 0
    Last Post: May 06, 2010, 9:37 AM

Tags for this Thread

Posting Permissions