0

When I set LightningStylesheets ="true" in Visualforce, the width of widened. How can I adjust the width? Also, it will be helpful if you can tell me how to change the color of the background.

<apex:page standardController="Order__c" extensions="SimulationController" action="{!initAction}" showHeader="true" sidebar="false" lightningStylesheets="true">
    <style type="text/css">
        .column_width{width: 80px}
        .mini_width{width: 29px}
        .short_width{width: 50px}
        .midi_width{width: 60px}
        .long_width{width: 180px; display: inline-block;}
        .info{ margin: 10px 25px }
        .parent_row{background-color: #BAD3FF}
        .child_row{background-color: #D9E5FF}
        .numeric_cell{text-align: right;}
        .totalRow{text-align: right;}
        .customPopup {
            background-color: white;
            border-style: solid;
            border-width: 2px;
            left: 20%;
            padding: 10px;
            position: absolute;
            z-index: 9999;
            width: 400px;
            top: 20%;
        }
        .closeButton {float: right;}
    </style>
    <apex:pageMessages escape="false" />
<apex:form id="form">
    <apex:pageBlock title="" mode="edit">
        <apex:pageBlockSection >
                <apex:pageBlockTable value="{!vhlpList.values}" var="vhlp" id="productTable" >
                    <!-- Checkbox -->
                    <apex:column styleClass="{!IF(vhlp.isParent,'parent_row', '')}">
                        <apex:inputCheckbox value="{!vhlp.IsSelected}" rendered="{!(vhlp.isParent || (!vhlp.isChild && !vhlp.isParent))}" />
                    </apex:column>
                    <!-- Checkbox Child-->
                    <apex:column styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                        <apex:inputCheckbox value="{!vhlp.IsSelected}" rendered="{!vhlp.IsChild}"/>
                    </apex:column>
                    <!-- 受注商品: 品名 -->
                    <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BDescription__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                        <apex:inputField value="{!vhlp.op.BDescription__c}" style="width: 235px" />
                    </apex:column>
                    <!-- 型式 -->
                    <apex:column headerValue="{!$ObjectType.Product2.Fields.BModelNumber2__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                        <apex:outputText value="{!vhlp.product.BModelNumber2__c}"/>
                    </apex:column>
                    <!-- 計上方法 -->
                    <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BEarningsSummingUp__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputPanel layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                        <apex:outputtext value="{!vhlp.op.BEarningsSummingUp__c}" />
                    </apex:outputPanel>
                </apex:column>
                <!-- 数量 -->
                <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BQuantity__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputPanel styleClass="requiredInput" layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                        <apex:inputField value="{!vhlp.op.BQuantity__c}" styleClass="short_width" required="true" rendered="{!OR(vhlp.isParent,AND(NOT(vhlp.isChild),NOT(vhlp.isParent)))}">
                            <apex:actionSupport event="onchange" action="{!doChangeQuantity}" rerender="productTable">
                                <apex:param name="rowNum" value="{!vhlp.num}" />
                            </apex:actionSupport>
                        </apex:inputField>
                    </apex:outputPanel>
                    <apex:outputtext value="{0, number, ###.##}" rendered="{!vhlp.isChild}">
                        <apex:param value="{!vhlp.op.BQuantity__c}" ></apex:param>
                    </apex:outputtext>
                    <apex:outputText value="{!vhlp.errorMessage}" styleClass="errorMsg" rendered="{!LEN(vhlp.errorMessage)>0}"/>
                </apex:column>
                <!-- 定価 -->
                <apex:column headerValue="リスト価格" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}" >
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!OR(vhlp.op.BBomFlag__c,vhlp.isChild)}">
                        <apex:param value="{!vhlp.op.BStockingFixedPriceList__c}" ></apex:param>
                    </apex:outputtext>
                    <apex:outputPanel styleClass="requiredInput" layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                    </apex:outputPanel>
                </apex:column>
                <!-- 期間 -->
                <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.sls_SalesPeriod__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!vhlp.op.BEarningsSummingUp__c='月別'}">
                        <apex:param value="{!vhlp.op.sls_SalesPeriod__c}" />
                    </apex:outputtext>
                </apex:column>
                <!-- 販売価格 -->
                <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BUnitPrice__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputPanel styleClass="requiredInput" layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                        <apex:inputField value="{!vhlp.op.BUnitPrice__c}" styleClass="column_width" rendered="{!AND(NOT(vhlp.isParent),vhlp.op.BEarningsSummingUp__c='一括')}"/>
                        <apex:inputField value="{!vhlp.op.sls_MonthlySum__c}" styleClass="column_width" rendered="{!AND(NOT(vhlp.isParent),vhlp.op.BEarningsSummingUp__c='月別')}"/>
                    </apex:outputPanel>
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!AND(vhlp.isParent,vhlp.op.BEarningsSummingUp__c='月別')}">
                        <apex:param value="{!vhlp.op.sls_MonthlySum__c}" ></apex:param>
                    </apex:outputtext>
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!AND(vhlp.isParent,vhlp.op.BEarningsSummingUp__c='一括')}">
                        <apex:param value="{!vhlp.op.sls_TotalUnitPrice__c}" ></apex:param>
                    </apex:outputtext>
                </apex:column>
                <!-- 仕入単価 -->
                <apex:column headerValue="仕入単価" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputPanel styleClass="requiredInput" layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                        <apex:inputField value="{!vhlp.op.BStockingPrice__c}"  required="true" styleClass="column_width" rendered="{!AND(NOT(vhlp.isParent),vhlp.op.BEarningsSummingUp__c='一括')}"/>
                        <apex:inputField value="{!vhlp.op.sls_MonthlyStockingPrice__c}"  required="true" styleClass="column_width" rendered="{!AND(NOT(vhlp.isParent), vhlp.op.BEarningsSummingUp__c='月別') }"></apex:inputField>
                    </apex:outputPanel>
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!AND(vhlp.isParent,vhlp.op.BEarningsSummingUp__c='月別')}">
                        <apex:param value="{!vhlp.op.sls_MonthlyStockingPrice__c}" ></apex:param>
                    </apex:outputtext>
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!AND(vhlp.isParent,vhlp.op.BEarningsSummingUp__c='一括')}">
                        <apex:param value="{!vhlp.op.sls_TotalStockingPrice__c}" ></apex:param>
                    </apex:outputtext>
                </apex:column>
                <!--割引率 -->
                <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BDiscount__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:inputText value="{!vhlp.discountAmount}" styleClass="short_width" rendered="{!NOT(
                    vhlp.isParent)}"/>
                    <apex:outputtext value="{0, number, ###,###.##}" rendered="{!vhlp.isParent}">
                        <apex:param value="{!vhlp.discountAmount}"></apex:param>
                    </apex:outputtext>
                    <!-- 割引合計 -->
                    <apex:facet name="footer">
                        <apex:outputtext value="{0, number, ###,###.##}" >
                            <apex:param value="{!vhlpList.grandTotalDiscount}"></apex:param>
                        </apex:outputtext>
                    </apex:facet>
                </apex:column>
                <apex:column styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:selectList value="{!vhlp.discountType}" size="1" >
                        <apex:selectOptions value="{!discountTypes}"/>
                        <apex:actionSupport event="onchange" action="{!doSwitchDiscountType}" rerender="productTable">
                            <apex:param name="rowNum" value="{!vhlp.num}" />
                        </apex:actionSupport>
                    </apex:selectList>
                    <!-- 割引タイプ -->
                    <apex:facet name="footer">
                        <apex:selectList value="{!vhlpList.grandDiscountType}" size="1" >
                            <apex:selectOptions value="{!discountTypes}"/>
                            <apex:actionSupport event="onchange" action="{!doSwitchGrandDiscountType}" rerender="productTable" />
                        </apex:selectList>
                    </apex:facet>
                </apex:column>
                <!--合計 -->
                <apex:column headerValue="売上" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))} numeric_cell">
                    <apex:outputtext value="{0, number, ###,###}">
                        <apex:param value="{!vhlp.totalPrice}"></apex:param>
                    </apex:outputtext>
                    <!-- Grand Total -->
                    <apex:facet name="footer">
                        <apex:outputtext value="{0, number, ###,###}" >
                            <apex:param value="{!vhlpList.grandTotalPrice}"></apex:param>
                        </apex:outputtext>
                    </apex:facet>
                </apex:column>
                <!-- 売総率 -->
                <apex:column headerValue="売総率" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))} numeric_cell">
                    <apex:outputtext value="{!TEXT(vhlp.profitRate) & ' %'}" rendered="{!vhlp.isParent}">
                        <!-- <apex:param value="{!vhlp.profitRate}"/> -->
                    </apex:outputtext>
                    <apex:outputPanel styleClass="midi_width" layout="block"/>
                    <apex:outputtext value="{!vhlp.profitRate}" styleClass="mini_width" rendered="{!NOT(vhlp.isParent)}">
                        <apex:param name="rowNum" value="{!vhlp.num}" />
                        <apex:outputtext value="{0, number, 00.00 %}" rendered="{!vhlp.isParent}"/>
                    </apex:outputtext>
                    <apex:outputtext value=" %" rendered="{!NOT(vhlp.isParent)}" />
                    <!-- Grand Total -->
                    <apex:facet name="footer" >
                        <apex:outputtext value="{0, number, 00.00 %}" >
                            <apex:param value="{!vhlpList.grandTotalProfit}">
                        </apex:param>
                        </apex:outputtext>
                    </apex:facet>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlockSection>

        <!-- ボタン -->
        <apex:pageBlockButtons >
            <apex:commandButton action="{!doAllCheckOff}" value="選択解除" reRender="productTable"/>
            <apex:commandButton action="{!doDeleteOrderProduct}" value="削除" reRender="productTable"/>
            <apex:outputText value=" " />
            <apex:commandButton action="{!moveTop}" value="↑ 最上位へ" reRender="productTable" />
            <apex:commandButton action="{!moveUp}" value="↑ 上へ" reRender="productTable" />
            <apex:commandButton action="{!moveDown}" value="↓ 下へ" reRender="productTable" />
            <apex:commandButton action="{!moveBottom}" value="↓ 最下位へ" reRender="productTable"/>
            <apex:outputText value=" " />
            <!-- onchangeのアクション後、再計算 -->
            <apex:outputPanel >
                <input type="button" id="calc" value="再計算" onclick="setTimeout(doCalc, 700);" class="btn" />
                <apex:actionFunction action="{!doCalculate}" name="doCalc" rerender="productTable"/>
            </apex:outputPanel>
            <apex:commandButton action="{!doApply}" value="適用"/>
            <apex:commandButton value="リセット" action="{!showPopup}" rerender="popup" status="status" immediate="true"/>
            <apex:outputPanel id="popup">
                <apex:outputPanel id="popInnerOutputPnl" styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
                    <apex:commandButton value="X" title="Close the popup" action="{!closePopup}" styleClass="closeButton" rerender="popup" immediate="true"/>
                    <apex:pageblockSection >
                        <apex:pageblockSectionItem >
                            <apex:outputLabel value="保存していない内容は破棄されます。 よろしいですか ?" for="address"/>
                        </apex:pageblockSectionItem>
                    </apex:pageblockSection>
                    <apex:commandButton value="いいえ" action="{!closePopup}" styleClass="closeButton" rerender="popup" immediate="true"/>
                    <apex:commandButton value="はい" action="{!pageRefresh}" styleClass="closeButton" rerender="productTable,popup" immediate="true"/>
                </apex:outputPanel>
            </apex:outputPanel>
        </apex:pageBlockButtons>
    </apex:pageBlock>
</apex:form>

  • Hey Noa. Were you able to get the layout working? – Shane Steinfeld Sep 30 '18 at 21:45
0

Not sure this is something you need to adjust using Lightning stylesheets. I would just wrap the content in a div and use it to set the width & background color.

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.