Moodle
  1. Moodle
  2. MDL-41775

mod_feedback: Input fields with type "text" and textarea input are shown with a fixed width on bootstrap based themes

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 2.5
    • Fix Version/s: 2.5.4, 2.6
    • Component/s: Feedback
    • Labels:
    • Testing Instructions:
      Hide
      1. Enable the feedback module going to the admin tree -> plugins -> activity modules -> Manage activities
      2. Go to a course and add a Feedback activity
      3. View the activity
      4. Create a new "Longer text answer" question
      5. Choose in the width setting list the value "80".
      6. Do the same with a "Short text answer" question.
      7. Have a look to the result with a) theme "Standard" and b) theme "Clean"
      8. With theme "Standard" all look fine.
      9. With theme "Clean" the width of the textarea and text input correct too.
      Show
      Enable the feedback module going to the admin tree -> plugins -> activity modules -> Manage activities Go to a course and add a Feedback activity View the activity Create a new "Longer text answer" question Choose in the width setting list the value "80". Do the same with a "Short text answer" question. Have a look to the result with a) theme "Standard" and b) theme "Clean" With theme "Standard" all look fine. With theme "Clean" the width of the textarea and text input correct too.
    • Affected Branches:
      MOODLE_25_STABLE
    • Fixed Branches:
      MOODLE_25_STABLE, MOODLE_26_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-41775_master

      Description

      Questions of type "Longer text answer" and "Short text answer" only show a fixed width if the theme is based on bootstrap no matter what with is defined for this question.
      Test to reproduce:

      1. Create a new "Longer text answer" question
      2. Choose in the width setting list the value "80".
      3. Do the same with a "Short text answer" question.
      4. Have a look to the result with a) theme "Standard" and b) theme "Clean"
        With theme "Standard" all look fine.
        With theme "Clean" the width of the textarea and text input is not correct.

        Gliffy Diagrams

          Activity

          Hide
          Andreas Grabs added a comment -

          To resolve this I could just put inline css to force the width.
          My problem now is that the width value defined in css differs from the current width definition. It means actually a width of "80" in the "Longer text answer" question is realized by the cols="80" attribute.
          But in css there has to be a real width in pixel.
          I think there are two ways to solve this.

          1. I change the definition form so that there the width will be defined as pixel. All actually defined feedbacks will be broken (not really broken, but the size will be wron)
          2. I don't change anything at the definition form but I print a style attribute with the current given width x 10 for example. But it could confuse people.
            Maybe there is another way.
            Andreas
          Show
          Andreas Grabs added a comment - To resolve this I could just put inline css to force the width. My problem now is that the width value defined in css differs from the current width definition. It means actually a width of "80" in the "Longer text answer" question is realized by the cols="80" attribute. But in css there has to be a real width in pixel. I think there are two ways to solve this. I change the definition form so that there the width will be defined as pixel. All actually defined feedbacks will be broken (not really broken, but the size will be wron) I don't change anything at the definition form but I print a style attribute with the current given width x 10 for example. But it could confuse people. Maybe there is another way. Andreas
          Hide
          Michael de Raadt added a comment -

          Thanks for working on this, Andreas.

          You might consider using a relative width that adjusts to the screen size.

          Show
          Michael de Raadt added a comment - Thanks for working on this, Andreas. You might consider using a relative width that adjusts to the screen size.
          Hide
          Jon Fila added a comment -

          Where do I enter the css and what can I add that will address this. I'd like to use the relative width that Michael describes.

          Show
          Jon Fila added a comment - Where do I enter the css and what can I add that will address this. I'd like to use the relative width that Michael describes.
          Hide
          Ray Le Couteur added a comment -

          I would also appreciate a resolution for this - the feedback module is very popular in my school and this issue may mean dropping bootstrap based themes altogether.

          Show
          Ray Le Couteur added a comment - I would also appreciate a resolution for this - the feedback module is very popular in my school and this issue may mean dropping bootstrap based themes altogether.
          Hide
          Jon Fila added a comment - - edited

          Maybe this will help you Ray:

          I entered the following into the Custom CSS in Administration>Appearance>Themes>Clean

          textarea

          {width:65%;overflow:auto}

          That seems to have fixed my issue though it still doesn't respect the width I choose for that item. At least the window is now as wide as I wanted it to be.

          Show
          Jon Fila added a comment - - edited Maybe this will help you Ray: I entered the following into the Custom CSS in Administration>Appearance>Themes>Clean textarea {width:65%;overflow:auto} That seems to have fixed my issue though it still doesn't respect the width I choose for that item. At least the window is now as wide as I wanted it to be.
          Hide
          Dan Poltawski added a comment -

          Hi Andreas,

          This issue needs to bee peer reviewed, sending it to waiting for peer review.

          Show
          Dan Poltawski added a comment - Hi Andreas, This issue needs to bee peer reviewed, sending it to waiting for peer review.
          Hide
          Damyon Wiese added a comment - - edited

          Note - I had a quick look at the patch - and setting the width inline like that is not very likely to be accepted (Who says a character is 5 pixels wide).

          Show
          Damyon Wiese added a comment - - edited Note - I had a quick look at the patch - and setting the width inline like that is not very likely to be accepted (Who says a character is 5 pixels wide).
          Hide
          Andreas Grabs added a comment -

          Hi Damyon,
          I know exactly what you mean. But this is a conflict I can't solve. Do you have any suggestion for it?
          The width should be changable in the settings of the question but the values for "cols" or "size" are not accepted anymore because the the width is fixed by the clean theme.
          Best regards
          Andreas

          Show
          Andreas Grabs added a comment - Hi Damyon, I know exactly what you mean. But this is a conflict I can't solve. Do you have any suggestion for it? The width should be changable in the settings of the question but the values for "cols" or "size" are not accepted anymore because the the width is fixed by the clean theme. Best regards Andreas
          Hide
          Damyon Wiese added a comment -

          What about just setting the width to "auto" via some rule in your css that is more specific that the bootstrap css rule?

          Show
          Damyon Wiese added a comment - What about just setting the width to "auto" via some rule in your css that is more specific that the bootstrap css rule?
          Hide
          Andreas Grabs added a comment -

          I don't know. With automatic width you can not define a specific width. All text fields would have the same or am I wrong?
          If a question is set up by the teacher he often wants to define the width of the textfield or textarea.
          Maybe a set of fixed values could be a reason like "small", "normal", "wide". That could be defined with css classes.
          In this case I have to respect old settings while restoring a backup or importing an export.
          What do you think?
          Best regards
          Andreas

          Show
          Andreas Grabs added a comment - I don't know. With automatic width you can not define a specific width. All text fields would have the same or am I wrong? If a question is set up by the teacher he often wants to define the width of the textfield or textarea. Maybe a set of fixed values could be a reason like "small", "normal", "wide". That could be defined with css classes. In this case I have to respect old settings while restoring a backup or importing an export. What do you think? Best regards Andreas
          Hide
          Rossiani Wijaya added a comment -

          Hi Andreas,

          Thank you for working on this issue.

          We are avoiding the use of inline styling as much as possible. The solution should probably be addressed through css.

          As Damyon suggested, setting the width to auto seems to fix the problem. I tested the suggestion by overwriting the input, textarea and uneditable-input definition specifically for feedback module.

          In modules.less

          .path-mod-feedback input,
          .path-mod-feedback textarea,
          .path-mod-feedback .uneditable-input {
              width: auto;
          }
          

          Please feel free to suggest alternative solution.

          Rosie

          Show
          Rossiani Wijaya added a comment - Hi Andreas, Thank you for working on this issue. We are avoiding the use of inline styling as much as possible. The solution should probably be addressed through css. As Damyon suggested, setting the width to auto seems to fix the problem. I tested the suggestion by overwriting the input, textarea and uneditable-input definition specifically for feedback module. In modules.less .path-mod-feedback input, .path-mod-feedback textarea, .path-mod-feedback .uneditable-input { width: auto; } Please feel free to suggest alternative solution. Rosie
          Hide
          Andreas Grabs added a comment -

          Hi Rossiani,

          thank you for your example! But I don't know if it is a solution for the way the textboxes are used. Teachers need the possibility to define the width of textfields by itself. There could be questions with a single character or someone with a complete sentence with many characters as expected answer. Should all textboxes have the same size?
          My suggestion to avoid inline css was the usage of three classes for example.

          .path-mod-feedback input.small,
          .path-mod-feedback textarea.small,
          .path-mod-feedback .uneditable-input.small

          { width: xx; }

          .path-mod-feedback input.normal,
          .path-mod-feedback textarea.normal,
          .path-mod-feedback .uneditable-input.normal

          { width: yy; }

          .path-mod-feedback input.wide,
          .path-mod-feedback textarea.wide,
          .path-mod-feedback .uneditable-input.wide

          { width: zz; }

          So at least the teacher has the possibility to choose between this three options while creating a question.
          But I think that is really much overhead compared with the small piece of inline css.

          Best regards
          Andreas

          Show
          Andreas Grabs added a comment - Hi Rossiani, thank you for your example! But I don't know if it is a solution for the way the textboxes are used. Teachers need the possibility to define the width of textfields by itself. There could be questions with a single character or someone with a complete sentence with many characters as expected answer. Should all textboxes have the same size? My suggestion to avoid inline css was the usage of three classes for example. .path-mod-feedback input.small, .path-mod-feedback textarea.small, .path-mod-feedback .uneditable-input.small { width: xx; } .path-mod-feedback input.normal, .path-mod-feedback textarea.normal, .path-mod-feedback .uneditable-input.normal { width: yy; } .path-mod-feedback input.wide, .path-mod-feedback textarea.wide, .path-mod-feedback .uneditable-input.wide { width: zz; } So at least the teacher has the possibility to choose between this three options while creating a question. But I think that is really much overhead compared with the small piece of inline css. Best regards Andreas
          Hide
          Rossiani Wijaya added a comment - - edited

          Hi Andreas,

          When I tested with width: auto, the text area and input text adjusted the width according to width value. (attaching screenshot with clean theme)

          Perhaps I'm misunderstanding the issue?

          Show
          Rossiani Wijaya added a comment - - edited Hi Andreas, When I tested with width: auto, the text area and input text adjusted the width according to width value. (attaching screenshot with clean theme) Perhaps I'm misunderstanding the issue?
          Hide
          Andreas Grabs added a comment -

          Hi Rossiani,

          ahh, now I got it . I am not the best and fastest with css.

          Best regards
          Andreas

          Show
          Andreas Grabs added a comment - Hi Rossiani, ahh, now I got it . I am not the best and fastest with css. Best regards Andreas
          Hide
          Rossiani Wijaya added a comment -

          Thank you for working on this issue Andreas.

          Show
          Rossiani Wijaya added a comment - Thank you for working on this issue Andreas.
          Hide
          Marina Glancy added a comment -

          Thanks Andreas, integrated in 2.5 and 2.6

          Show
          Marina Glancy added a comment - Thanks Andreas, integrated in 2.5 and 2.6
          Hide
          Rajesh Taneja added a comment -

          Thanks for fixing this Andreas,

          Works as expected, width of textarea and text input change.

          Passing...

          Show
          Rajesh Taneja added a comment - Thanks for fixing this Andreas, Works as expected, width of textarea and text input change. Passing...
          Hide
          Eloy Lafuente (stronk7) added a comment -

          It's Friday, I'm tired so I won't be very imaginative today.

          No matter of that, yes, you did it! Thanks for your collaboration!

          Closing this as fixed!

          Show
          Eloy Lafuente (stronk7) added a comment - It's Friday, I'm tired so I won't be very imaginative today. No matter of that, yes, you did it! Thanks for your collaboration! Closing this as fixed!

            People

            • Votes:
              2 Vote for this issue
              Watchers:
              8 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: