+ Start a Discussion
Alex85Alex85 

How to set width of a Visualforce-Page

HI,

I have a problem with width of a page, I have already fixed the width of components in the page, but the width of the page is still too wide and menu(logout ...) is far right.

What could I do to fix it?

 

Tanks.

Afzal MohammadAfzal Mohammad

Have you set your page's parent container's width to 100%?

 

If possible, please post your vf page code.

 

Afzal

sfdcfoxsfdcfox

Width of pages are automatically set to "100%". The header needs about 760~765 pixels at minimum. It sounds like you wrote some CSS that overloaded the menu, because that menu should never exceed 100% of the page, regardless of the page's content (tested this with a 4000px width div). Could you post your page?

Alex85Alex85

Hi, here is the pagecode:

 

 

<apex:page standardController="Auftragsposition__c"
    extensions="BarVerkaufWizardController" tabStyle="Auftragsposition__c"
    sidebar="false">
<style>
.LagerError {
    color: red;
    font-weight: strong;
}
</style>
    <apex:form ID="Kundenform">
        <apex:pagemessages id="Page-Messages" />
        <apex:PageBlock ID="Ausgewaehlt">
            <apex:pageBlockSection title="ausgewählter Kunde" collapsible="false"
                id="selectedKunde" columns="3">
                <apex:pageBlockTable style="text-align:center;white-space:pre;"
                    value="{!Apos}" var="ap" id="selectedPBTable">
                    <apex:column headerValue="">
                        <apex:commandButton action="{!step1}" value="{!Kundenbutton}"
                            onclick="return confirmCancel()" immediate="true"
                            style="margin-left: 2em" />
                    </apex:column>
                    <apex:column headerValue="Name">
                        <apex:outputField value="{!ap.Kunde__r.Name}" />
                    </apex:column>
                    <apex:column headerValue="Geburtsdatum">
                        <apex:outputField value="{!ap.Kunde__r.Geburtssdatum__c}" />
                    </apex:column>
                    <apex:column headerValue="Versichertennummer">
                        <apex:outputfield value="{!ap.Kunde__r.Versichertennummer__c}" />
                    </apex:column>
                    <apex:column headerValue="Krankenkasse">
                        <apex:outputfield value="{!ap.Kunde__r.Krankenkasse__c}" />
                    </apex:column>
                    <apex:column headerValue="Straße">
                        <apex:outputfield value="{!ap.Kunde__r.komb_Adresse__c}" />
                    </apex:column>
                    <apex:column >
                        <apex:commandButton action="{!Kasse}" value="zur Kasse" />
                    </apex:column>
                    <apex:column >
                        <apex:commandButton action="{!speichern}" value="speichern"
                            rendered="{!Sani_prop}" />
                    </apex:column>
                    <apex:column >
                        <apex:commandButton action="{!Rechng}" value="Rechnung"
                            rendered="{!WSIG_prop}" />
                    </apex:column>
                    <apex:column >
                        <apex:commandButton action="{!Reservierung}" value="Reservierung"
                            rendered="{!WSIG_prop}" />
                    </apex:column>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
            </apex:pageBlock>
    </apex:form>
    <apex:form id="Panelform">
    <apex:panelBar width="66%" id="PanelBar">
        <apex:panelBarItem label="noch nicht abgeschlossene Auftragspositionen" 
            rendered="{!NOT(ISNULL(Pending_prop))}" id="PendItem">
            <apex:PageBlock ID="PendBlock" >
            <apex:pageBlockSection title="noch nicht abgeschlossen"
                collapsible="false" id="PendBlocksection" >
                <apex:pageBlockTable style="text-align:center;white-space: pre;"
                    value="{!Pending_prop}" var="AP" id="HistBlockTable">
                    <apex:column headerValue="Bearbeiten" >
                        <apex:commandButton action="{!PenKopieren}"
                            rerender="PanelBar,BarForm,RezeptForm,Gesamtpreis" value="Bearbeiten">
                            <apex:param name="genkop" assignTo="{!applylfdNr}"
                                value="{!AP.lfdNr}" />
                        </apex:commandButton>
                    </apex:column>
                    <apex:column headerValue="Positionsart">
                        <apex:outputField value="{!AP.theRecord.Positionsart__c}" />
                    </apex:column>
                    <apex:column headerValue="Positionsnummer/PZN">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.Positionsnummer_PZN__c}" />
                    </apex:column>
                    <apex:column headerValue="Artikelname">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.Name}" />
                    </apex:column>
                    <apex:column headerValue="Menge in Verp.">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.Menge_ABDA__c}" />
                    </apex:column>
                    <apex:column headerValue="MgEinheit">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.a_pgr2_apo_Einheit__c}" />
                    </apex:column>
                    <apex:column headerValue="Gen. Anzahl Verp.">
                        <apex:outputfield value="{!AP.theRecord.GenAnzVerp__c}" />
                    </apex:column> 
                    <apex:column headerValue="genehmigt ab">
                        <apex:outputfield value="{!AP.theRecord.genehmigt_ab__c}" />
                    </apex:column> 
                    <apex:column headerValue="genehmigt bis">
                        <apex:outputfield value="{!AP.theRecord.genehmigt_bis__c}" />
                    </apex:column> 
                    <apex:column headerValue="GenMenge Stk/Tag">
                        <apex:outputfield value="{!AP.theRecord.Gen_Menge_Stk_Tag__c}" />
                    </apex:column> 
                    <apex:column headerValue="letzte Lieferung">
                        <apex:outputfield value="{!AP.theRecord.Enddatum_letzte_Lieferung__c}" />
                    </apex:column> 
                    <apex:column headerValue="reicht bis">
                        <apex:outputfield value="{!AP.theRecord.reicht_bis__c}" />
                    </apex:column> 
                    <apex:column headerValue="Restmenge">
                        <apex:outputfield value="{!AP.theRecord.Restmenge__c}" />
                    </apex:column> 
                    <apex:column headerValue="Status">
                        <apex:outputfield value="{!AP.theRecord.Genehmigungsstatus__c}" />
                    </apex:column> 
                </apex:pageBlockTable>
            </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:panelBarItem>
        <apex:panelBarItem label="Genehmigungen" rendered="{!NOT(ISNULL(Genehmigungen_prop))}">
            <apex:PageBlock ID="GenBlock" >
            <apex:pageBlockSection title="Genehmigungen"
                collapsible="false" id="GenBlocksection" >
                <apex:pageBlockTable style="text-align:center;white-space: pre;"
                    value="{!Genehmigungen_prop}" var="AP" id="GenBlockTable">
                    <apex:column headerValue="Kopieren" >
                        <apex:commandButton action="{!GenKopieren}"
                            rerender="BarForm,RezeptForm,Gesamtpreis" value="Kopieren">
                            <apex:param name="genkop" assignTo="{!applylfdNr}"
                                value="{!AP.lfdNr}" />
                        </apex:commandButton>
                    </apex:column>
                    <apex:column headerValue="Positionsart">
                        <apex:outputField value="{!AP.theRecord.Positionsart__c}" />
                    </apex:column>
                    <apex:column headerValue="Positionsnummer/PZN">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.Positionsnummer_PZN__c}" />
                    </apex:column>
                    <apex:column headerValue="Artikelname">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.Name}" />
                    </apex:column>
                    <apex:column headerValue="Menge in Verp.">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.Menge_ABDA__c}" />
                    </apex:column>
                    <apex:column headerValue="MgEinheit">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.a_pgr2_apo_Einheit__c}" />
                    </apex:column>
                    <apex:column headerValue="Gen. Anzahl Verp.">
                        <apex:outputfield value="{!AP.theRecord.GenAnzVerp__c}" />
                    </apex:column> 
                    <apex:column headerValue="genehmigt ab">
                        <apex:outputfield value="{!AP.theRecord.genehmigt_ab__c}" />
                    </apex:column> 
                    <apex:column headerValue="genehmigt bis">
                        <apex:outputfield value="{!AP.theRecord.genehmigt_bis__c}" />
                    </apex:column> 
                    <apex:column headerValue="GenMenge Stk/Tag">
                        <apex:outputfield value="{!AP.theRecord.Gen_Menge_Stk_Tag__c}" />
                    </apex:column> 
                    <apex:column headerValue="letzte Lieferung">
                        <apex:outputfield value="{!AP.theRecord.Enddatum_letzte_Lieferung__c}" />
                    </apex:column> 
                    <apex:column headerValue="reicht bis">
                        <apex:outputfield value="{!AP.theRecord.reicht_bis__c}" />
                    </apex:column> 
                    <apex:column headerValue="Restmenge">
                        <apex:outputfield value="{!AP.theRecord.Restmenge__c}" />
                    </apex:column> 
                    <apex:column headerValue="Status">
                        <apex:outputfield value="{!AP.theRecord.Genehmigungsstatus__c}" />
                    </apex:column> 
                </apex:pageBlockTable>
            </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:panelBarItem>
        <apex:panelBarItem label="Fallpauschalen" rendered="{!Not(ISNULL(Fallpauschalen_prop))}">
            <apex:PageBlock ID="FPBlock" >
            <apex:pageBlockSection title="Fallpauschalen"
                collapsible="false" id="FPBlocksection" >
                    <apex:commandButton action="{!neueFP}" value="neue Fallpauschale"/><BR/>
                    <apex:pageBlockTable style="text-align:center;white-space: pre;"
                    value="{!Fallpauschalen_prop}" var="AP" id="FPBlockTable" >
                    <apex:column headerValue="Positionsart">
                        <apex:outputField value="{!AP.theRecord.Positionsart__c}" />
                    </apex:column>
                    <apex:column headerValue="Positionsnummer/PZN">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.Positionsnummer_PZN__c}" />
                    </apex:column>
                    <apex:column headerValue="Artikelname">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.Name}" />
                    </apex:column>
                    <apex:column headerValue="Menge in Verp.">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.Menge_ABDA__c}" />
                    </apex:column>
                    <apex:column headerValue="MgEinheit">
                        <apex:outputField value="{!AP.theRecord.Artikel__r.a_pgr2_apo_Einheit__c}" />
                    </apex:column>
                    <apex:column headerValue="Gen. Anzahl Verp.">
                        <apex:outputfield value="{!AP.theRecord.GenAnzVerp__c}" />
                    </apex:column> 
                    <apex:column headerValue="genehmigt ab">
                        <apex:outputfield value="{!AP.theRecord.genehmigt_ab__c}" />
                    </apex:column> 
                    <apex:column headerValue="genehmigt bis">
                        <apex:outputfield value="{!AP.theRecord.genehmigt_bis__c}" />
                    </apex:column> 
                    <apex:column headerValue="GenMenge Stk/Tag">
                        <apex:outputfield value="{!AP.theRecord.Gen_Menge_Stk_Tag__c}" />
                    </apex:column> 
                    <apex:column headerValue="letzte Lieferung">
                        <apex:outputfield value="{!AP.theRecord.Enddatum_letzte_Lieferung__c}" />
                    </apex:column> 
                    <apex:column headerValue="reicht bis">
                        <apex:outputfield value="{!AP.theRecord.reicht_bis__c}" />
                    </apex:column> 
                    <apex:column headerValue="Restmenge">
                        <apex:outputfield value="{!AP.theRecord.Restmenge__c}" />
                    </apex:column> 
                    <apex:column headerValue="Status">
                        <apex:outputfield value="{!AP.theRecord.Genehmigungsstatus__c}" />
                    </apex:column> 
                </apex:pageBlockTable>
            </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:panelBarItem>
    </apex:panelBar>
    </apex:form>
    <apex:tabPanel switchType="client" selectedTab="Auftragspositionen" 
        width="66%" id="theTabPanel">
    <apex:tab label="Auftragspositionen" name="APos" id="APostab">
    <apex:form id="RezeptForm">
        <apex:PageBlock ID="ArtikelRezept" rendered="{!Rezept_prop}">
            <apex:pageBlockSection title="ausgewaehlte Artikel Rezept"
                collapsible="false" id="selectedArtRezept" rendered="{!Rezept_prop}">
                <apex:pageBlockTable style="text-align:center;vertical-align:middle;white-space:pre;"
                    value="{!BVAposlisteRezept}" var="AP" id="selectedPBTableRezept"
                    rendered="{!Rezept_prop}">
                    <apex:column headerValue="Löschen">
                        <apex:commandbutton action="{!deleteAposRezept}"
                            rerender="RezeptForm,Gesamtpreis" value="Löschen">
                            <apex:param name="c" assignTo="{!applylfdNr}" value="{!AP.lfdNr}" />
                        </apex:commandbutton>
                    </apex:column>
                    <apex:column headerValue="  Artikelname">
                        <apex:outputField value="{!AP.therecord.Artikel__r.Name}" />
                    </apex:column>
                    <apex:column headerValue="Positionsnummer/PZN">
                        <apex:outputField value="{!AP.therecord.Artikel__r.Positionsnummer_PZN__c}" />
                    </apex:column>
                    <apex:column headerValue="Menge in Verp.">
                        <apex:inputField value="{!AP.therecord.Artikel__r.Menge_in_Verpackung__c}" 
                            id="mengeInVerp">
                        </apex:inputField>
                    </apex:column>
              <apex:column headerValue="Anzahl Verp.">
               <apex:actionregion immediate="True">
                  <apex:inputField value="{!AP.therecord.GenAnzVerp__c}" id="anzVerp">
                  <apex:actionsupport action="{!changedAposRezept}" event="onchange" rerender="selectedArtRezept,Gesamtpreis">
                  <apex:param name="gava" assignto="{!applylfdNr}" value="{!AP.lfdNr}"/>
                  <apex:param name="gavb" assignto="{!applyModus}" value="GenAnzVerp"/>
                  </apex:actionsupport>
                  </apex:inputField>
               </apex:actionregion>
              </apex:column> 
              <apex:column headerValue="genehmigt ab">
               <apex:actionregion immediate="True">
                  <apex:inputfield value="{!AP.therecord.genehmigt_ab__c}" id="von" >
                  <apex:actionsupport action="{!changedAposRezept}" event="onchange" rerender="selectedArtRezept,Gesamtpreis">
                  <apex:param name="gaba" assignto="{!applylfdNr}" value="{!AP.lfdNr}"/>
                  <apex:param name="gabb" assignto="{!applyModus}" value="genab"/>
                  </apex:actionsupport>
                  </apex:inputfield>
               </apex:actionregion>
              </apex:column> 
              <apex:column headerValue="genehmigt bis">
               <apex:actionregion immediate="True">
                  <apex:inputfield value="{!AP.therecord.genehmigt_bis__c}" id="bis">
                  <apex:actionsupport action="{!changedAposRezept}" event="onchange" rerender="selectedArtRezept,Gesamtpreis">
                  <apex:param name="gbia" assignto="{!applylfdNr}" value="{!AP.lfdNr}"/>
                  <apex:param name="gbib" assignto="{!applyModus}" value="genbis"/>
                  </apex:actionsupport>
                  </apex:inputfield>
               </apex:actionregion>
              </apex:column> 
              <apex:column headerValue="Genehmigungsmg Stk/Tag">
               <apex:actionregion immediate="True">
                  <apex:inputField value="{!AP.therecord.Gen_Menge_Stk_Tag__c}" id="stkTag">
                  <apex:actionsupport action="{!changedAposRezept}" event="onchange" rerender="selectedArtRezept,Gesamtpreis">
                  <apex:param name="gsta" assignto="{!applylfdNr}" value="{!AP.lfdNr}"/>
                  <apex:param name="gstb" assignto="{!applyModus}" value="GenMgStkTag"/>
                  </apex:actionsupport>
                  </apex:inputField>
               </apex:actionregion>
              </apex:column> 
              <apex:column headerValue="Genehmigungsmg ges.">
               <apex:actionregion immediate="True">
                  <apex:inputField value="{!AP.therecord.Gen_Menge_ges__c}" 
                        id="gesMen">
                  <apex:actionsupport action="{!changedAposRezept}" event="onchange" rerender="selectedArtRezept,Gesamtpreis">
                  <apex:param name="gmga" assignto="{!applylfdNr}" value="{!AP.lfdNr}"/>
                  <apex:param name="gmgb" assignto="{!applyModus}" value="GenMgges"/>
                  </apex:actionsupport>
                  </apex:inputField>
               </apex:actionregion>
              </apex:column> 
              <apex:column headerValue="Status">
               <apex:actionregion immediate="True">
                  <apex:inputfield value="{!AP.therecord.Genehmigungsstatus__c}" id="statusR">
                  <apex:actionsupport action="{!changedAposRezept}" event="onchange" rerender="selectedArtRezept,Gesamtpreis">
                  <apex:param name="gsta" assignto="{!applylfdNr}" value="{!AP.lfdNr}"/>
                  <apex:param name="gstb" assignto="{!applyModus}" value="GenStatus"/>
                  </apex:actionsupport>
                  </apex:inputfield>
               </apex:actionregion>
              </apex:column> 
                    <apex:column headerValue="Einzelpreis  €">
                        <apex:outputText value="{!AP.Einzelpreis}"
                            id="einzPreis">
                        </apex:outputText>
                    </apex:column>
                    <apex:column headerValue="Gesamtpreis  €">
                        <apex:actionregion immediate="True"> 
                        <apex:outputText value="{!AP.Gesamtpreis}" 
                            id="gesPreis">
                            <apex:actionsupport event="onchange" />
                                <apex:param name="a" assignto="{!applylfdNr}"
                                    value="{!AP.lfdNr}" />
                        </apex:outputText>
                        </apex:actionregion>
                    </apex:column>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
            </apex:pageBlock>
    </apex:form>
    </apex:tab>
    </apex:tabPanel>
</apex:page>

 

sfdcfoxsfdcfox

I don't see a reason why it would be doing this; you have virtually no style information. Maybe a screenshot could help to clarify matters a bit. Can you post a screenshot here?