Monday Jul 30, 2012

Button Alignment not working in Chrome

Suppose we have a popup with a panelGroupLayout containing 2 command buttons as given below :

<af:popup id="p1">
      <af:panelWindow id="pw1" closeIconVisible="false" modal="true"
                      resize="on">
        <af:group id="pgl2">
          <af:inputText label="Label 1" id="it1"/>
          <af:inputText label="Label 2" id="it2"/>
          <af:spacer width="10" height="100" id="s1"/>
          <af:panelGroupLayout id="pgl3" valign="bottom" layout="horizontal" >
            <af:commandButton text="Save" id="cb2"/>
            <af:commandButton text="Close" id="cb3"/>
          </af:panelGroupLayout>
        </af:group>
      </af:panelWindow>
    </af:popup>

We want the buttons to be right aligned so we do the following:

  <af:panelGroupLayout id="pgl3" halign="right" valign="bottom" layout="horizontal">

 This works in Firefox (find screenshot below)


But it does not work in Chrome ( find screenshot below )

To make it work in Chrome we need to do the following :

 <af:panelGroupLayout id="pgl3" halign="right" valign="bottom"
                               layout="horizontal" styleClass="AFStretchWidth">

AFStretchWidth is a marker style class that will declaratively stretch a component horizontally in a wide flowing container. This style class should be used instead of attempting to use a percentage width as an inlineStyle width to stretch a component horizontally.

About

ADF Tips and Tricks

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today