Details

    • Similar issues:
      KULRICE-11551text areas have a grey box around them when they are read only
      KULRICE-11816Expanded Text Area broken
      KULRICE-13007pre tag styling for readOnly text area content looks terrible
      KULRICE-13025UXI subtask: pre tag styling for readOnly text area content looks terrible
      KULRICE-13014Create KRAD widget to handle read-only KIM inquiries
      KULRICE-9332Spaces are replaced by ? in the content of a repeated text area component
      KULRICE-10833Implement Text Styles as defined in KS Style Guide
      KULRICE-9948Pre tag around read only values for multi-line display causes extra padding
      KULRICE-8628Document read-only list display
      KULRICE-5138Add pop up text area option for TextAreas and Text input fields
    • Rice Team:
      Framework
    • Rice Module:
      KRAD
    • Application Requirement:
      KC, KS
    • Sprint:
      Framework 2.5.1 Sprint 3
    • KAI Review Status:
      Not Required
    • KTI Review Status:
      Not Required
    • Code Review Status:
      Not Required
    • Include in Release Notes?:
      Yes
    • Story Points:
      1

      Description

      The styling of the read-only text area is really off. We are seeing the following issues in Curriculum Management:

      • Text style is broken
      • Text is wrapping in the middle of words.

      This seems to be related to the text being styled using <pre> tags and the spaces are converted to " " (conversations related to this can be found in the comments) The correct display would be to have the text appear styled as regular paragraph text within the collection/table with words wrapping correctly.

      We have two examples of this issue in the Create Course section of Curriculum Management, the first is in the Supporting Documents section, which does not have a workaround, and Comments, which has a workaround that was implemented by Chong:

      1. Supporting Documents (no work-around) http://www.screencast.com/t/KkLY58tB2R
      2. Comments (work-around) http://www.screencast.com/t/vc67eXqm8

      Another good sample of this issue is the Note and Attachment section of documents. In KRAD the note is displayed in one line because of the same reasons.

        Issue Links

          Activity

          Hide
          Erik Rath (Inactive) added a comment - - edited
          On 6/18/14, at 4:59 PM, Erik Rath wrote:
          > Hey UI Devs! We are running into an issue with our comments wrapping mid-word ( http://www.screencast.com/t/mRCYj6F4vVj)that is being tackled with this JIRA:   
          https://jira.kuali.org/browse/KSCM-2266
           
          
          On 6/19/14, at 6:26 AM, Chris Basham wrote:
          > @Erik I don't think `word-wrap`, `white-space`, or `text-wrap` CSS properties would cause that.
          > http://www.w3schools.com/CSSref/css3_pr_word-wrap.asp 
          > http://www.w3schools.com/CSSref/pr_text_white-space.asp 
          > http://www.w3schools.com/cssref/css3_pr_text-wrap.asp 
          > 
          > But I could replicate it with `word-break`. `word-break: keep-all` would probably force the text to flow as you want.
          > http://www.w3schools.com/CSSref/css3_pr_word-break.asp 
          > 
          > The other possibility is that perhaps there's a space between `let'` and `s`.
          
          On 6/19/14, at 8:47 AM, Amanda Ford wrote:
          > @Erik, re your question about word breaks. It looks like your comments are using the pre tag which is set to word-break: break-all;  and word-wrap: break-word; which will cause the breaks.
          
          On 6/19/14, at 8:54 AM, Amanda Ford wrote:
          > Wait, there's more. The comment code looks like this:
          > Some&nbsp;features&nbsp;of&nbsp;AngularJS,&nbsp;in&nbsp;particular&nbsp;the&nbsp;binding&nbsp;functionality,&nbsp;will&nbsp;enhance&nbsp;KRAD&nbsp;nicely.&nbsp;Currently&nbsp;to&nbsp;do&nbsp;'partial'&nbsp;updates&nbsp;of&nbsp;the&nbsp;page&nbsp;you&nbsp;either&nbsp;do&nbsp;a&nbsp;component&nbsp;refresh&nbsp;or&nbsp;need&nbsp;to&nbsp;manually&nbsp;update&nbsp;the&nbsp;DOM&nbsp;with&nbsp;custom&nbsp;script.
          > 
          > So, it's all only long line. You'll have to look at saving the comments with actual spaces rather than &nbsp; A hack would be to replace &nbsp; with a space using JS.
          
          Show
          Erik Rath (Inactive) added a comment - - edited On 6/18/14, at 4:59 PM, Erik Rath wrote: > Hey UI Devs! We are running into an issue with our comments wrapping mid-word ( http://www.screencast.com/t/mRCYj6F4vVj)that is being tackled with this JIRA: https://jira.kuali.org/browse/KSCM-2266 On 6/19/14, at 6:26 AM, Chris Basham wrote: > @Erik I don't think `word-wrap`, `white-space`, or `text-wrap` CSS properties would cause that. > http://www.w3schools.com/CSSref/css3_pr_word-wrap.asp > http://www.w3schools.com/CSSref/pr_text_white-space.asp > http://www.w3schools.com/cssref/css3_pr_text-wrap.asp > > But I could replicate it with `word-break`. `word-break: keep-all` would probably force the text to flow as you want. > http://www.w3schools.com/CSSref/css3_pr_word-break.asp > > The other possibility is that perhaps there's a space between `let'` and `s`. On 6/19/14, at 8:47 AM, Amanda Ford wrote: > @Erik, re your question about word breaks. It looks like your comments are using the pre tag which is set to word-break: break-all; and word-wrap: break-word; which will cause the breaks. On 6/19/14, at 8:54 AM, Amanda Ford wrote: > Wait, there's more. The comment code looks like this: > Some&nbsp;features&nbsp;of&nbsp;AngularJS,&nbsp;in&nbsp;particular&nbsp;the&nbsp;binding&nbsp;functionality,&nbsp;will&nbsp;enhance&nbsp;KRAD&nbsp;nicely.&nbsp;Currently&nbsp;to&nbsp;do&nbsp;'partial'&nbsp;updates&nbsp;of&nbsp;the&nbsp;page&nbsp;you&nbsp;either&nbsp;do&nbsp;a&nbsp;component&nbsp;refresh&nbsp;or&nbsp;need&nbsp;to&nbsp;manually&nbsp;update&nbsp;the&nbsp;DOM&nbsp;with&nbsp;custom&nbsp;script. > > So, it's all only long line. You'll have to look at saving the comments with actual spaces rather than &nbsp; A hack would be to replace &nbsp; with a space using JS.
          Hide
          Claus Niesen added a comment -

          fix? white-space: normal;

          Show
          Claus Niesen added a comment - fix? white-space: normal;
          Hide
          Tadas Paegle (Inactive) added a comment -

          added overrides for inputFields pre
          white-space: normal;
          word-break: normal;

          Show
          Tadas Paegle (Inactive) added a comment - added overrides for inputFields pre white-space: normal; word-break: normal;
          Hide
          Claus Niesen added a comment -

          FYI, there is another KULRICE-13025 in progress by UIX that just had a styling commit for the <pre> tag.
          https://fisheye.kuali.org/changelog/rice?cs=48981
          Just a heads up that you don't step on each other toes.

          Show
          Claus Niesen added a comment - FYI, there is another KULRICE-13025 in progress by UIX that just had a styling commit for the <pre> tag. https://fisheye.kuali.org/changelog/rice?cs=48981 Just a heads up that you don't step on each other toes.
          Hide
          Martin Taylor (Inactive) added a comment -

          Closing 2.5.1 Development

          Show
          Martin Taylor (Inactive) added a comment - Closing 2.5.1 Development

            People

            • Assignee:
              Tadas Paegle (Inactive)
              Reporter:
              Erik Rath (Inactive)
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 2 hours
                2h
                Remaining:
                Remaining Estimate - 2 hours
                2h
                Logged:
                Time Spent - Not Specified
                Not Specified

                  Agile

                    Structure Helper Panel