Uploaded image for project: 'Kuali Rice Development'
  1. Kuali Rice Development
  2. KULRICE-12984

The styling of the read-only text area is broken

    Details

    • 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.

        Attachments

          Issue Links

            Activity

            Hide
            erikrath 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
            erikrath 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
            cniesen Claus Niesen added a comment -

            fix? white-space: normal;

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

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

            Show
            tpaegle Tadas Paegle (Inactive) added a comment - added overrides for inputFields pre white-space: normal; word-break: normal;
            Hide
            cniesen 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
            cniesen 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
            mztaylor Martin Taylor (Inactive) added a comment -

            Closing 2.5.1 Development

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

              People

              • Assignee:
                tpaegle Tadas Paegle (Inactive)
                Reporter:
                erikrath 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