Skip to main content

Center Align - Web Component - Oracle JET

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.

 
Labels:

Comments

  1. Arizona BlazeNovember 27, 2020 at 2:30 PM

    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 .
    Actually, 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.



    ReplyDelete
  2. WcomptiMquan-suApril 25, 2022 at 6:36 PM

    WcomptiMquan-su Joel Wisdom https://wakelet.com/wake/8tkeegz9v6YdTSBLrOmuh
    dionajssketim

    ReplyDelete
  3. acintrif_chi-1980August 26, 2022 at 8:46 PM

    exlidaeshi Vida Terrell Bootstrap Studio
    Eset NOD 32
    Fraps
    lodardestfib

    ReplyDelete

Post a Comment

Popular posts from this blog

Chatbots and Oracle Cloud Services

Thanks to Oracle A-Team, I had a chance to work with Chatbots. 3 pure NodeJS applications, on couple of Oracle Cloud platforms and Facebook messenger, and my chatbot was running. Let me explain, the architecture a bit. To start with, following is the simple representation of how it works. Message Platform Server : Is a NodeJS application, deployed on Oracle Application Container cloud, acts as a channel between Facebook Messenger and the chatbot engine. It simply converts the incoming messages from Facebook and sends it to chatbot readable format. Also, when chatbot replies, it converts to Facebook readable formats and passes it to messenger. Chatbot Engine : Is a NodeJS application, which communicate with some REST APIs based on a conversation flow document and moves the flow of the conversation from one state to another. Flow JSON : Where we document, every state of a conversation and which APIs to call to generate a response. For example, at the beginning of the con...
28 comments
Read more

Exception Handling in ADF

This blog will give you an overview on how you can successfully deal with unhandled Runtime exceptions in an ADF application. This will give you an idea of: How to catch the unhandled exceptions. Write a separate log file with stacktrace and thread dumps. Redirect the user to an static error page #1. Catch unhandled exceptions :  Create a class "MyExceptionHandler" which extends : oracle.adf.view.rich.context.ExceptionHandler. Override handleException() method.     public void handleException(FacesContext facesContext, Throwable throwable, PhaseId phaseId) throws Throwable {         // this method is going to create a separate file with stacktrace and thread dumps         writeException(throwable);         // redirect to error page         redirectToErrorPage(facesContext);     }  Create a fo...
7 comments
Read more

Create Micro CRUD services for Oracle Database Cloud using NodeJS

I will try to explain, how you can use NodeJS to create mirco services for the tables in your Oracle Database Cloud or on-premise Database. Complete Github project : https://github.com/sohamda/LeasifyAPIs You need to do "npm install" to download the node_modules. Step by Step guide : 1. NodeJS : either 32 or 64 bit. If you already have NodeJS installed, please check whether it is 64 or 32. Use below command to figure that out : C:\>node > require('os').arch() If you get : 'ia32' , then it is 32 bit installation. 2. Install oracle-db node module .  This was a lengthy and time consuming installation for me, because for Windows, it has a lot of pre-requisites. If you are a Mac user, you are lucky. :) I followed : https://community.oracle.com/docs/DOC-931127 There is also a detailed one in github : https://github.com/oracle/node-oracledb/blob/master/INSTALL.md 3. Config your DB Cloud Create a user and couple of tables on which we...
28 comments
Read more