Skip to Content

How can I add css style to controls sapui5? (ComboBox, TextArea)

Hello guys,

I'm trying to add CSS style to control. Whenever the value inside combobox is selected, the value submitted into the textarea.

I want to add css style for selected value into textarea.

Any ideas how can I do this?

regards,

Sergey

XML
<ComboBox showSecondaryValues="true" filterSecondaryValues="true" value="{/comboBoxValue}" selectedKey="{/comboBoxKey}" width="500px">
					<items>
						<core:Item text="" key=""/>
						<core:Item text="Orange" key="Orange"/>
						<core:Item text="Apple" key="Apple"/>
						<core:Item text="Apricot" key="Apricot"/>
						<core:Item text="Banana" key="Banana"/>
					</items>
				</ComboBox>
				<TextArea id="textarea" cols="60" value="{parts: [{path: '/comboBoxValue'}, {path: '/comboBoxKey'}], formatter: '.fnFormatter'}"
					width="100%"/>
JS
onInit: function() {


			// set explored app's demo model on this sample
			var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/countriesCollection.json"));
			oModel.setProperty("/comboBoxValue", "");
			oModel.setProperty("/comboBoxKey", "");
			this.getView().setModel(oModel);
		},


		fnFormatter: function(text, key) {
			var sText = "";
			if (text && key) {
				sText += "Selected fruits: " + text;
			}


			return sText;
		}
Add a comment
10|10000 characters needed characters exceeded

Related questions

3 Answers

  • Posted on Feb 20, 2018 at 05:59 AM

    Hi Sergey Easen,

    You can make use of the method addStyleClass(), and pass your css class as a string as parameter to the method, to set custom styles to your control.

    Regards,

    Arjun Biswas

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 28, 2018 at 06:23 AM

    Hi Sergey,

    All you need to do is add something like

    this.byId('textarea').addStyleClass(text);

    to your fnFormatter function and then add some custom CSS classes with the same names as the values in your ComboBox to your project.

    Best Regards,

    Hunter Young

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Feb 08, 2018 at 01:32 PM
    -3

    Sergey,

    i do not think you can add css to the text inside the text area. instead you could use an html control and you could use css / styles there instead

    https://sapui5.hana.ondemand.com/#/entity/sap.ui.core.HTML

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.