Can the background of "Text Area" be transparent?

I am desiging a GUI and I want to ask (as shown in the following picture) how can I make the background of the "Text Area" transparent? so that the image in the background appears whole.

I tried using "Label" feature instead, it has a transparent background, but it doesn't have a scrollbar and I need a scrollbar.

[Adam Danz]

You can print text on axes with transparent background but it won't have a scroll bar.

Answer 1

[J. Alex Lee]

With R2019b and using the uifigure rather than figure, there is a uihtml() element, which seems to have scroll by default (don't need to wrap in something that additionally sets CSS overflow property)

f = uifigure('Color','r');
h = uihtml(f);

cstr = arrayfun(@(d)sprintf('<p>line %d</p>',d),1:10,'uni',false)
h.HTMLSource = horzcat(cstr{:});

[Wael Wanis]

Sorry I am not an expert, i don't understand your answer.

Where should I write this code?

[Wael Wanis]

Writing this code as a startup callback of uifigure opens a second window of GUI with a colored bakground and a scrollbar (as shown in figure), that doesn't help me unfortunately.

Thank you anyway.

[J. Alex Lee]

I provided a stand-alone example of how uihtml can provide an area to contain text, not mean to provide your exact solution.

You'll need to know some basic html/css.

In the context of your app designer app, drag over a uihtml element from the component picker on the left of the designer view.

Put the text you want in its HTMLSource property, or set the property in your startupfcn in code view, or maybe better reference an html file that contains the text you want to display.

Hope this helps.

[Adam Danz]

@J. Alex Lee; +1, nice solution!

@Wael Wanis, I doubt there's a way to use a transparent text box with a scroll bar in appdesigner. This method is the closest you'll come. Note that there are undocumented way to make UI components transparent (link below) but I doubt it would work in app desginer.

http://undocumentedmatlab.com/blog/transparency-in-uicontrols

There are other ways you can add text with a transparent background but it won't have scrollbar.

[Wael Wanis]

Ok, thank you so much for your help.

I will check it out.

[J. Alex Lee]

@Wael Wanis Did you get this to work? I'm also interested in UI and am new to the HTML component so I mocked up your example (attached). It seems to work out well, and you can even play around with your "Instructions" label.

My example has the text area text as a separate html file, and the "Instructions" label is also an html with the html code directly in-line.

I couldn't figure out how to get the white outline to apply to the box outside the scroll, not just inside...it's been a long time since i messed around with html/css...

@Adam Danz, thanks for the thumbs up!

[Wael Wanis]

No I couldn't do it because I don't know anything about HTML and I don't find it worthy to learn it just to have a scrollbar in my GUI.

Your file is very good, it is the best solution I have if only i know how to make the HTML file so that I can put my script.

Thank you again.

[Wael Wanis]

@J.Alex Lee

I want to thank you again, I manage to write my script as a HTML file and I included it in the GUI, it has a transparent background and a scrollbar. This is all I need, thank you.