101
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. 

2023-03-16 16-29-51
Paulo Rosário
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


UserImage.jpg
shooouse

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

2023-03-16 16-29-51
Paulo Rosário
2024-09-17 18-14-33
Miguel Defavari da Silva

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 :)

2023-03-16 16-29-51
Paulo Rosário
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


UserImage.jpg
shooouse

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

2023-03-16 16-29-51
Paulo Rosário
2021-12-23 04-28-09
Navneet Sharma

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.