How to vertically and horizontally align HTML components within a Oracle JET page?
Many a times I face this requirement, mostly when building a Login page for an application, and I always wanted to make something reusable. That's the reason of me building and sharing this with all of you.
Since my CSS skills are not that great, I wanted to build something which is easy to understand can easily be used by others. Also, which is highly responsive, works seamlessly with desktops, laptops and mobile browsers as well as hybrid apps.
My end-goal was to build something like below:
Or in a form-layout with mobile resolution:
The web component is free to download from Github : https://github.com/sohamda/JET-Web-Components/tree/master/center-align
Steps to use this in your own Oracle JET project:
1. Create and initialize your JET application and then put the downloaded web component inside "src\js\jet-composites" folder.
2. Once copied update your viewModel first.
3. Update view to load this layout component
That's it, when you run this project, you should see
If you read the ReadMe file on Github, there is another example with "oj-form-layout", works same as the example explained here.
Many a times I face this requirement, mostly when building a Login page for an application, and I always wanted to make something reusable. That's the reason of me building and sharing this with all of you.
Since my CSS skills are not that great, I wanted to build something which is easy to understand can easily be used by others. Also, which is highly responsive, works seamlessly with desktops, laptops and mobile browsers as well as hybrid apps.
My end-goal was to build something like below:
Or in a form-layout with mobile resolution:
The web component is free to download from Github : https://github.com/sohamda/JET-Web-Components/tree/master/center-align
Steps to use this in your own Oracle JET project:
1. Create and initialize your JET application and then put the downloaded web component inside "src\js\jet-composites" folder.
2. Once copied update your viewModel first.
3. Update view to load this layout component
That's it, when you run this project, you should see
If you read the ReadMe file on Github, there is another example with "oj-form-layout", works same as the example explained here.
Thanks for sharing this great information I am impressed by the information that you have on this blog. Same as your blog i found another one Oracle ADF .
ReplyDeleteActually, I was looking for the same information on internet for
Oracle ADF Interview Questions and Answers/Tips and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject.
WcomptiMquan-su Joel Wisdom https://wakelet.com/wake/8tkeegz9v6YdTSBLrOmuh
ReplyDeletedionajssketim
exlidaeshi Vida Terrell Bootstrap Studio
ReplyDeleteEset NOD 32
Fraps
lodardestfib