Centering panel boxes horizontally on a page

Experts,
I have a panelStretchLayout component on my page having 3 facets top, center and bottom. In the bottom facet i have to display 5 images inside a panel box such that they are aligned equiv distance from the left and right side. That is the same on the left side of the page and right side of the page (if the resolution changes - left hand border of the first image and right side border of the last image should be same) should be same and the panel boxes should start occupying space from the center of the bottom facet.
thks
Jdev 11.1.1.5.

Can you try this?
        <af:panelBox text="PanelBox1" id="pb1">
          <af:panelGroupLayout layout="horizontal" id="pgl1" halign="center"
                               styleClass="AFStretchWidth">
            <af:commandButton text="commandButton 1" id="cb1"
                              styleClass="AFStretchWidth"/>
            <af:commandButton text="commandButton 2" id="cb2"
                              styleClass="AFStretchWidth"/>
            <af:commandButton text="commandButton 3" id="cb3"
                              styleClass="AFStretchWidth"/>
            <af:commandButton text="commandButton 4" id="cb4"
                              styleClass="AFStretchWidth"/>
            <af:commandButton text="commandButton 5" id="cb5"
                              styleClass="AFStretchWidth"/>
            <f:facet name="separator">
              <af:spacer width="5" id="s1"/>
            </f:facet>
          </af:panelGroupLayout>
        </af:panelBox>Thanks,
Navaneeth

Similar Messages

Centering text vertically & horizontally on a page

Anyone know how to do this? I know how to center text within a text frame but what about a whole page. In this instance I would like to center it on a business card!
Thanks!

Windows>Align
Then Select
To: Page
And then hit the center button on the vertical and horizontal

Panel box

hi
im using a panel box layout in my page. i have background color for my page.
i dont want the border of the panel box to be visible so tht the screen appears more perfect.
i tried giving the inline styles.but i didnt succeed.
and i didnt find any skin selectors for panel box also.
so plz tell me how to remove the border of the panel box.there is no text for panel box.
rgds.

