Hello all,
I have a question that how we can make this button can be rounded and can be direct to specific screen ? I'm newbie actually. Thank you in advance.
Attach picture:
Hi Muhamad ,
Go to the style property of the widget and there you will find the border radius option where you can put radius in pixels or you can also use your custom CSS .
Thanks,
Narendra Tiwari
Hi Muhamad,You can refer to the below screenshot and link from Outsystems UI, which shows different classes to make the button rounded -https://outsystemsui.outsystems.com/StyleGuidePreview/Border
@Muhamad Adam Irfan Mohd Nizam,
If you are newbie in Outsystems, i would like to suggest you go through the basic understanding of the Outsystems (if you didn't follow yet)
OutSystems Training: OutSystems Overview | OutSystems
You need to overwrite the property of btn class on your screen.
If you want same kind of in everywhere in your application, then you can make your theme module.
and can overwrite your css classes there.
for now on screen add this css.
.btn{
border-radius: 42%;
height: 40px;
width: 100px;
padding-left: 40px;
padding-right: 40px;
background: linear-gradient(95deg, #10959c 60%,#6e4698 40%);
}
Please change background and color properties values. and adjust height and width as per your requirement.
I don't have your color codes (you are using). so I just created simple button in same style.
This document will help you to understand linear gradient property of css
linear-gradient() - CSS: Cascading Style Sheets | MDN (mozilla.org)
I also attached OML file.
Hope this will help you.
Kind regards,
Sanjay Kushwah
Hi @Sanjay Kushwah
if you know outsystems than outsystems never tell to write custom css in screen so create a theme module and write css and used this theme module in you application.
Thanks
Md Mansur
right, but for a single screen if you want to customize a widget than for only that making new theme is not best approach, because there will be only one rule/ class define in whole theme. (for example, in this case) [so i didn't recommended here].
But if your screen/widget not consistent in in multiple places then Centralized theme will be the best solution.
he is not talking about making a new theme, you always have a theme
why are you Creating new theme for every screen . you have to create a theme and add CSS according to the requirement and only call class in you widget
Note:
If your have only one line css like (border Radius-10px) is not effected you code.
since Inline CSS is most less maintainable than CSS on Screen/block.
hence inline CSS never be best than CSS on Block/Screen in order to maintainability define new CSS class in theme will be the best approach.
I agree with your words theme will be best place to write new css class but in same order define new/existing class in block/screen is best than inline css.
Hi @Muhamad Adam Irfan Mohd Nizam
No need to write so much CSS only click button and open button Properties and Style Table simple give the corner in pixel Like 10Px so you can achieve your Requirement
Md mansur
this will generate Inline CSS, which is not recommended by Outsystems.
so, I was not recommended it.
Avoid inline JavaScript or inline CSS style - OutSystems 11 Documentation
Hello @Muhamad Adam Irfan Mohd Nizam
You can select the Rounded option from Theme editor. So that you will get the round shape of every button in application.
If you want something else. Please let me know. Hope this will help you out.
Regards
Prince
Hi @Princi
Its is not Relevant Solution because when we apply this feature so entire application button will be rounded
like I have 10 screen and 10 button than entire button will be rounded so it is not helpful but totally depend upon Reequipment's
Yes @Md Mansur I'm aware of this that's why I have mentioned above "every button in application".
Now It's depend on the @Muhamad Adam Irfan Mohd Nizam He can choose the right approach as per his requirement.
I have added CSS in oml file
Try this below oml file:
I hope this help
Thank you all for the supports 😍