Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

How to apply custom CSS to oj-inputtext or any other component?

Sarah JustinaJun 19 2018 — edited Jun 21 2018

Hi,

I would like to override the max-width property of the oj-input-text component in one of my pages alone.

So I created a custom CSS class in app.css as follows:

input.test-login.oj-inputtext{

    max-width : none;

}

and I have applied this custom CSS class on my page as follows:

<input type="text" required="true" placeholder="Username" autofocus data-bind="ojComponent: {

                                        component: 'ojInputText', value: username,  invalidComponentTracker: tracker,

                                            rootAttributes: {class: 'test-login'}}">

But the max-width is still 18em when I do an inspect from the browser.

Is this the right way to apply CSS? If not, how should I go about it?

Also, do we have some training material on how to create and apply custom themes on the JET application?

Regards,

Sarah

This post has been answered by Duncan Mills-Oracle on Jun 20 2018
Jump to Answer
Comments
Post Details
Added on Jun 19 2018
3 comments
727 views