26
Views
10
Comments
Solved
Scrollbar not working when text area field is disabled

Hi,

I have textarea fields with a maximum length of 2000 characters. These fields are enabled or disabled based on a role change. When the textarea becomes disabled, scrolling within the field does not work.

I applied the following CSS:

disable-textareat-scroll .form-control[data-textarea][disabled] {    pointer-events: unset;}

This works when I change the role from the menu. However, if I refresh the page after changing the role, the scrolling no longer works.

Can someone please suggest a solution?

Thanks in advance!

2025-01-24 02-53-49
Mustafa Emad Shaker
Solution

Hi @Shivangi Thakur,

I am not sure if you have an issue of making the textarea scrollable or setting it disabled with scroll.

However, it is setting scroll on textarea, I may suggest an alternate option, that may solve your issue.

You can set the textarea to "readonly" instead of "disabled". You can do that by adding attribute to the textarea with name "readonly", and use the disable flag to set and unset it.

Make sure to set the "Enabled" property to "True.

You can find a demo attached to this answer.

If it is something else, can you explain more...

Regards,
Mustafa.

TextareaScroll.oml
2019-03-12 12-28-20
Shivangi Thakur

Hi,

I will try this.


Thanks!

2019-03-12 12-28-20
Shivangi Thakur

This works but what I need is the user should know that the field is disabled, it should be greyed out, like it works in normal scenarios. 

2025-01-24 02-53-49
Mustafa Emad Shaker
Solution

The fix is simple, all we need to do is copy the style of disabled textarea to the readonly one.

Disabled (OutSystemsUI)

  1. .form-control[data-textarea][disabled]{
  2.   background-color:var(--color-neutral-2);
  3.   border:var(--border-size-s) solid var(--color-neutral-4);
  4.   color:var(--color-neutral-6);
  5. }

Readonly (Your Style Sheet)

  1. .form-control[data-textarea][readonly]{
  2.   background-color:var(--color-neutral-2);
  3.   border:var(--border-size-s) solid var(--color-neutral-4);
  4.   color:var(--color-neutral-6);
  5. }

*You can find an updated version of the oml file, attached here.

TextareaScroll.oml
2025-01-24 02-53-49
Mustafa Emad Shaker
Solution

The fix is simple, all we need to do is copy the style of disabled textarea to the readonly one.

Disabled (OutSystemsUI)

  1. .form-control[data-textarea][disabled]{
  2.   background-color:var(--color-neutral-2);
  3.   border:var(--border-size-s) solid var(--color-neutral-4);
  4.   color:var(--color-neutral-6);
  5. }

Readonly (Your Style Sheet)

  1. .form-control[data-textarea][readonly]{
  2.   background-color:var(--color-neutral-2);
  3.   border:var(--border-size-s) solid var(--color-neutral-4);
  4.   color:var(--color-neutral-6);
  5. }

*You can find an updated version of the oml file, attached here.

TextareaScroll.oml
2019-01-07 16-04-16
Siya
 
MVP

@Shivangi Thakur : I did a quick demo by setting the Enabled property of the 'text area' and I see its behaving normally - there is a scroll irrespective or disabled / enabled. No CSS is modified. Can you try that route ?

2019-03-12 12-28-20
Shivangi Thakur

Hi Siya,

The enabled property of the text area is controlled based on the variable. It cant be set to true directly.

Let me know if I misunderstoood.

Thanks

Shivangi

2019-01-07 16-04-16
Siya
 
MVP

Enabled property can be either True / False or a variable. 


2019-03-12 12-28-20
Shivangi Thakur

Its already like this and doesn't working.

2019-01-07 16-04-16
Siya
 
MVP

Thanks for sharing the update. Not sure why this is behaving differently. Can you try a sample application in your personal environment to see if its different ? 

I am not sure this could be due to a different version of OutSystems UI. 

Some discussion about the issue you discussed you can find at https://www.outsystems.com/forums/discussion/83729/how-to-enable-scroll-bars-for-textarea-when-it-is-disabled/

What @Mustafa Emad Shaker is also a good option and you need to apply an additional CSS to make it looks like read only.

2019-03-12 12-28-20
Shivangi Thakur

Thanks for all your suggestion.

I tried in personal and compared the css for both environments then I found this is missing css 

2025-01-24 02-53-49
Mustafa Emad Shaker
Solution

Hi @Shivangi Thakur,

I am not sure if you have an issue of making the textarea scrollable or setting it disabled with scroll.

However, it is setting scroll on textarea, I may suggest an alternate option, that may solve your issue.

You can set the textarea to "readonly" instead of "disabled". You can do that by adding attribute to the textarea with name "readonly", and use the disable flag to set and unset it.

Make sure to set the "Enabled" property to "True.

You can find a demo attached to this answer.

If it is something else, can you explain more...

Regards,
Mustafa.

TextareaScroll.oml
2019-03-12 12-28-20
Shivangi Thakur

Hi,

I will try this.


Thanks!

2019-03-12 12-28-20
Shivangi Thakur

This works but what I need is the user should know that the field is disabled, it should be greyed out, like it works in normal scenarios. 

2025-01-24 02-53-49
Mustafa Emad Shaker
Solution

The fix is simple, all we need to do is copy the style of disabled textarea to the readonly one.

Disabled (OutSystemsUI)

  1. .form-control[data-textarea][disabled]{
  2.   background-color:var(--color-neutral-2);
  3.   border:var(--border-size-s) solid var(--color-neutral-4);
  4.   color:var(--color-neutral-6);
  5. }

Readonly (Your Style Sheet)

  1. .form-control[data-textarea][readonly]{
  2.   background-color:var(--color-neutral-2);
  3.   border:var(--border-size-s) solid var(--color-neutral-4);
  4.   color:var(--color-neutral-6);
  5. }

*You can find an updated version of the oml file, attached here.

TextareaScroll.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.