23
Views
5
Comments
Solved
How to draw a circle using HTML element?

I am having trouble understanding how the HTML widget works. I have read the documentations and posts about it, but all I currently know is how to display an image with it. I would need basic shapes that I can use in my layout. 

Solution

Hello shooouse,

HTML Elements give you the flexibility to create custom HTML elements. In your case, CSS will be needed.

To create a circle for example you can do the following : 

  • Add an HTML Element to your screen
  • Set the tag property value as span (which is the default value )
  • Add an Attribute class with the value "circle"
  • Then in your CSS file define this class with the following attributes:
    • .circle { 
    • height: 150px;  
    • width: 150px; 
    • border: solid 1px;  
    • border-radius: 50%;  
    • display: inline-block;}
  • This should result in the following circle 

Now you can apply this logic to create any type of basic shape you need. 

Hope it helps! 

Paulo Rosário


Thank you @Paulo Rosário , this is the kind of information I needed to be able to start. 

Hi,

I think I misunderstood your question, maybe you should use HMTL combined with CSS.

Here is how to use CSS within Outsystems: https://success.outsystems.com/documentation/11/developing_an_application/design_ui/look_and_feel/cascading_style_sheets_css
And here is how to build shapes with CSS: https://www.w3schools.com/howto/howto_css_shapes.asp

I hope this helps you :)

Solution

Hello shooouse,

HTML Elements give you the flexibility to create custom HTML elements. In your case, CSS will be needed.

To create a circle for example you can do the following : 

  • Add an HTML Element to your screen
  • Set the tag property value as span (which is the default value )
  • Add an Attribute class with the value "circle"
  • Then in your CSS file define this class with the following attributes:
    • .circle { 
    • height: 150px;  
    • width: 150px; 
    • border: solid 1px;  
    • border-radius: 50%;  
    • display: inline-block;}
  • This should result in the following circle 

Now you can apply this logic to create any type of basic shape you need. 

Hope it helps! 

Paulo Rosário


Thank you @Paulo Rosário , this is the kind of information I needed to be able to start. 

Hello @shooouse 

As you know that Outsystems have rich Capabilities for the design the kind of a pixel prefect UI.

So may I know the which type of shapes you want to draw please send me a screenshot it could be help to understand.


Thanks 

Navneet Sharma

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