How to add div class,span class and ids in outsystems container

Hi,

  I am quite new to Outsystems.How can i implement class and id of html tag in outsytems.

ex: <div class="eco-cropper-holder" id="ecoFeedbackHolder">

       <span class="eco-error_message"></span>

      </div>

I made a container and add class name as "eco-cropper-holder".But how to use the id="ecoFeedbackHolder" in that container and also how to add span class.

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)

Hello Biswanath,

If you are new to OutSystems, I recommend you to take the online training: https://www.outsystems.com/learn/courses/114/developing-web-apps-outsystems-11/?LearningPathId=2

There is a specific presentation that teaches how to apply styles to widgets (container included): https://www.outsystems.com/learn/lesson/1756/themes-and-styling/?LearningPathId=2

Regarding IDs, they are given dynamically by the platform, so you should avoid using them.

Cheers.

BISWANATH PATI wrote:

Hi,

  I am quite new to Outsystems.How can i implement class and id of html tag in outsytems.

ex: <div class="eco-cropper-holder" id="ecoFeedbackHolder">

       <span class="eco-error_message"></span>

      </div>

I made a container and add class name as "eco-cropper-holder".But how to use the id="ecoFeedbackHolder" in that container and also how to add span class.


Hi Biswanath,

You can add Styling in extended property of the Container.


If you want to change tag in HTML, you can use extended properties with "OSTagName" and value "span".

Nandini T S wrote:

BISWANATH PATI wrote:

Hi,

  I am quite new to Outsystems.How can i implement class and id of html tag in outsytems.

ex: <div class="eco-cropper-holder" id="ecoFeedbackHolder">

       <span class="eco-error_message"></span>

      </div>

I made a container and add class name as "eco-cropper-holder".But how to use the id="ecoFeedbackHolder" in that container and also how to add span class.


Hi Biswanath,

You can add Styling in extended property of the Container.



Hi Nandini,


I have done like above.In Styles,i have mentioned the class name and its styles are written in the CSS editor.But my question is:can i mention the id name in the extended properties section as i have done above.And through that id,can i implement the javascript code.

Hi Biswanath,

No. The "Id" you enter will be ignored by the platform.

You can give the Container a NAME, and use it to pass the Id for a JavaScript, for example:

And then in a RunJavaScript (just for example), you can use it:

Hope this helps.

Cheers.