June 28, 2015

How to make Open UI textarea fields flexible in IE?

As you would know that IE doesn't have flexible textarea even in version 11. When rest of all modern browser allow to open drag one corner of the text area to change its size, IE doesn't let user to change size of elements because of Trident layout engine???


Fixed size multiline fields in IE
Because of this limitation Siebel Open UI users suffer big time. All the multiline textarea fields in open UI are fixed size and there is no way to pop them up as in HI or expand them. read more. 

Flexible multiline fields in chrome
There are many jquery based plugins available for this problem however all of them needs to maintained and lacks in one thing or the other, probably you will end up using one of those plugins at the end. However If someone looking for simple straightforward stop gap solution, then you can use jQueryUI Resizable function to make the textareas flexible just like chrome or firefox.

To implement in simply add following one line in postload.js file on the web server.

 $("textarea").resizable(); 

This will make all the textarea controls which are used for multiline field flexible and show tiny blue cue to expand or decrease the size of element and mimic chrome or firefox textarea elements.


Hope it helps.


13 comments :

  1. Can you be more specific on where this line has to be added in postload.js file. It is not working for me. I have tried in dedicated client

    ReplyDelete
  2. Sandeep, you can add this just bellow the console. Log command. Or try executing this command from console. You should get the same result.

    ReplyDelete
    Replies
    1. after applying the solution given, we could get the drag able functionality working, but the icon to select and drag is missing. can you help us?

      Delete
    2. Which siebel version you are using? there might be some css file missing which could be causing this.
      Check if you have a div envelop around the text area and another div after text area for icon, if it is there try changing the color properties of it using developer toolbar.

      Delete
  3. This is really Superbbb!!!!!!!!!!!! Could you let us know how this happened................

    ReplyDelete
    Replies
    1. This is just a jquery UI widget. To view all widgets refer : https://jqueryui.com/droppable/

      Delete
  4. Replies
    1. Hello Jim,

      We had the same issue with OpenUI 2015. I have added the line of code " $("textarea").resizable();: described in postload.js file, but it is not working in IE11. Is there any additional code/files to be needed inorder to make this working? I have also observed after adding this line of code the drag icon is disappeared in Chrome and Firefox browser. Can you please advise is missing?

      Delete
    2. Hi Anonymous, This could be due to different css files used in IP2015. As I can see that Blue cue is an image from IP2013 and image is sourced from
      \23030\scripts\3rdParty\jquery-ui\current\themes\redmond\images\

      please verify your image.

      you can also try including following in your css, this should make cue come out.

      .ui-icon, .ui-widget-content .ui-icon {
      border-right: 4px solid red;
      border-bottom: 4px solid red;
      }

      let me know how it goes.

      Delete
  5. Hello Jim,

    Thank you very much for response. I have added the code in CSS and it worked. With this code it is working only in form applet. Is there solution to make it work in list applets? Also the arrow on bottom corner is little away from the text area field, also the same arrows are is appearing in the navigation arrows on the list applet. Do you have any suggestions for these?

    Thank you again
    Kris

    ReplyDelete
  6. Kris, this solution is only compatible with form applets. You can try CSS tricks for aligning the cue a little but closer to textarea.

    ReplyDelete