0

enter image description hereI have two selectLists that are wrapped around an outputPanel but I'm not sure how to align them in the center. I know I could do it possibly w/margin but is there a cleaner way to do it?

<apex:outputPanel id="panel1" style="align:center;">

  <apex:selectList size="7" value="{!childObjToMig}" id="related_lists">
   <apex:selectOptions value="{!children}"/>
  </apex:selectList>

  <apex:commandButton value="=>" action="{!giveChild}" reRender="panel1"/>

  <apex:commandButton value="<=" action="{!returnChild}" reRender="panel1"/>

 <apex:selectList size="7" value="{!childObjToRem}" style="width:115px;" id="migration_list">
  <apex:selectOptions value="{!migrateList}"/>
 </apex:selectList>
</apex:outputPanel>
  • please show a screen shot; also, since select lists just render as HTML, you could get additional support by posting native HTML on stackoverflow – cropredy Aug 17 '16 at 19:02
  • @cropredy Stack Overflow is probably not appropriate, actually, because we're talking about tweaking HTML elements that we have little control over; this problem is very language specific as written. If it'd been just a plain set of div/span elements, then it would be appropriate there. – sfdcfox Aug 17 '16 at 19:35
1

I got this to work by adding the style to the panelGrid, then fixing your outputPanel style.

<apex:panelGrid columns="1" style="display: table; width: 100%">
<apex:outputPanel id="panel1" style="text-align: center; display: block">

  <apex:selectList size="7" value="{!childObjToMig}" id="related_lists">
   <apex:selectOptions value="{!children}"/>
  </apex:selectList>

  <apex:commandButton value="=>" action="{!giveChild}" reRender="panel1"/>

  <apex:commandButton value="<=" action="{!returnChild}" reRender="panel1"/>

 <apex:selectList size="7" value="{!childObjToRem}" style="width:115px;" id="migration_list">
  <apex:selectOptions value="{!migrateList}"/>
 </apex:selectList>
</apex:outputPanel>

Here's a very simple, self-contained example:

<apex:page >
    <apex:form>
        <apex:panelGrid columns="1" style="display: table; width: 100%">
            <apex:outputPanel style="text-align: center; display: block;">
                <apex:selectList />
                <apex:commandButton />
                <apex:commandButton />
                <apex:selectList />
            </apex:outputPanel>
        </apex:panelGrid>
    </apex:form>
</apex:page>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.