Hi,
at least in the upcoming TP3, the skin selectors for panelBox are
af|panelBox      The selector on the root dom element of this component. The root style contains default setting of the width of the panel Box to 100%.
af|panelBox::header-start      Style the start side of the header of the panel box. Used to render rounded corners for the panelBox. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. For example, the ramp is set to 'core' and background set to 'default' the style used for this is "af:panelBox::header-start:core:default". This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-start:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
af|panelBox::header-center      Style the center side of the header of the panel box. Used to render rounded corners for the panelBox. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-center:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
af|panelBox::header-end      Style the end side of the header of the panel box. Used to render rounded corners for the panelBox. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. This includes the .AFPanelBoxHeader* alias, for example af|panelBox::header-end:core:default includes .AFPanelBoxHeaderCoreDefault:alias.
af|panelBox::content      Style the content area of the panel box. The available pseudo-classes are: ((:core or :highlight) and (:default, :light, :medium, or :dark). The pseudo-classes correspond with the ramp and background attributes of the component. This includes the .AFPanelBoxContent* alias, for example af|panelBox::content:core:default includes .AFPanelBoxContentCoreDefault:alias.
af|panelBox::icon-style      Style to support an icon to the left of the header title
af|panelBox::disclosure-link      Selector for the anchor element that contains the disclosure icon.
.AFPanelBoxHeaderCoreDefault:alias      Alias to change the properties on the panelbox header for the panelbox whose 'ramp' is set to 'core' and 'color' is set to 'default'. Using this style class significantly simplifies the work required to style the header. Instead of changing three classes (for header-start, header, header-end) you only need to change this one. The region component uses this alias as well.
.AFPanelBoxContentCoreDefault:alias      Alias to change the properties on the panelbox content for the panelbox whose 'ramp' is set to 'core' and 'color' is set to 'default'. The region component uses this alias as well.
.AFPanelBoxHeaderCoreLight:alias      Same as .AFPanelBoxHeaderCoreDefault:alias, but for color=light.
.AFPanelBoxContentCoreLight:alias      Same as .AFPanelBoxContentCoreDefault:alias, but for color=light.
.AFPanelBoxHeaderCoreMedium:alias      Same as .AFPanelBoxHeaderCoreDefault:alias, but for color=medium.
.AFPanelBoxContentCoreMedium:alias      Same as .AFPanelBoxContentCoreDefault:alias, but for color=medium.
.AFPanelBoxHeaderCoreDark:alias      Same as .AFPanelBoxHeaderCoreDefault:alias, but for color=dark.
.AFPanelBoxContentCoreDark:alias      Same as .AFPanelBoxContentCoreDefault:alias, but for color=dark.
.AFPanelBoxHeaderHighlightDefault:alias      Alias to change the properties on the panelbox header for the panelbox whose 'ramp' is set to 'highlight' and 'color' is set to 'default'. Using this style class significantly simplifies the work required to style the header. Instead of changing three classes (for header-start, header, header-end) you only need to change this one. The region component uses this alias as well.
.AFPanelBoxContentHighlightDefault:alias      Alias to change the properties on the panelbox content for the panelbox whose 'ramp' is set to 'highlight' and 'color' is set to 'default'. The region component uses this alias as well.
.AFPanelBoxHeaderHighlightLight:alias      Same as .AFPanelBoxHeaderHighlightDefault:alias, but for color=light.
.AFPanelBoxContentHighlightLight:alias      Same as .AFPanelBoxContentHighlightDefault:alias, but for color=light.
.AFPanelBoxHeaderHighlightMedium:alias      Same as .AFPanelBoxHeaderHighlightDefault:alias, but for color=medium.
.AFPanelBoxContentHighlightMedium:alias      Same as .AFPanelBoxContentHighlightDefault:alias, but for color=medium.
.AFPanelBoxHeaderHighlightDark:alias      Same as .AFPanelBoxHeaderHighlightDefault:alias, but for color=dark.
.AFPanelBoxContentHighlightDark:alias      Same as .AFPanelBoxContentHighlightDefault:alias, but for color=dark.
.AFPanelBoxHeaderStart:alias      Alias to change the dom element at the start of the header. Use this alias to modify the css properties that are needed for all ramp/background of panelBoxes. Common css properties are padding and border.
.AFPanelBoxHeaderCenter:alias      Alias to change the dom element at the center of the header. Use this alias to modify the css properties that are needed for all ramp/background of panelBoxes. Common css properties for the header center dom element are width and font information.
.AFPanelBoxHeaderEnd:alias      Alias to change the dom element at the end of the header. Use this alias to modify the css properties that are needed for all ramp/background of panelBoxes. Common css properties are padding and border.
Frank

How to align text in Panel Box to the center

Hi,
I would like to align the text in the Panel Box to the center. Here is my code snipplet:
+<af:panelBox text="22" id="pb8"+
titleHalign="center" ramp="highlight"
background="dark"
icon="/images/warningind_active.gif"
showDisclosure="false"
contentStyle="height: 50px; width: 100%; horizontal-align:center;">
+<f:facet name="toolbar"/>+
+<af:outputText value="Update RFC with Approval Info"+
id="ot8"
inlineStyle="font-size:medium; font-weight:bold;"/>
+</af:panelBox>+
But it didn't work. The text "Update RFC with Approval Info" is still align to the left by default.
Any ideas?
Thanks.
-Mina

You can't do it without panelGroupLayout. Try this way...
        <af:panelBox text="PanelBox1" id="pb1" titleHalign="center" ramp="highlight"
            background="dark">
            <f:facet name="toolbar"/>
           <af:panelGroupLayout id="pgl1" layout="horizontal" halign="center" valign="top">
            <af:outputText value="***centered***" id="ot1"/>
           </af:panelGroupLayout>
        </af:panelBox>

Centering a Div Horizontally

Hello,
I need help centering a div horizontally with CSS. What I'm trying to do is get this box that will contain text to center on the page and then I will expand it's width to match the image right above it, to fit the design.
Here is my code (i made the code of the div that I want to center within the document bold):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Lorentz Painting Co.: Pristine, Precise and Professional" />
<meta name="keywords" content="Maciej Lorenz, paint, high quality, interior, exterior, co., painting, professional, New England, Vermont, Nassachussetts, Boston, New York New Hampshire, New England" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Nantucket Gift Basket Company</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="scripts.js"></script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:1844px;
    height:43px;
    z-index:1;
    left: 64px;
    top: 253px;
body {
    background-color: #FFF;
    background-image: url(shingles1.jpg);
    background-repeat: repeat;
a:link {
    text-decoration: none;
    color: #FFF;
a:visited {
    text-decoration: none;
    color: #FFF;
a:hover {
    text-decoration: none;
    color: #FF0;
a:active {
    text-decoration: none;
    color: #FF0;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-7']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div id="wrapper-1">
<div id="branding">
    <h1><img src="Nantucket Products_editedsmaller.jpg" width="482" height="326" /></h1>
        <p> </p>
        <div id="content-2">
      <div class="content-wrap">
        <p> </p>
        <p>ddddddddddddddddddddddddddddddddddddddddddddd</p>
        <p> </p>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <h1> </h1>
    <div id="wrapper-2">
      <div id="wrapper-3">
        <div id="content-bottom"></div>
      </div>
      <div id="footer">
        <p> </p>
        <p><a href="index.php" title="Lorentz Painting; Why us? We are the best and most affordable painting company in New England, MA, NH, NY, VT, CT, ME and etc.">Home</a> - <a href="gift_baskets.php" title="Lorentz Painting Co.: Products & Services; nothing but the finest painting products that can be found in the market., New England, VT, NH, MA, NY, CT, ME">Gift Baskets</a> - <a href="contact.php" title="Contact Lorentz Painting Co. Today for the best painting value in New England, VT, NH, MA, NY, CT">Contact</a></p>
<p><strong><a href="sitemap.html" title="Site Map of Lorentz Painting Co. the most professional and highest quality painting company in New England, VT, NY, NH, MA, ME, CT">The Nantucket Gift Basket Co., 2011</a></strong></p>
        <p><strong><a href="http://cwws.org" title="Common Wealth Web Solutions" target="_new">Designed by CWWS</a></strong>      </p>
        <p> </p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("Lorentz Painting Co.: The best value in painting in New England, NY, VT, NH, MA, ME, CT. A professional company that produces high quality results.");
swfobject.registerObject("Lorentz Painting Co.: The most Pristine, Precise and Professional Painting Company in New England, NY, VT, NH, MA, ME, CT.");
swfobject.registerObject("Lorentz Painting Co.: High Quality painting at an affordable price. Serving New England, NY, VT, NH, MA, ME, CT.");
</script>
</body>
</html>

Thank you guys for bringing me good advice/info, I attempt to put it to use tonight and I will get back to you and let you know how it goes.
Thanks!
Date: Tue, 7 Jun 2011 21:39:44 -0600
From: [email protected]
To: [email protected]
Subject: Centering a Div Horizontally
Have a look at the following simplified example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
     height: 100%;
     background: #CCC;
body {
     width: 960px;
     margin: auto;
     background: #FCF;
     height: 100%
h1 {
     margin: 1.5em 20px;
#header {
     width: 482px;
     margin: auto;
     height: 326px;
     background: #FF9;
     text-align: center;
</style>
</head>
<body>
<div id="header">
<p>this is the space for your image</p>
</div>
h1. This can be a header
</body>
</html>
Notice how, with a block element, the width is set to a value combined with a margin set to auto. This principle can be used for any block element including BODY
The idea is to keep it simple
Gramps
>

Help centering a box in a jpanel

hi every1,
I need some help centering a box in a jpanel both
horizontally and vertically.
which layout is the correct one?
could you post a scrap of code please?
thanxalot
stefano

With the GridBagLayout you basically can do everything. Are there more components in the panel or just this box. If it's just the box, change the Layout of the panel to GridBagLayout and the anchor of the box to center. That should beeverything to do.
Cheers
Jonas

Remove panel box in search criteria

Hi!
I am using jdeveloper 11.1.1.5
I had dragged and dropped my view criteria in y jspx page
I need to remove the panel box which had been set default to the querry
Could any body pls help me

Hi,
how about this one
<af:query id="qryId1" headerText=" Search" disclosed="true"
value=""
model="}"
queryListener=""
queryOperationListener="}"
displayMode="compact" saveQueryMode="hidden" rows="2" maxColumns="2">
<f:verbatim>
<blockquote>
<p>
</p>
</blockquote>
</f:verbatim>
<f:facet name="toolbar"/>
<f:facet name="footer"/> // look like you added some button here
<f:facet name="info"/>
</af:query>
JDeveloper generated Default query like,
<af:panelHeader>
<af:query>
</af:query>
</af:panelHeader>
your one is look like(I"m not sure)
<af:panelBox text="General Journal">
<af:panelHeader>
<af:query>
</af:query>
<af:panelHeader>
<af:panelCollection>
<af:table>
</af:panelCollection>
<af:panelBox>
if I were you, I will use panlesplitter like this,
<af:panelSplitter id="" splitterPosition="" orientation="vertical" disabled="false">
<f:facet name="first">
<af:panelHeader text=" General Journal ">
<af:query>
</af:query>
</af:panelHeader>
</f:facet>
<f:facet name="second">
<af:panelCollection>
<af:table>
</af:table>
</af:panelCollection>
</facet>
</af:panelSplitter>
Regards
KT
Edited by: KT on Dec 8, 2011 12:20 PM
Edited by: KT on Dec 8, 2011 12:21 PM
Edited by: KT on Dec 8, 2011 12:22 PM

ADF 11 generating differents ids for panel box

Hello,
I want to generate differents ids for panel box from an iterator because the drag and drop functionality doesn't work. I saw that the component ids doesn't support EL.
It is any chance to generate my ids dinamically and how?
My code from my page is :
<af:panelGroupLayout id="pgl8">
<af:iterator id="i2" var="row"
value="#{bindings.MeniuVO1.collectionModel}">
<af:panelBox text="#{row.Description}"
binding="#{WelcomeBean.pb1}"
inlineStyle="width:167px;">
<f:facet name="toolbar"/>
<af:dropTarget dropListener="#{DragAndDropBean.handleContainerDrag}"
actions="MOVE">
<af:dataFlavor flavorClass="javax.faces.component.UIComponent"/>
</af:dropTarget>
<af:componentDragSource/>
</af:panelBox>
</af:iterator>
</af:panelGroupLayout>
Thank you.

Hi,
can you try with <af:forEach/>
like
<af:forEach var="row"
items="#{bindings.MeniuVO1.rangeSet}">
<af:panelBox text="#{row.Description}"
inlineStyle="width:167px;">
<f:facet name="toolbar"/>
<af:dropTarget dropListener="#{DragAndDropBean.handleContainerDrag}"
actions="MOVE">
<af:dataFlavor flavorClass="javax.faces.component.UIComponent"/>
</af:dropTarget>
<af:componentDragSource/>
</af:panelBox>
</af:forEach>Edited by: Santosh Vaza on Apr 10, 2012 12:56 PM

As placing accordion panel in horizontal direction

I have a small problem I put the accordion panel in horizontal direction but do not know how it can be used only in a vertical or too horizontal? I await your prompt response is that I am finishing my page and I need to put the accordion in a horizontal position and do not like, I leave a picture of what you want.
Note: The image was altered in adobe photoshop that is why the accordion is flat, I did to recreate that is exactly what I want.

Hello,
The feature that you are looking for is not there is Adobe Muse. This has already been logged as Idea for new features in Adobe Muse by one of our Muse users.
Please have a look at the post : http://forums.adobe.com/ideas/2163
I would suggest you to add your vote and valuable comments to that post.
Regards,
Sachin

Multiple click boxes in the same page

I'm trying to include 4 click boxes in the same page in Captivate 5. The idea is when user clicks on each box, the content reveals and stays on the screen. The first click box works fine. But when click the second box, the content shows only for less than a second and then quickly moves to the next screen, and of course, there is no chance to even get to the 3rd and the 4th one. Can anyone help me? Thanks!

Hi Lilybiri,
Does this mean that the user has to click the click boxes in the order that you stagger the pauses? For example, if I'm showing a picture and instructing the user to click on any area to get more information, they could really click on any area first - however will that click box pop up if that click area was not the "first" pause in my timeline?
Also, how do I get the "success" caption text to stay on the page? I don't want it to fade so that the user can see all of the info. once they've clicked each box. I've checked to make sure that the "fade out" option is off, and I'm assuming I can't have the click boxes "display for the rest of the slide" since that would ruin the pause increments.
Thanks!
Chantelle

I no longer get a dialog box when bookmarking a page. I am unable to title and save the bookmark in the folder of my choice. Where has the dialog box gone please.

Whenever I have bookmarked a page, I got a dialog box where I could give the bookmark a title and choose the folder to save it in. Now when I click 'Bookmark this page, no box appears. The page is still saved in bookmarks but then I have to go into Organize bookmarks to put it where I want it. This is time I have not had to spend doing so in the past. I would like to know what has happened to the dialog box, why has it stopped appearing as normal? I really would like it back.

It was Mcafee SiteAdvisor 3.3 of all things that caused the problem. Can anyone suggest a better/equivalent type of extension I could use?
Thanks,

How do I eliminate websites displayed in the box on my home page?

There's a rectangular box on the home page below the search box. It has three websites displayed in it . It could be as a result of my visiting certain websites, not sure. I'd like to empty that box. What is the procedure for doing that?

I don't know what ''you're'' talking about without seeing a picture. The default Firefox 4+ homepage of '''about:home''' doesn't display 3 "websites" in the box below the searchcontainer, unless someone has hacked your local storage - that's why I was asking to see a screenshot.

How do i send hyperlink to a text box within the same page

how do i send hyperlink to a text box within the same page on iweb

It's called an anchor. It's often discussed in this forum.
2 days ago : anchor
Here's a search of the past year : anchors

My Firefox start page had a check box for searching Canadian pages which was lost when I upgraded to 4.0. How can I get this back?

My Firefox start page had a check box for searching Canadian pages which was lost when I upgraded to 4.0. How can I get this back?

The default about:home page in Firefox 4 doesn't give such features. You can set the home page to http://www.google.ca to get that possibility. The results page has a "Pages from Canada" link in the side menu at the left.

How to place a word document that autoflows text boxes onto every other page?

Is there a way to place a word document into InDesign that autoflows text boxes onto every other page?
Example
page 1 from word doc imports to page 1 in indesign,
page 2 from word doc imports to page 3 in indesign,
page 3 from word doc imports to page 5 in indesign, etc.
Than, take a different word doc and import to the even pages of the same indesign document,
Example
page 1 from word doc#2 imports to page 2 in indesign,
page 2 from word doc#2 imports to page 4 in indesign,
page 3 from word doc#2 imports to page 6 in indesign, etc.
Thanks

I don't import Word docs... but I don't think there is a simple 1-click solution.
You probably need to set up a facing pages document with a master text frame on each.
Create the pages you need and link the left text frames to each other and the right to each other.
Importing should work from there however not sure how the page-break works (if you have that set-up in Word).

Centering panel boxes horizontally on a page

Similar Messages

Maybe you are looking for