WTextArea doesn't show scrollbars when inside a layout with Bootstrap 5
Added by Stefan Bn about 2 years ago
Hello Wt Team,
I migrated my Wt App to Bootstrap 5 and noticed that all my WTextArea don't show scrollbars anymore. I did a little research and I see that overflow: hidden occurs in the browser HTML/div when the WTextArea is inside a Layout:
<textarea id="o1y6jucq" cols="20" name="o1y6jucq" rows="5" class="form-control" style="margin: 3px 0px; flex: 1 1 auto; overflow: hidden; ">
Is this something by design or a bug? How could this be prevented to have scrollbars in WTextArea?
I created a little sample application, that shows this behavior. When you change Bootstrap 5 to 3 in this sample, then scrollbars are back to normal.
Thanks,
Stefan
Replies (6)
RE: WTextArea doesn't show scrollbars when inside a layout with Bootstrap 5 - Added by Stefan Bn about 2 years ago
Additionally: There is also no way of scrolling inside the WTextArea using the mouse wheel. The only way is to place the cursor inside and use the up/down arrow keys. I guess this is not a wanted behavior.
RE: WTextArea doesn't show scrollbars when inside a layout with Bootstrap 5 - Added by Stefan Bn about 2 years ago
Bump - Anyone please?
This issue remains with Wt 4.7.0 and Bootstrap 5.
Of course, I can do a css-rule and apply this to all my WTextArea, but I wonder if this bug, escpecially since it works with Bootstrap v3.
The scrollbar issue only appears when the WTextArea is inside a layout. Without a layout it is fine and maybe the reason that it works on the Wt Widget Gallery.
RE: WTextArea doesn't show scrollbars when inside a layout with Bootstrap 5 - Added by Stefan Bn about 2 years ago
Update: This seems to be a Firefox-only problem. IE/Edge are showing scrollbars fine.
Can anyone cross-check please with the example above?
RE: WTextArea doesn't show scrollbars when inside a layout with Bootstrap 5 - Added by Korneel Dumon about 2 years ago
I tried it and experience the same problem, I added an issue for this: https://redmine.emweb.be/issues/9953
The only thing I found so far is that the problem doesn't occur if you set Wt::LayoutImplementation::JavaScript in WLayout::setPreferredImplementation(). We will have to look into it further to see what's causing this.
RE: WTextArea doesn't show scrollbars when inside a layout with Bootstrap 5 - Added by Korneel Dumon about 2 years ago
Hi,
after giving it some thought, I realized that if you add WContainerWidgets to your layout they will also not automatically get the overflow: auto; property, you have to add it yourself. So it sort of makes sense to me that you would have to do the same for the WTextArea.
As for why it was giving scrollbars before, it looks like bootstrap 3 was using a css reset of textarea { overflow: auto; } to get rid of the fixed scrollbar in old IE, but this was removed in bootstrap 5. Chrome and Edge are always setting overflow: auto; on textarea while firefox does not, I am not sure what's up with that.
Anyway, to answer your question, for now I don't think it's a bug.
RE: WTextArea doesn't show scrollbars when inside a layout with Bootstrap 5 - Added by Stefan Bn about 2 years ago
Thank you very much Korneel! It's strange that Firefox handles this different than Chrome/Edge.
If it is not a bug, then it might make sense that WTextArea offers a member setOverflow(..), like WContainerWidget does.
However, I could not think of many use cases, where one would NOT have scrollbars in a TextArea with long texts.