Hi Team ,
I am trying to achieve responsiveness with an ADF fusion application.
I have followed few blogs as per that I have written piece of code in CSS for getting responsiveness.
below is the CSS applied and jsp page code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://xmlns.oracle.com/adf/faces/rich" prefix="af"%>
<f:view>
<af:document id="d1">
\<af:form id="f1">
\<af:panelBox text="Demo Page" id="pb1" showDisclosure="false"
styleClass="wide">
\<f:facet name="toolbar"/>
\<af:outputText value="\*\*\* WIN! Great victory for them, nobody gave them a chance to reach the semifinal! But now they have reached the final with a convincing win over \*\*\*\*, fully deserved on the day. \*\*\*\*\* just had an off day at the wrong time. But #### won't mind..celebrations will be wild tonight in the streets of $$$!" id="ot1"
styleClass="demo"/>
\<af:panelGroupLayout id="pgl1" layout="horizontal">
\<af:inputText label="Label 1" id="it1"/>
\<af:inputText label="Label 1" id="inputText1"/>
\<af:inputText label="Label 1" id="inputText2"/>
\<af:inputText label="Label 1" id="inputText3"/>
\</af:panelGroupLayout>
\<af:panelGroupLayout id="pgl2" layout="vertical">
\<af:panelTabbed id="pt1" styleClass="AFStretchWidth">
\<af:showDetailItem text="showDetailItem 1" id="sdi1"/>
\<af:showDetailItem text="showDetailItem 1" id="showDetailItem1"/>
\<af:showDetailItem text="showDetailItem 1" id="showDetailItem2"/>
\<af:showDetailItem text="showDetailItem 1" id="showDetailItem3"/>
\</af:panelTabbed>
\</af:panelGroupLayout>
\</af:panelBox>
\<af:panelBox text="Demo Page 2" id="responsivebox" showDisclosure="false"
styleClass="narrow">
\<f:facet name="toolbar"/>
\<af:outputText value="\*\*\* WIN! Great victory for them, nobody gave them a chance to reach the semifinal! But now they have reached the final with a convincing win over \*\*\*\*, fully deserved on the day. \*\*\*\*\* just had an off day at the wrong time. But #### won't mind..celebrations will be wild tonight in the streets of $$$!"
id="outputText1"/>
\<af:panelGroupLayout id="panelGroupLayout1" layout="vertical"
styleClass="narrow">
\<af:inputText label="Label 1" id="inputText4"
styleClass="label label-default"/>
\<af:inputText label="Label 1" id="inputText5"/>
\<af:inputText label="Label 1" id="inputText6"/>
\<af:inputText label="Label 1" id="inputText7"/>
\</af:panelGroupLayout>
\<af:panelGroupLayout id="panelGroupLayout2" layout="vertical"
styleClass="narrow">
\<af:panelAccordion id="pa1" styleClass="AFStretchWidth"
discloseNone="true">
\<af:showDetailItem text="showDetailItem 2" id="sdi2"/>
\<af:showDetailItem text="showDetailItem 2" id="showDetailItem8"/>
\<af:showDetailItem text="showDetailItem 2" id="showDetailItem9"/>
\<af:showDetailItem text="showDetailItem 2" id="showDetailItem10"/>
\</af:panelAccordion>
\<af:panelTabbed id="panelTabbed1" styleClass="AFStretchWidth"
rendered="false">
\<af:showDetailItem text="showDetailItem 1" id="showDetailItem4"/>
\<af:showDetailItem text="showDetailItem 1" id="showDetailItem5"/>
\<af:showDetailItem text="showDetailItem 1" id="showDetailItem6"/>
\<af:showDetailItem text="showDetailItem 1" id="showDetailItem7"/>
\</af:panelTabbed>
\</af:panelGroupLayout>
\</af:panelBox>
\<af:resource type="css">
.wide {
display: inline;
}
.narrow {
display: none;
}
.adjustFont {
font-size: large;
}
.icon-home {
font-family: 'UIShellUGH';
-webkit-font-smoothing: antialiased;
font-size: 36px;
color: #ffa000;
}
[@media](https://forums.oracle.com/ords/apexds/user/media) screen and (max-width:700px) {
.narrow {
display: inline;
}
.wide {
display: none;
}
.adjustFont {
font-size: small;
}
.icon-home {
font-size: 24px;
}
}
@font-face {
font-family: 'UIShellUGH';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AA..removed code here...AzV6b1g==)format('truetype');
font-weight: normal;
font-style: normal;
}
\</af:resource>
\</af:form>
</af:document>
</f:view>
Observations : in browser without resizing the browser (1366 * 516 pixel)
after resizing the browser: (505 * 496 pixel)
but when i use chrome simulator as shown below i am not getting responsive look, getting wide screen(instead of narrow screen).
please help me what mistake i have committed and is there any better approach to achieve responsiveness in ADF .
Jdev version : 11.1.1.7.0