Monday, October 13, 2014

Alta UI and Bootstrap - box-sizing for af:panelTabbed

Oracle just announced its all new modern UI system - Alta UI. It's believed that more and more organizations and applications will turn to the Alta UI system. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. In this series of posts on Alta UI and Bootstrap, I will describe some issues when integrating Bootstrap into your ADF fusion web applications that are using the Alta UI skin and how to work around these issues.

This first post is about <af:panelTabbed> component. The following screen shot illustrates a simple panelTabbed component using the Alta UI skin.


After applying Bootstrap framework to the page. It looks like this:


The Bootstrap skin in the sample application is a custom skin extended from the Oracle Alta UI skin, and containing various rules used to fix integration issues. After picking up the Bootstrap skin at runtime in the sample application, it looks good again:


The tab glitch is caused because in the following code snippet from the alta-v1-desktop.css file, Alta UI assumes the box model defined by the box-sizing property is content-box, and happily defines the fixed value for the height property.

af|panelTabbed::tab-content,
af|navigationPane-tabs::tab-content {
  /* Fix the height of the tab content to match the height of the icon if present in the tab content */
  height: 16px;
  padding-left: 8px;
  padding-right: 4px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  /* Undo background color from simple skin */
  -tr-inhibit: background-color;
  -tr-inhibit: box-sizing;
}

Yes, the initial value for the box-sizing property is content-box. It works well without Bootstrap integrated with it. After Bootstrap 3 is released, everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system. With border box model, the width and height properties include the padding and border, thus, the resulting tabs in the sample page are shorter than we expect. 

To fix this glitch, we can enforce the content box model for the selectors listed above. The following code snippet from the skin file bootstrap-v1-desktop.css in the sample application shows how to do that.

/** Bootstrap uses box-sizing: border-box, therefore reset it back to the initial value content-box here, 
    because Alta specifies tab height using content box model */
af|panelTabbed::tab-content,
af|navigationPane-tabs::tab-content {
  box-sizing: content-box;
}

You can find more information and download the sample application by following the links below.

Resources:

Sample Application:
Environment:
  • Mac OS X Version 10.9.5
  • Safari Version 7.1
  • JDeveloper 12.1.3.0.0 Build JDEVADF_12.1.3.0.0_GENERIC_140521.1008.S
  • Bootstrap v3.2.0 

Note: The Bootstrap framework used in the sample application is a customized version with @font-size-base set to 12px which is the default font size defined in the skin file alta-v1-desktop.css of Alta UI as follow:

.AFDefaultFontSize:alias {
  font-size: 12px;
}

Chinese Summary:

关于集成  Bootstrap 框架和新的 Oracle Alta UI 的系列博客中第一篇:如何解决 ADF panelTabbed 组件中 box-sizing CSS 属性造成的问题。

3 comments:

  1. What are the deployment options besides WebLogic server ? Any more modern options ? Wildfly, GlassFish 4?

    ReplyDelete
  2. Oracle ADF supports deployment to the GlassFish application server via its free version - Oracle ADF Essentials. You can find more information from:

    http://www.oracle.com/technetwork/developer-tools/adf/overview/adfessentialskc-1870652.html
    https://docs.oracle.com/middleware/1213/adf/administer/adf-admin-glassfish.htm#ADFAG20932

    ReplyDelete